176 lines
11 KiB
Markdown
176 lines
11 KiB
Markdown
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.
|
||
|
||
<cut/>
|
||
|
||
# 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
|
||
|