Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. Title: How I create browser applications inside browsers
  2. Date: 2021-01-28 00:00
  3. Category: News
  4. Slug: gitjs-intro
  5. Lang: en
  6. ![GitJS][снимок]
  7. In this article Michael shares his experience of creating durable applications.
  8. In 2013 Canonical [tried to crowdfund Ubuntu Edge smartphone][сбор-средств].
  9. Its main feature could be the ability to use the smartphone as a full-fledged
  10. PС. Unfortunatly, the crowdfunding campaign did not accumulate enough money,
  11. so a dream of having a universal device remained to be the dream.
  12. I've been searching for universality, too, on the software side,
  13. not the hardware one. Today I can confidently say I found the necessary
  14. combination: Git and JavaScript.
  15. As you know, I have already described the benefits of browser applications
  16. ([nCKOB][псков] static site generator) and the benefits of using Git
  17. instead of yet another back-end with API ([GitBudget][гит-бюджет] to track
  18. personal spendings). Once GitBudget was out, I spent the remaining 2020
  19. to build a system allowing one to create browser applications right inside
  20. browsers. GitJS is the name of that system.
  21. <cut/>
  22. # GitJS
  23. The system uses Git for:
  24. * long-term data storage **outside** of device;
  25. * talking to the outside world;
  26. * delivering the application to a device over HTTP.
  27. Thus, Git is not used for version control, Git is merely a
  28. widespread technology to keep data with read (HTTP) and write permissions. This
  29. might be somewhat counterintuitive. However, this allows everyone to decide
  30. where and how to keep data: paid/free, locally/remotely.
  31. You might argue that FTP/rsync could be used instead of Git if we only
  32. need to keep data. However, there are no widespread services like
  33. SourceForge/GitHub/BitBucket/GitLab for FTP/rsync. Also, there are no
  34. implementations of FTP/rsync that work inside browsers, and Git has
  35. [Isomorphic-Git][isomorphic-git].
  36. JS (alongside HTML/CSS) is used for:
  37. * user interface;
  38. * logic;
  39. * long-term data storage **on** device.
  40. GitJS consists of the following three mandatory parts (in the order of execution):
  41. 1. [HTML page][страница-html]
  42. * introduces GitJS rules
  43. * has a tiny size to work for slow connections
  44. * is requested/delivered each time the page is completely refreshed
  45. * may be hosted locally to work without the Internet
  46. 1. [GitJS rules][правила-гитжс]
  47. * are essentially a chunk of JS code
  48. * introduce the concept of modules and their loading, saving, execution
  49. * introduce the concept of sequences: a way to structure source code in a reactive-event-based manner
  50. * are requested/delivered by HTML page only if they are absent or need an update
  51. * are saved by HTML page into LocalStorage to start faster next time
  52. 1. [Startup module][пусковой-модуль]
  53. * is located in the address string after `?` symbol
  54. * is executed after the loading of GitJS rules
  55. * does whatever is necessary, e.g., introduces dependent modules to be loaded before the main application should start
  56. * the linked example depicts JSZip library test
  57. Startup module may introduce absolutely any additional rules to GitJS ones or
  58. even replace them, so your fantasy here is only limited by what browsers
  59. permit: e.g., you can't erase all hard drive files of a user.
  60. I'd like to stress that having an HTML page and Git web service locally
  61. lets you use GitJS without the Internet.
  62. # GitJS application №1: editor of GitJS modules
  63. Currently, the editor has very basic functionality:
  64. **1.1. Editing of module's text files**
  65. ![][правка-текстовых-файлов]
  66. **1.2. Publishing changes to Git**
  67. ![][публикация-изменений]
  68. **Note**: browsers keep passwords.
  69. **1.3. Editing the structure of a module**
  70. ![][правка-структуры]
  71. **1.4. Opening previously loaded modules from LocalStorage/IndexedDB**
  72. ![][открытие-модуля]
  73. **1.5. Saving changes locally into LocalStorage/IndexedDB**
  74. Here's the editor's last version: [http://gitjs.org/📦](http://gitjs.org/📦).
  75. The first run takes some time, be patient.
  76. # GitJS application №2: Mahjong solitaire
  77. Currently, the game has the following functionality:
  78. **2.1. Selection and removal of tiles off the field according to Mahjong solitaire rules**
  79. ![][механика]
  80. **2.2. Tile theme selection**
  81. ![][темы]
  82. **2.3. Field layout selection**
  83. ![][раскладки]
  84. **2.4. Victory/loss detection**
  85. Here's the game's last version: [http://gitjs.org/🀄/1.0.14](http://gitjs.org/🀄/1.0.14).
  86. In the end, this game will match the original [Mahjong][маджонг1] (released several
  87. years ago) in terms of features.
  88. # Limitations
  89. GitJS limitations stem from browser ones.
  90. **1. CORS**
  91. To be able to publish changes to Git, we have to meet CORS restrictions.
  92. Currently, major services [do not allow to publish Git changes easily][cors],
  93. so one would have to use either a proxy, or a personal Git service.
  94. **2. Full-screen surfing on mobile**
  95. Nowadays, browsers collapse navigation and other controls when you scroll a
  96. page that doesn't fit into available space. This leaves the space at the top
  97. and the bottom of the screen free of controls but still unusable for touches
  98. because these touches bring those controls back. Such behaviour is very
  99. inconvenient for games.
  100. Mahjong solitaire works around that problem by supporting portrait mode: you
  101. can shift the field left/right. However, such a solution has its own drawbacks:
  102. one cannot see the field at a single glance, which makes the game harder to play.
  103. # Plans
  104. [nCKOB][псков] mentioned earlier will be rewritten as GitJS application. This
  105. would allow anyone to create statically generated sites without leaving a
  106. browser. We'll see how this goes.
  107. PS: The first image is "Bayan" picture created by Viktor Vasnetsov in 1910.
  108. [isomorphic-git]: https://isomorphic-git.org
  109. [сбор-средств]: https://techcrunch.com/2013/08/22/edge-crowdfunding-fail
  110. [псков]: http://opengamestudio.org/en/news/on-the-way-to-durable-applications.html
  111. [гит-бюджет]: http://opengamestudio.org/en/news/git-budget.html
  112. [страница-html]: https://gitlab.com/gitjs/gitjs.gitlab.io/-/blob/master/index.html
  113. [правила-гитжс]: https://bitbucket.org/gitjs/0000/src/master/0000.js
  114. [пусковой-модуль]: https://git.opengamestudio.org/kornerr/nPOBEPuTb-JSZip
  115. [маджонг1]: http://opengamestudio.org/en/game/ogs-mahjong-1.html
  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_темы.png
  122. [раскладки]: ../../images/2021_gitjs-intro_раскладки.png
  123. [снимок]: ../../images/2021_gitjs-intro_снимок.jpg
  124. [cors]: https://github.com/isomorphic-git/isomorphic-git#cors-support