Реактивний фронтенд фреймворк для людей - Konstantin Komelin

Йтиметься про фронтенд фреймворку Vue.js, що набирає обертів, який увійшов у ядро Laravel і PageKit, і за популярністю починає наздоганяти React і Angular.

До чого тут jQuery?

Почну з історії. Колись давно, я як і зараз у вільний час, вечорами та у вихідні вивчав нові технології. На той час я працював з Drupal 4.7.

Трохи згодом читаю в анонсі Drupal 5, що в ядро увійшла jQuery. Зрадів, аж стрибав від щастя як дитина, тепер не треба самому завантажувати та встановлювати. Гарна річ ця jQuery, добрі спогади залишилися. Досі де-не-де юзаю, в основному, коли потрібно заюзати якийсь плагін слайдера або каруселі. Дуже багато плагінів для неї відмінних наробили за довгий час її існування.

Але час не стоїть на місці, технології розвиваються, разом з ними та браузери включають підтримку нових фіч JS.

Можливо, вам не потрібна jQuery

Для прикладу, парочка найпопулярніших фіч jQuery, яким сьогодні можна знайти сучасну нативну заміну:

На сайті YouMightNotNeedjQuery.com ви знайдете величезну кількість таких замін із зазначенням підтримки проблемними браузерами.

