Browser apps inside browsers
This commit is contained in:
175
ru/news/2021-01-28_gitjs-intro.md
Normal file
175
ru/news/2021-01-28_gitjs-intro.md
Normal file
@@ -0,0 +1,175 @@
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user