<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="../../style.css">
</head>
<body>
<script data-goatcounter="https://services.opengamestudio.org:443/count" async src="//services.opengamestudio.org:443/count.js"></script>
<div id="header">
<div>
<strong id="title">Open Game Studio</strong>
<div id="lang">
<a href="../../en/news/gitjs-intro.html">EN</a>
<a href="../../ru/news/gitjs-intro.html">RU</a>
</div>
</div>
<div class="header2">
<div class="menu">
<a href="../../ru/news/index.html">Новости</a>
<a href="../../ru/game/index.html">Игры</a>
<a href="../../ru/tool/index.html">Инструменты</a>
<a href="../../ru/page/about.html">О нас</a>
</div>
<a class="discord" href="https://discord.gg/3A6THQabNf">
<img src="../../images/discord.png"></img>
</a>
<div class="clear"></div>
</div>
</div>
<center>
<h1>В новостях...</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="gitjs-intro.html">Как я создаю приложения для браузера прямо в браузере</a>
</h2>
<p class="news_item_date">
2021-01-28 00:00
</p>
<div class="news_item_contents">
<p><img src="../../images/2021_gitjs-intro_снимок.jpg" alt="GitJS" /></p>
<p>В этой статье Михаил поделится опытом создания доступных долговечных приложений.</p>
<p>В 2013 году компания Canonical <a href="https://habr.com/ru/post/187480">пыталась собрать средства на выпуск смартфона
Ubuntu Edge</a>. Особенностью продукта должна была стать возможность
преобразовывать смартфон в полноценный ПК. Увы, необходимую сумму собрать не
удалось, поэтому мечта создать универсальное устройство так и осталась мечтой.</p>
<p>Со своей стороны я давно искал универсальность со стороны программного
обеспечения, не железа. Сегодня с уверенностью могу сказать, что нашёл
необходимую комбинацию: Git и JavaScript.</p>
<p>Ранее я уже описывал как преимущества браузерных приложений на примере
генератора статических сайтов <a href="http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html">nCKOB</a>, так и преимущества замены
очередного сервера с АПИ на Git для общения с внешним миром на примере
приложения учёта трат <a href="http://opengamestudio.org/ru/news/git-budget.html">ГитБюджет</a>. После выпуска ГитБюджета
оставшуюся часть 2020 года я потратил на систему, позволяющую создавать
браузерные приложения прямо в браузере. Эту систему я назвал GitJS.</p>
<p><cut/></p>
<h1 id="gitjs">GitJS</h1>
<p>Git в новой системе используется для:</p>
<ul>
<li>долговременного хранения данных <strong>вне</strong> устройства;</li>
<li>общения с внешним миром;</li>
<li>доставки приложения на устройство по HTTP.</li>
</ul>
<p>Таким образом, на текущий момент Git не используется в качестве контроля версий,
лишь как широко распространённая технология хранения с доступом на чтение
(HTTP) и запись. Это несколько противоречит первоначальной задумке автора,
однако позволяет каждому определить условия хранения своих данных:
платно/бесплатно, локально/дистанционно.</p>
<p>Альтернативой Git могло бы стать использование FTP/rsync, но нет ни широко
известных и доступных сервисов вроде SourceForge/GitHub/BitBucket/GitLab, ни
реализаций для работы с FTP/rsync из браузера вроде <a href="https://isomorphic-git.org">Isomorphic-Git</a>.</p>
<p>JS (вместе с HTML/CSS) используется для:</p>
<ul>
<li>интерфейса;</li>
<li>логики;</li>
<li>долговременного хранения приложения и данных <strong>на</strong> устройстве.</li>
</ul>
<p>GitJS состоит из следующих трёх обязательных частей (в порядке исполнения):</p>
<ol>
<li><a href="https://gitlab.com/gitjs/gitjs.gitlab.io/-/blob/master/index.html">Страница HTML</a><ul>
<li>вводит правила GitJS</li>
<li>имеет крошечный размер для работы на медленных сетях</li>
<li>запрашивается с веб-сервера при каждом обновлении страницы</li>
<li>может располагаться локально, чтобы обходиться без Интернета</li></ul></li>
<li><a href="https://bitbucket.org/gitjs/0000/src/master/0000.js">Правила GitJS</a><ul>
<li>представляют из себя код JS</li>
<li>вводят понятие модулей с их загрузкой, сохранением и исполнением</li>
<li>вводят понятие черёд: способа оформления кода реактивно-событийно</li>
<li>запрашиваются страницей HTML лишь при отсутствии или при обновлении</li>
<li>сохраняются страницей HTML в LocalStorage для ускорения последующих пусков</li></ul></li>
<li><a href="https://git.opengamestudio.org/kornerr/nPOBEPuTb-JSZip">Пусковой модуль</a><ul>
<li>указывается в адресной строке после символа <code>?</code></li>
<li>исполняется после загрузки правил GitJS</li>
<li>делает что угодно, например, вводит понятие других модулей, которые нужно загрузить перед началом работы</li>
<li>в примере по ссылке я проверял библиотеку JSZip</li></ul></li>
</ol>
<p>Пусковой модуль может ввести абсолютно любые дополнительные правила к GitJS или
же их заменить, поэтому фантазия тут ограничена лишь возможностями браузера:
в частности, не удастся удалить все файлы пользователя на диске.</p>
<p>Отдельно повторю, что наличие локальных страницы HTML и веб-сервиса Git
позволяет сделать систему независимой от Интернета.</p>
<h1 id="gitjs1gitjs">Приложение GitJS №1: редактор модулей GitJS</h1>
<p>На текущий момент редактор обладает минимальной необходимой функциональностью:</p>
<p><strong>1.1. Правка текстовых файлов модуля</strong></p>
<p><img src="../../images/2021_gitjs-intro_правка-текстовых-файлов.png" alt="" /></p>
<p><strong>1.2. Публикация изменений в Git</strong></p>
<p><img src="../../images/2021_gitjs-intro_публикация-изменений.png" alt="" /></p>
<p><strong>Замечание</strong>: пароли хранит браузер.</p>
<p><strong>1.3. Правка структуры модуля</strong></p>
<p><img src="../../images/2021_gitjs-intro_правка-структуры.png" alt="" /></p>
<p><strong>1.4. Открытие ранее загруженного модуля из LocalStorage/IndexedDB</strong></p>
<p><img src="../../images/2021_gitjs-intro_открытие-модуля.png" alt="" /></p>
<p><strong>1.5. Сохранение изменений локально в LocalStorage/IndexedDB</strong></p>
<p>Последняя версия редактора доступна здесь: <a href="http://gitjs.org/📦">http://gitjs.org/📦</a>. Первый пуск происходит не быстро, так что наберитесь терпения.</p>
<h1 id="gitjs2">Приложение GitJS №2: пасьянс Маджонг</h1>
<p>Игра на текущий момент обладает следующей функциональностью:</p>
<p><strong>2.1. Выбор и удаление фишек с поля в соответствии с правилами пасьянса Маджонг</strong></p>
<p><img src="../../images/2021_gitjs-intro_механика.png" alt="" /></p>
<p><strong>2.2. Выбор темы фишек</strong></p>
<p><img src="../../images/2021_gitjs-intro_темы.png" alt="" /></p>
<p><strong>2.3. Выбор раскладки игрового поля</strong></p>
<p><img src="../../images/2021_gitjs-intro_раскладки.png" alt="" /></p>
<p><strong>2.4. Определение победы и поражения</strong></p>
<p>Последняя версия игры доступна здесь: <a href="http://gitjs.org/🀄/1.0.14">http://gitjs.org/🀄/1.0.14</a>.</p>
<p>Конечной целью для игры является воспроизведение выпущенного много лет назад
<a href="http://opengamestudio.org/ru/game/ogs-mahjong-1.html">Маджонга</a>, который работал лишь на Linux и Windows.</p>
<h1 id="">Ограничения</h1>
<p>Ограничения GitJS проистекают из ограничений браузеров.</p>
<p><strong>1. CORS</strong></p>
<p>Для записи изменений в Git необходимо соблюсти CORS.
На текущий момент крупные сервисы <a href="https://github.com/isomorphic-git/isomorphic-git#cors-support">не разрешают невозбранно писать в их Git</a>,
поэтому приходится либо использовать прокси, либо поднимать свой Git.</p>
<p><strong>2. Полноэкранный режим на мобилках</strong></p>
<p>Нынче в моду вошло схлопывание элементов управления браузеров при перемотке
страниц, не помещающихся в экран. В результате выходит, что якобы
освобождённые области сверху и снизу всё равно нельзя трогать, т.к. это
приводит к возвращению элементов управления и изменению размера области
отображения.</p>
<p>В пасьянсе Маджонг эту проблему я обошёл поддержкой портретного режима и
возможностью смещать игровое поле влево/вправо. К сожалению, это усложняет
игру, т.к. не видно целиком игрового поля.</p>
<h1 id="-1">Планы</h1>
<p>Упоминавшийся ранее <a href="http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html">nCKOB</a> в этому году станет приложением GitJS, что
позволит создавать статические сайты, не покидая браузер. Посмотрим, что из
этого выйдет.</p>
<p>ЗЫ: Первым изображением является картина "Баян", написанная Виктором Васнецовым в 1910 году.</p>
</div>
</div>
<div id="footer">
Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
</div>
</center>
</body>
</html>