OGS-Main
/
ogs-site

<!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 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>
                <div id="lang">
                    <a href="../../en/news/gitjs-intro.html">EN</a>
                    <a href="../../ru/news/gitjs-intro.html">RU</a>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <h3 class="left_item_title">В новостях...</h3>
        <center>
            <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="disqus_thread"></div>
            <script>
                var disqus_config = function () {
                this.page.url = "https://opengamestudio.org/ru/news/gitjs-intro.html";
                this.page.identifier = "gitjs-intro.html";
                };
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://opengamestudio.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
            </script>
            <noscript>Пожалуйста, включите JavaScript для просмотра <a href="https://disqus.com/?ref_noscript">комментариев на платформе Disqus.</a></noscript>
            <div id="footer">
                Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
                из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
            </div>
        </center>
    </body>
</html>