Ви запитаєте, як зручні обробники подій типу $(‘#selector’).click() і $(document).ready() чи можливість надіслати Ajax запит через $.ajax() ? Насправді, це нескладно зробити нативним чином, але Vue це реалізовано навіть зручніше. Про це трохи згодом.

Тому що я прийшов до Vue

З фронтендом фреймворками почав знайомитися приблизно рік тому, коли готувався до Естонського кемпу. Для доповіді ми зробили невеликий Angular 1 додаток. Не можу сказати, що мені з ним сподобалося працювати, але можна було працювати.

Як ви вже напевно знаєте, у ядро Drupal 8 увійшовBackbone.js, але чомусь мене зовсім не тягнуло. Мабуть не тільки мене, тому незабаром порушилося питання про заміну Backbone на популярніший JS фреймворк. Девід Корбачо запропонував розглянути Vue.js:

З того часу я почав стежити за розвитком Vue.js і потроху експериментувати з ним.

Vue вимовляється як усім нам знайоме “view” (“в'ю”).

Vue особливо популярний у Китаї, оскільки Еван дуже активний у китайському JS співтоваристві. Можливо, саме через це Vue дуже поширений серед китайських компаній, наприклад, таких як Alibaba, Baidu & Tencent, Xiaomi та інших.

Зараз Vue використовується вже по всьому світу, наприклад, цей фреймворк увійшов до Laravel і PageKit, а це означає, що незабаром ми побачимо значне зростання числа користувачів Vue.

Цікавий факт у тому, що на відміну від Angular та React, які розробляються такими гігантами як Google та Facebook, Vue розробляється спільнотою поза компаніями. Автор із недавнього часу працює над фреймворком повний день за рахунок матеріальної підтримки спільноти.

Як у бібліотеки, у Vue гарне покриття коду тестами, документація та підтримка.

Компоненти

Vue побудований навколо компонент концепції. Компоненти – це невеликі частини UI, які можна повторно використати. Якщо ви знайомі з Web Components, знайдете багато спільного з ними в компонентному підході Vue.

По суті, програма розбивається на частини або компоненти.

Компоненти утворюють деревоподібну ієрархію. Тобто один компонент може включати кілька інших.

У коді така структура могла б виглядати так:

Реактивність

Всі змінні (модель) у Vue реактивні. Це означає, що при зміні змінної (моделі),подання автоматично реагує та змінюється.

Докладніше реактивність розписана в документації.

Типи додатків

Давайте тепер подивимося як інтегрувати Vue та вашу програму. Тут все залежить від архітектури вашої програми. Я умовно поділю додатки на два типи:

Розподілене додаток, коли фронтенд відокремлений від бекенда, а вся взаємодія між ними йде через API, наприклад RESTful API.
Звичайний сайт, коли сторінки формуються на сервері та віддаються браузеру у готовому вигляді.

Vue у розподіленому додатку

Я не докладно зупинятимуся на розподілених додатках. Краще розповім про те, як використовувати Vue на звичайному Drupal 8 сайті, тому що це найпростіший спосіб почати працювати з Vue.

Vue на звичайному сайті

Щоб почати працювати з Vue, достатньо встановити лібу на сайт через тег SCRIPT.

Підключаються бібліотеки так: 1. Кладемо файли бібліотеки в /libraries/[name] 2. Прописуємо шляхи до неї через *.libraries.yml вашого модуля чи теми

3. Додаємо бібліотеки до масиву libraries вашого *.info.yml

4. Потім підключаємо там, де потрібно, наприклад, через hook_page_attachments().

Для демонстрації я створив модуль vue_drupal_demo, який підключає vue.js і vue-resource.js, додає два блоки для прикладів з відповідним JS кодом для них. Крім того, модуль містить конфіг для завірюхи, яка у відповідь на GET запит до /users повертає список користувачів у форматі JSON.

Розглянемо приклади.

Приклад 1: Кількість символів

Перший приклад дозволяє підрахувати кількість символів у фразі. Ви вводите текст у поле введення, а поряд відображається лічильниккількість символів.

Приклад 2: Список користувачів через AJAX

Другий приклад цікавіший, оскільки посилає Ajax запит на отримання списку користувачів та відображає його. Крім того, у прикладі реалізована кнопка "reverse", яка змінює порядок користувачів у списку на зворотний.

Нагадую, ці приклади є у модулі vue_drupal_demo для Drupal 8 на Github. Для наочності модуль підтримує відразу два методи додавання на сторінку розмітки, необхідної для прикладів:

користувач сам створює блоки через адмінку або
використовує програмно створені блоки.

Обидва підходи можна використовувати у своїх додатках.

Змінні Vue у шаблонах Twig

Окремо потрібно зупинитися на тому, як використовувати змінні Vue у шаблонах Twig, адже Twig вже обробляє фігурні дужки > по своєму.

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

Екосистема

Vue має гарну екосистему, що складається з плагінів, сторонніх компонентів та допоміжних інструментів.

Потрібен рутинг із гарними шляхами? Vue-router на допомогу.
Ajax запити? Vue-resource для ваших послуг.
Управління станом програми? Vuex тут як тут.
Дебажіть у браузері? Vue-devtools прийде на допомогу.
Хочете скафолдити програми? Vue-cli чекає на консолі.
Webpack чи Browserify? Є обидва вибір за вами.

Не лякайтеся тільки, якщо в документації стороннього розширення або їжу на Github зустрінете ієрогліфи. Просто китайська спільнота Vue є дуже активною.

Чому саме Vue?

Не потрібний jQuery На відміну від Ember, Vue не залежить від jQuery. Не потрібно тягнути важку лібу тільки для того,зручно шукати елементи за DOMом.

Поділ логіки та уявлення У React шаблони знаходяться прямо всередині JS і навіть лапками не виділяються. Цей вінегрет із XML та JS називається JSX, і мені такий підхід здається незручним. Але на смак і колір фломастери різні.

Відмінна документація Самі подивіться, є опис API, гайди, приклади.

Гідна підтримка Я створив їжу для Webpack шаблону, Еван відповів того ж дня.

Нормальна ліцензія Vue під MIT, а значить дозволяє його використовувати де завгодно і як завгодно. Чого не скажеш про React, що Facebook захистив патентом. Пишете соцмережу на React - знайдіть адвоката.

Якщо хочеться копнути глибше, то в документації Vue є детальне порівняння з іншими фреймворками.

Що думають розробники про Vue?

Почну з твіту творця Laravel Тейлора Отуелла:

З графіків ми бачимо, що найбажаніші фреймворки – це React та Vue.

Після ознайомлення з опитуванням Ден Абрамов із команди React.js написав про Vue наступне:

Якщо пошукати, то можна знайти набагато більше позитивних відгуків про Vue. Наприклад, є компанія, яка стрибнула на Vue з Angular.

Куди рухається веб-розробка і що нам з цим робити?

Насамкінець я хочу поговорити про те, куди рухається веб, і що нам з цим робити.

У той же час фронтенд ще не подорослішав. Часто випускаються нові версії фреймворків, різко змінюються API, з'являються нові інструменти для збирання проектів тощо.

Серед цієї невизначеності та нестабільності нам Drupal-розробникам потрібно постаратися не втратити своєї актуальності на ринку та будувати програми, які мають попит. На мій погляд, Vue.jsпідходящий інструмент для цього, тому що він досить простий для початківців і має все для побудови серйозних фронтенд додатків. Хто знає, можливо, саме цей фреймворк замінить нам jQuery або навіть увійде в одну з наступних версій Drupal.

Цей матеріал був представлений на конференції DrupalCamp Krasnodar 2016. З презентацією можна ознайомитись на Google Slides або SlideShare.