1. Вступ до фреймворку VUE.JS

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] (див. документ |https://tahe.developpez.com/tutoriels-cours/php7|), можна вдосконалити різними способами:

версія, описана в документі, орієнтована на сервер. Наразі (вересень 2019 року) спостерігається тенденція до використання архітектури «клієнт-сервер»:

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

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

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

JS : JavaScript

Браузер є клієнтом:

сервісу, що надає статичні або динамічні сторінки чи фрагменти (не показано вище);
сервісу даних jSON;

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

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

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

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

[Vue.js] — це фреймворк JavaScript. Ми ознайомили вас із мовою JavaScript у документі [2]. Ми не будемо проводити вичерпний аналіз фреймворку [vue.js]. Ми обмежимося лише викладенням концепцій, які згодом будуть використані при написанні клієнта [Vue.js] для версії jSON 14-ї версії сервера розрахунку податків (див. |Вступ до мови PHP7 на прикладах (2019)|).

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

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