Title: Как я создаю приложения для браузера прямо в браузере Date: 2021-01-28 00:00 Category: News Slug: gitjs-intro Lang: ru ![GitJS][снимок] В этой статье Михаил поделится опытом создания доступных долговечных приложений. В 2013 году компания Canonical [пыталась собрать средства на выпуск смартфона Ubuntu Edge][сбор-средств]. Особенностью продукта должна была стать возможность преобразовывать смартфон в полноценный ПК. Увы, необходимую сумму собрать не удалось, поэтому мечта создать универсальное устройство так и осталась мечтой. Со своей стороны я давно искал универсальность со стороны программного обеспечения, не железа. Сегодня с уверенностью могу сказать, что нашёл необходимую комбинацию: Git и JavaScript. Ранее я уже описывал как преимущества браузерных приложений на примере генератора статических сайтов [nCKOB][псков], так и преимущества замены очередного сервера с АПИ на Git для общения с внешним миром на примере приложения учёта трат [ГитБюджет][гит-бюджет]. После выпуска ГитБюджета оставшуюся часть 2020 года я потратил на систему, позволяющую создавать браузерные приложения прямо в браузере. Эту систему я назвал GitJS. # GitJS Git в новой системе используется для: * долговременного хранения данных **вне** устройства; * общения с внешним миром; * доставки приложения на устройство по HTTP. Таким образом, на текущий момент Git не используется в качестве контроля версий, лишь как широко распространённая технология хранения с доступом на чтение (HTTP) и запись. Это несколько противоречит первоначальной задумке автора, однако позволяет каждому определить условия хранения своих данных: платно/бесплатно, локально/дистанционно. Альтернативой Git могло бы стать использование FTP/rsync, но нет ни широко известных и доступных сервисов вроде SourceForge/GitHub/BitBucket/GitLab, ни реализаций для работы с FTP/rsync из браузера вроде [Isomorphic-Git][isomorphic-git]. JS (вместе с HTML/CSS) используется для: * интерфейса; * логики; * долговременного хранения приложения и данных **на** устройстве. GitJS состоит из следующих трёх обязательных частей (в порядке исполнения): 1. [Страница HTML][страница-html] * вводит правила GitJS * имеет крошечный размер для работы на медленных сетях * запрашивается с веб-сервера при каждом обновлении страницы * может располагаться локально, чтобы обходиться без Интернета 1. [Правила GitJS][правила-гитжс] * представляют из себя код JS * вводят понятие модулей с их загрузкой, сохранением и исполнением * вводят понятие черёд: способа оформления кода реактивно-событийно * запрашиваются страницей HTML лишь при отсутствии или при обновлении * сохраняются страницей HTML в LocalStorage для ускорения последующих пусков 1. [Пусковой модуль][пусковой-модуль] * указывается в адресной строке после символа `?` * исполняется после загрузки правил GitJS * делает что угодно, например, вводит понятие других модулей, которые нужно загрузить перед началом работы * в примере по ссылке я проверял библиотеку JSZip Пусковой модуль может ввести абсолютно любые дополнительные правила к GitJS или же их заменить, поэтому фантазия тут ограничена лишь возможностями браузера: в частности, не удастся удалить все файлы пользователя на диске. Отдельно повторю, что наличие локальных страницы HTML и веб-сервиса Git позволяет сделать систему независимой от Интернета. # Приложение GitJS №1: редактор модулей GitJS На текущий момент редактор обладает минимальной необходимой функциональностью: **1.1. Правка текстовых файлов модуля** ![][правка-текстовых-файлов] **1.2. Публикация изменений в Git** ![][публикация-изменений] **Замечание**: пароли хранит браузер. **1.3. Правка структуры модуля** ![][правка-структуры] **1.4. Открытие ранее загруженного модуля из LocalStorage/IndexedDB** ![][открытие-модуля] **1.5. Сохранение изменений локально в LocalStorage/IndexedDB** Последняя версия редактора доступна здесь: [http://gitjs.org/📦](http://gitjs.org/📦). Первый пуск происходит не быстро, так что наберитесь терпения. # Приложение GitJS №2: пасьянс Маджонг Игра на текущий момент обладает следующей функциональностью: **2.1. Выбор и удаление фишек с поля в соответствии с правилами пасьянса Маджонг** ![][механика] **2.2. Выбор темы фишек** ![][темы] **2.3. Выбор раскладки игрового поля** ![][раскладки] **2.4. Определение победы и поражения** Последняя версия игры доступна здесь: [http://gitjs.org/🀄/1.0.14](http://gitjs.org/🀄/1.0.14). Конечной целью для игры является воспроизведение выпущенного много лет назад [Маджонга][маджонг1], который работал лишь на Linux и Windows. # Ограничения Ограничения GitJS проистекают из ограничений браузеров. **1. CORS** Для записи изменений в Git необходимо соблюсти CORS. На текущий момент крупные сервисы [не разрешают невозбранно писать в их Git][cors], поэтому приходится либо использовать прокси, либо поднимать свой Git. **2. Полноэкранный режим на мобилках** Нынче в моду вошло схлопывание элементов управления браузеров при перемотке страниц, не помещающихся в экран. В результате выходит, что якобы освобождённые области сверху и снизу всё равно нельзя трогать, т.к. это приводит к возвращению элементов управления и изменению размера области отображения. В пасьянсе Маджонг эту проблему я обошёл поддержкой портретного режима и возможностью смещать игровое поле влево/вправо. К сожалению, это усложняет игру, т.к. не видно целиком игрового поля. # Планы Упоминавшийся ранее [nCKOB][псков] в этому году станет приложением GitJS, что позволит создавать статические сайты, не покидая браузер. Посмотрим, что из этого выйдет. ЗЫ: Первым изображением является картина "Баян", написанная Виктором Васнецовым в 1910 году. [isomorphic-git]: https://isomorphic-git.org [сбор-средств]: https://habr.com/ru/post/187480 [псков]: http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html [гит-бюджет]: http://opengamestudio.org/ru/news/git-budget.html [страница-html]: https://gitlab.com/gitjs/gitjs.gitlab.io/-/blob/master/index.html [правила-гитжс]: https://bitbucket.org/gitjs/0000/src/master/0000.js [пусковой-модуль]: https://git.opengamestudio.org/kornerr/nPOBEPuTb-JSZip [маджонг1]: http://opengamestudio.org/ru/game/ogs-mahjong-1.html [правка-текстовых-файлов]: ../../images/2021_gitjs-intro_правка-текстовых-файлов.png [публикация-изменений]: ../../images/2021_gitjs-intro_публикация-изменений.png [правка-структуры]: ../../images/2021_gitjs-intro_правка-структуры.png [открытие-модуля]: ../../images/2021_gitjs-intro_открытие-модуля.png [механика]: ../../images/2021_gitjs-intro_механика.png [темы]: ../../images/2021_gitjs-intro_темы.png [раскладки]: ../../images/2021_gitjs-intro_раскладки.png [снимок]: ../../images/2021_gitjs-intro_снимок.jpg [cors]: https://github.com/isomorphic-git/isomorphic-git#cors-support