1. Вступ до мови ECMASCRIPT 6

PDF з цієї статті доступний за посиланням |TYT|.

Приклади з цієї статті доступні за посиланням |TYT|.

Цей документ є частиною серії з чотирьох статей:

[Вступ до мови PHP7 на прикладах (2019)];

[Вступ до мови ECMASCRIPT6 на прикладах (2019)]. Це саме цей документ;
[Вступ до фреймворку VUE.JS на прикладі (2019)];
[Вступ до фреймворку NUXT.JS на прикладах (2019)];

Усі ці документи призначені для початківців. Статті мають логічний зв’язок, але слабко пов’язані між собою:

документ [1] присвячений мові PHP 7. Читач, якого цікавить лише мова PHP, а не мова JavaScript, про яку йдеться в наступних статтях, може зупинитися на цьому;
документи [2-4] присвячені створенню клієнта JavaScript для сервера розрахунку податків, розробленого в документі [1];
фреймворки JavaScript [vue.js] та [nuxt.js], описані у статтях 3 та 4, вимагають знання JavaScript останніх версій ECMASCRIPT, а саме версії 6. Отже, документ [2] призначений для тих, хто не знайомий із цією версією JavaScript. Він посилається на сервер розрахунку податку, створений у документі [1]. Тому читачам документа [2] іноді доведеться звертатися до документа [1];
опанувавши ECMASCRIPT 6, можна перейти до фреймворку VUE.JS, який дозволяє створювати клієнтські програми на JavaScript, що виконуються в браузері в режимі SPA (Single Page Application). Це документ [3]. Він посилається як на сервер розрахунку податку, створений у документі [1], так і на код автономного клієнта на JavaScript, створений у [2]. Тому читачеві документа [3] іноді доведеться звертатися до документів [1] та [2];
опанувавши VUE.JS, можна перейти до фреймворку NUXT.JS, який дозволяє створювати клієнти JavaScript, що виконуються в браузері в режимі SSR (Server Side Rendered). Він посилається як на сервер розрахунку податку, описаний у документі [1], і на код автономного клієнта JavaScript, створеного в [2], а також на додаток [vue.js], розроблений у документі [3]. Тому читачеві документа [4] іноді доведеться звертатися до документів [1], [2] та [3];

Останню версію сервера розрахунку податку, розроблену в документі [1], можна вдосконалити різними способами:

написана версія орієнтована на сервер. Наразі (липень 2019 року) спостерігається тенденція до переходу на архітектуру «клієнт/сервер»:
- сервер працює у вигляді служби jSON;
- статична або динамічна сторінка є точкою входу у веб-додаток. Ця сторінка містить HTML /CSS, а також Javascript;
- інші сторінки веб-додатку генеруються динамічно за допомогою JavaScript:
  - сторінка HTML може бути сформована шляхом об’єднання статичних фрагментів, наданих тим самим сервером, що й головна сторінка, або повністю побудована за допомогою JavaScript;
  - ці різні сторінки відображають дані, які запитуються у сервісі jSON;

Таким чином робота розподіляється між клієнтом і сервером. Сервер, навантаження на який зменшується, може обслуговувати більшу кількість користувачів.

Архітектура, що відповідає цій моделі, є такою:

JS: JavaScript

Код JavaScript виконується на стороні клієнта:

сервісу, що обробляє статичні або динамічні сторінки чи фрагменти;
сервісу jSON;

Отже, код JavaScript є клієнтом jSON і, як такий, може бути організований у шари [UI, métier, dao] (UI: користувацький інтерфейс), так само як і наші клієнти jSON, написані на PHP. У підсумку браузер завантажує лише одну сторінку — головну. Усі інші отримуються та будуються за допомогою JavaScript. Цей тип додатків називають SPA: Single Page Application або APU: односторінковий додаток.

Цей тип додатків також належить до так званих AJAX: Asynchronous JavaScript And XML

Asynchronous: оскільки виклики клієнтського JavaScript до сервера jSON є асинхронними;
XML: оскільки XML була технологією, що використовувалася до появи jSON. Однак акронім AJAX було збережено;

Ми розглянемо таку архітектуру в наступних розділах. На стороні клієнта ми використовуватимемо фреймворк JavaScript [Vue.js] [https://vuejs.org/] для написання клієнтського коду JavaScript для сервера jSON PHP, який ми описали в документі [1].

[Vue.js] — це фреймворк JavaScript. Щоб його зрозуміти, потрібно добре володіти цією мовою. У цьому документі ми представляємо стандарт ECMAScript 6, який є найновішим (станом на 2019 рік) стандартом цієї мови. Історію та роль ECMAScript можна знайти на Вікіпедії [https://fr.wikipedia.org/wiki/ECMAScript].

Цей документ містить перелік консольних скриптів на JavaScript у різних сферах (структури мови, доступ до баз даних, до Інтернету, багаторівневе програмування, програмування за допомогою інтерфейсів). Документ завершується двома додатками:

Консольний додаток, який буде клієнтом сервера розрахунку податків, створеного в документі [1]. Цей клієнт матиме ту саму архітектуру, що й консольний клієнт PHP, створений у документі [1]:

шари [7-9] відповідатимуть шарам клієнта JavaScript, що виконується в консолі;
шари [1-4] відповідають шарам сервера PHP 7, створеного в документі [1];
на відміну від клієнтської консолі PHP, вбудованої в документ [1], взаємодії з локальною файловою системою [6] не відбуватиметься;

Перед нами клієнтсько-серверний додаток, де клієнт — це консольний додаток. Буде написано другий додаток, у якому код рівнів [7-9] буде перенесено в браузер. Тоді ми будемо готові розглянути фреймворки JavaScript для браузерів у документах [3] та [4].

Скрипти в цьому документі містять коментарі, а результати їх виконання в консолі наведено. Іноді надаються додаткові пояснення. Документ вимагає активного читання: щоб зрозуміти скрипт, потрібно одночасно читати його код, коментарі та результати виконання.

Серверний додаток PHP 7 можна протестувати |тут|.

Serge Tahé, жовтень 2019 р.