2021-01-28_gitjs-intro.md 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. Title: Как я создаю приложения для браузера прямо в браузере
  2. Date: 2021-01-28 00:00
  3. Category: News
  4. Slug: gitjs-intro
  5. Lang: ru
  6. ![GitJS][снимок]
  7. В этой статье Михаил поделится опытом создания доступных долговечных приложений.
  8. В 2013 году компания Canonical [пыталась собрать средства на выпуск смартфона
  9. Ubuntu Edge][сбор-средств]. Особенностью продукта должна была стать возможность
  10. преобразовывать смартфон в полноценный ПК. Увы, необходимую сумму собрать не
  11. удалось, поэтому мечта создать универсальное устройство так и осталась мечтой.
  12. Со своей стороны я давно искал универсальность со стороны программного
  13. обеспечения, не железа. Сегодня с уверенностью могу сказать, что нашёл
  14. необходимую комбинацию: Git и JavaScript.
  15. Ранее я уже описывал как преимущества браузерных приложений на примере
  16. генератора статических сайтов [nCKOB][псков], так и преимущества замены
  17. очередного сервера с АПИ на Git для общения с внешним миром на примере
  18. приложения учёта трат [ГитБюджет][гит-бюджет]. После выпуска ГитБюджета
  19. оставшуюся часть 2020 года я потратил на систему, позволяющую создавать
  20. браузерные приложения прямо в браузере. Эту систему я назвал GitJS.
  21. <cut/>
  22. # GitJS
  23. Git в новой системе используется для:
  24. * долговременного хранения данных **вне** устройства;
  25. * общения с внешним миром;
  26. * доставки приложения на устройство по HTTP.
  27. Таким образом, на текущий момент Git не используется в качестве контроля версий,
  28. лишь как широко распространённая технология хранения с доступом на чтение
  29. (HTTP) и запись. Это несколько противоречит первоначальной задумке автора,
  30. однако позволяет каждому определить условия хранения своих данных:
  31. платно/бесплатно, локально/дистанционно.
  32. Альтернативой Git могло бы стать использование FTP/rsync, но нет ни широко
  33. известных и доступных сервисов вроде SourceForge/GitHub/BitBucket/GitLab, ни
  34. реализаций для работы с FTP/rsync из браузера вроде [Isomorphic-Git][isomorphic-git].
  35. JS (вместе с HTML/CSS) используется для:
  36. * интерфейса;
  37. * логики;
  38. * долговременного хранения приложения и данных **на** устройстве.
  39. GitJS состоит из следующих трёх обязательных частей (в порядке исполнения):
  40. 1. [Страница HTML][страница-html]
  41. * вводит правила GitJS
  42. * имеет крошечный размер для работы на медленных сетях
  43. * запрашивается с веб-сервера при каждом обновлении страницы
  44. * может располагаться локально, чтобы обходиться без Интернета
  45. 1. [Правила GitJS][правила-гитжс]
  46. * представляют из себя код JS
  47. * вводят понятие модулей с их загрузкой, сохранением и исполнением
  48. * вводят понятие черёд: способа оформления кода реактивно-событийно
  49. * запрашиваются страницей HTML лишь при отсутствии или при обновлении
  50. * сохраняются страницей HTML в LocalStorage для ускорения последующих пусков
  51. 1. [Пусковой модуль][пусковой-модуль]
  52. * указывается в адресной строке после символа `?`
  53. * исполняется после загрузки правил GitJS
  54. * делает что угодно, например, вводит понятие других модулей, которые нужно загрузить перед началом работы
  55. * в примере по ссылке я проверял библиотеку JSZip
  56. Пусковой модуль может ввести абсолютно любые дополнительные правила к GitJS или
  57. же их заменить, поэтому фантазия тут ограничена лишь возможностями браузера:
  58. в частности, не удастся удалить все файлы пользователя на диске.
  59. Отдельно повторю, что наличие локальных страницы HTML и веб-сервиса Git
  60. позволяет сделать систему независимой от Интернета.
  61. # Приложение GitJS №1: редактор модулей GitJS
  62. На текущий момент редактор обладает минимальной необходимой функциональностью:
  63. **1.1. Правка текстовых файлов модуля**
  64. ![][правка-текстовых-файлов]
  65. **1.2. Публикация изменений в Git**
  66. ![][публикация-изменений]
  67. **Замечание**: пароли хранит браузер.
  68. **1.3. Правка структуры модуля**
  69. ![][правка-структуры]
  70. **1.4. Открытие ранее загруженного модуля из LocalStorage/IndexedDB**
  71. ![][открытие-модуля]
  72. **1.5. Сохранение изменений локально в LocalStorage/IndexedDB**
  73. Последняя версия редактора доступна здесь: [http://gitjs.org/📦](http://gitjs.org/📦). Первый пуск происходит не быстро, так что наберитесь терпения.
  74. # Приложение GitJS №2: пасьянс Маджонг
  75. Игра на текущий момент обладает следующей функциональностью:
  76. **2.1. Выбор и удаление фишек с поля в соответствии с правилами пасьянса Маджонг**
  77. ![][механика]
  78. **2.2. Выбор темы фишек**
  79. ![][темы]
  80. **2.3. Выбор раскладки игрового поля**
  81. ![][раскладки]
  82. **2.4. Определение победы и поражения**
  83. Последняя версия игры доступна здесь: [http://gitjs.org/🀄/1.0.14](http://gitjs.org/🀄/1.0.14).
  84. Конечной целью для игры является воспроизведение выпущенного много лет назад
  85. [Маджонга][маджонг1], который работал лишь на Linux и Windows.
  86. # Ограничения
  87. Ограничения GitJS проистекают из ограничений браузеров.
  88. **1. CORS**
  89. Для записи изменений в Git необходимо соблюсти CORS.
  90. На текущий момент крупные сервисы [не разрешают невозбранно писать в их Git][cors],
  91. поэтому приходится либо использовать прокси, либо поднимать свой Git.
  92. **2. Полноэкранный режим на мобилках**
  93. Нынче в моду вошло схлопывание элементов управления браузеров при перемотке
  94. страниц, не помещающихся в экран. В результате выходит, что якобы
  95. освобождённые области сверху и снизу всё равно нельзя трогать, т.к. это
  96. приводит к возвращению элементов управления и изменению размера области
  97. отображения.
  98. В пасьянсе Маджонг эту проблему я обошёл поддержкой портретного режима и
  99. возможностью смещать игровое поле влево/вправо. К сожалению, это усложняет
  100. игру, т.к. не видно целиком игрового поля.
  101. # Планы
  102. Упоминавшийся ранее [nCKOB][псков] в этому году станет приложением GitJS, что
  103. позволит создавать статические сайты, не покидая браузер. Посмотрим, что из
  104. этого выйдет.
  105. ЗЫ: Первым изображением является картина "Баян", написанная Виктором Васнецовым в 1910 году.
  106. [isomorphic-git]: https://isomorphic-git.org
  107. [сбор-средств]: https://habr.com/ru/post/187480
  108. [псков]: http://opengamestudio.org/ru/news/on-the-way-to-durable-applications.html
  109. [гит-бюджет]: http://opengamestudio.org/ru/news/git-budget.html
  110. [страница-html]: https://gitlab.com/gitjs/gitjs.gitlab.io/-/blob/master/index.html
  111. [правила-гитжс]: https://bitbucket.org/gitjs/0000/src/master/0000.js
  112. [пусковой-модуль]: https://git.opengamestudio.org/kornerr/nPOBEPuTb-JSZip
  113. [маджонг1]: http://opengamestudio.org/ru/game/ogs-mahjong-1.html
  114. [правка-текстовых-файлов]: ../../images/2021_gitjs-intro_правка-текстовых-файлов.png
  115. [публикация-изменений]: ../../images/2021_gitjs-intro_публикация-изменений.png
  116. [правка-структуры]: ../../images/2021_gitjs-intro_правка-структуры.png
  117. [открытие-модуля]: ../../images/2021_gitjs-intro_открытие-модуля.png
  118. [механика]: ../../images/2021_gitjs-intro_механика.png
  119. [темы]: ../../images/2021_gitjs-intro_темы.png
  120. [раскладки]: ../../images/2021_gitjs-intro_раскладки.png
  121. [снимок]: ../../images/2021_gitjs-intro_снимок.jpg
  122. [cors]: https://github.com/isomorphic-git/isomorphic-git#cors-support