Работа на Drupal и PHP - HookAny.com

Vue.js - реактивный фронтенд фреймворк для людей

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

Vue

Причем здесь jQuery?

Начну с истории. Когда-то давно, я как и сейчас в свободное время, вечерами и по выходным изучал новые технологии. В то время я работал с Drupal 4.7.

Где-то в новостях подсмотрел, или кто-то показал, уже и не припомню, библиотеку jQuery. Не любил я тогда JavaScript, да и как его было любить. Так вот как попробовал jQuery, так увидел свет в конце тоннеля, начал юзать ее на всех проектах практически.

Чуть позже читаю в анонсе Drupal 5, что в ядро вошла jQuery. Обрадовался, аж прыгал от счастья как ребенок, теперь не надо самому скачивать и устанавливать. Хорошая вещь эта jQuery, добрые воспоминания остались. До сих пор кое-где юзаю, в основном, когда нужно заюзать какой-нибудь плагин слайдера или карусели. Уж очень много плагинов для нее отличных наделали за долгое время ее существования.

Но время не стоит на месте, технологии развиваются, вместе с ними и браузеры включают поддержку новых фич JS.

Возможно, вам не нужна jQuery

Кто-нибудь видел последние спецификации языка JavaScript? Так посмотрите! Язык становится очень даже юзабильным и скоро эти спецификации будут поддерживать все браузеры.

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

jQuery JavaScript
$(‘.selector’) document.querySelectorAll(‘.selector’)
$.each() forEach()

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

Вы спросите, а как же удобные обработчики событий типа $(‘#selector’).click() и $(document).ready() или возможность послать Ajax запрос через $.ajax() ? На самом деле, это несложно сделать нативным образом, но в Vue это реализовано даже удобнее. Об этом чуть позже.

Как я пришел к Vue

С фронтенд фреймворками начал знакомиться примерно год назад, когда готовился к Эстонскому кемпу. Для доклада мы сделали небольшое Angular 1 приложение. Не могу сказать, что мне с ним понравилось работать, но работать было можно.

Как вы уже наверное знаете, в ядро Drupal 8 вошел Backbone.js, но почему-то к нему меня совсем не тянуло. Видимо не только меня, поэтому вскоре поднялся вопрос о замене Backbone на более популярный JS фреймворк. Дэвид Корбачо предложил рассмотреть Vue.js:

David Corbacho's Tweet on Vue.js in Drupal core

 

С тех пор я стал следить за развитием Vue.js и понемногу экспериментировать с ним.

О Vue

Vue произносится как всем нам знакомое “view” (“вью”).

Эван Ю (Evan You), бывший сотрудник Google, начал разработку Vue еще в 2013 году. А уже в феврале 2014 вышел первый публичный релиз.

Vue особенно популярен в Китае, так как Эван весьма активен в китайском JS сообществе. Возможно как раз из-за этого Vue очень распространен среди китайских компаний, например, таких как Alibaba, Baidu & Tencent, Xiaomi и других.

Сейчас Vue используется уже по всему миру, например этот фреймворк вошел в Laravel и PageKit, а это значит, что в скором времени мы увидим значительный рост числа пользователей Vue.

Интересный факт в том, что в отличии от Angular и React, которые разрабатываются такими гигантами как Google и Facebook, Vue разрабатывается сообществом вне компаний. Автор с недавнего времени работает над фреймворком полный день за счет материальной поддержки сообщества.

Как у библиотеки, у Vue хорошее покрытие кода тестами, документация и поддержка.

Компоненты

Vue построен вокруг концепции компонент. Компоненты - это небольшие части UI, которые можно повторно использовать. Если вы знакомы с Web Components, то найдете много общего с ними в компонентном подходе Vue.

По сути, приложение разбивается на части или компоненты.

Vue компоненты на сайте

Компоненты образуют древовидную иерархию. То есть, один компонент может включать несколько других.

Дерево Vue компонентов

В коде такая структура могла бы выглядеть следующим образом:

<div id="app">
    <app-header>
        <app-logo></app-logo>
        <app-name></app-name>
    </app-header>
    <app-content>
        <app-article></app-article>
        <app-article></app-article>
    </app-content>
</div>

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

Все переменные (модель) в Vue реактивны. Это значит, что при изменении переменной (модели), представление автоматически реагирует и изменяется.

Vue реактивность

Подробнее реактивность расписана в документации.

Типы приложений

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

  1. Распределенное приложение, когда фронтенд отделен от бэкенда, а все взаимодействие между ними идет через API, например RESTful API.
  2. Обычный сайт, когда страницы формируются на сервере и отдаются браузеру в готовом виде.

Vue в распределенном приложении

Распределенное приложение с Vue

Если вы собираетесь отделить фронтенд от бэкенда, то вам лучше строить приложение на базе шаблона Webpack. С ним вы прочувствуете всю мощь современных фронтенд тулзовин, например сможете писать код на новой версии языка JavaScript es2015, минифицировать JS или компилировать SCSS в CSS на этапе сборки приложения. При этом ваша фронтенд часть будет представлять из себя иерархию Vue компонент, а бэкенд - RESTful Web Services из ядра Drupal 8.

Я не буду подробно останавливаться на распределенных приложениях. Лучше расскажу о том, как использовать Vue на обычном Drupal 8 сайте, так как это самый простой способ начать работать с Vue.

Vue на обычном сайте

Для того, чтобы начать работать с Vue, достаточно установить либу на сайт через тег SCRIPT.

В Drupal 8 все CSS и JS теперь относятся к libraries (библиотекам).

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

vue:
  remote: https://vuejs.org
  license:
    name: MIT
    gpl-compatible: true
  js:
    /libraries/vue/vue.min.js: { weight: -1, minified: true }

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

libraries:
  - vue_drupal_demo/vue

4. Затем подключаем там, где нужно, например через hook_page_attachments().

/**
 * Implements hook_page_attachments().
 */
function vue_drupal_demo_page_attachments(array &$page) {
  $page['#attached']['library'][] = 'vue_drupal_demo/vue';
}

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

Итак, рассмотрим примеры.

Пример 1: Количество символов

Первый пример позволяет подсчитать количество символов во фразе. Вы вводите текст в поле ввода, а рядом отображается счетчик количества символов.

Vue пример 1

<div id="demo1">
  <input
     placeholder="Enter a phrase..."
     type="text"
     v-model="phrase" /> {{length}}
</div>
<script>
  new Vue({
    el: '#demo1',
    data: {
      phrase: ''
    },
    computed: {
      length: function () {
        return this.phrase.length;
      }
    }
  });
</script>

Пример 2: Список пользователей через AJAX

Второй пример интереснее, так как посылает Ajax запрос на получение списка пользователей и отображает его. Кроме того, в примере реализована кнопка “reverse”, которая меняет порядок пользователей в списке на обратный.

Vue пример 2

<div id="demo2">
  <ul>
    <li v-for="user in users">{{{ user.name }}}</li>
  </ul>
  <button v-on:click="reverse">reverse</button>
</div>
<script>
new Vue({
    el: '#demo2',
    data: {
      users: []
    },
    ready: function() {
      // GET /users
      this.$http.get('/users').then(
        function (response) { // Success.
          this.users = response.data;
        },
        function (response) { // Error.
          console.log('An error occurred.');
        }
      );
    },
    methods: {
      reverse: function () {
        this.users.reverse();
      }
    }
  });
</script>

Напоминаю, эти примеры есть в модуле vue_drupal_demo для Drupal 8 на Github.
Для наглядности модуль поддерживает сразу два метода добавления на страницу разметки, нужной для примеров:

  1. пользователь сам создает блоки через админку или
  2. использует программно созданные блоки.

Оба подхода можно использовать в своих приложениях.

Переменные Vue в шаблонах Twig

Отдельно нужно остановиться на том, как использовать переменные Vue в шаблонах Twig, ведь Twig уже обрабатывает фигурные скобки {{}} по-своему.

Варианта два:

{{ '{{' }} message {{ '}}' }}

{% raw %}
    {{ message }}
{% endraw %}

Мне больше нравится второй вариант, так как лучше читается.

Экосистема

Vue имеет хорошую экосистему, состоящую из плагинов, сторонних компонентов и вспомогательных инструментов.

  • Нужен рутинг с красивыми путями? Vue-router в помощь.
  • Ajax запросы? Vue-resource к вашим услугам.
  • Управление состоянием приложения? Vuex тут как тут.
  • Дебажите в браузере? Vue-devtools придет на помощь.
  • Хотите скафолдить приложения? Vue-cli ждет в консоли.
  • Webpack или Browserify? Есть оба, выбор за вами.

На Github даже есть хранилище полезностей для Vue.

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

Почему именно Vue?

Не нужен jQuery
В отличие от Ember, Vue не зависит от jQuery. Не нужно тянуть тяжелую либу только для того, удобно искать элементы по DOMу.

Легко стартануть
Сложность выбора и избыток инструментов вызывает такую проблему как, JavaScript Fatigue или по-русски “Усталость от JavaScript”. У разработчиков от этого опускаются руки и начинается депрессия.

Если хотите просто написать парочку реактивных компонентов для сайта, то все что вам нужно - это vue.min.js, подключенный через тег SCRIPT.

Разделение логики и представления
В React шаблоны находятся прямо внутри JS и даже кавычками не выделяются. Этот винегрет из XML и JS называется JSX, и мне такой подход кажется неудобным. Но на вкус и цвет фломастеры разные.

Не нужен TypeScript и JSX
В Angular 2 - TypeScript. В React - JSX.
Если не хотите вникать в новый язык поверх JavaScript, то Vue для вас.

Совместимость между версиями
По словам автора фреймворка, они не ломали API между подверсиями 1.0.x (>20 версий). Не смотря на то, что сейчас ведется разработка Vue 2, сейчас автор решает по поводу LTS для первой версии.

Отличная документация
Сами посмотрите, есть описание API, гайды, примеры.

Достойная поддержка
Я создал ишью для Webpack шаблона, Эван ответил в тот же день.

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

Если хочется копнуть глубже, то в документации к Vue есть детальное сравнение с другими фреймворками.

Что думают разработчики о Vue?

Начну с твита создателя Laravel Тейлора Отуелла:
Taylor Otwell about Vue

 

Опрос The State Of JavaScript 2016 прошло более 3000 разработчиков, и вот несколько интересных результатов:

Percent of people who want to learn VuePercent of people who would use again

Из графиков мы видим, что самые желанные фреймворки - это React и Vue.

После ознакомления с опросом Дэн Абрамов из команды React.js написал про Vue следующее:
Dan Abramov about Vue

 

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

Куда движется веб-разработка, и что нам с этим делать?

Куда движется веб-разработка

В заключение я хочу поговорить о том, куда движется веб, и что нам с этим делать.

Вы наверное заметили, что Node.js со своей экосистемой перевернул веб с ног на голову. Он буквально подарил JavaScript новую жизнь, теперь на сервере. Некоторые фронтендеры, освоив “ноду”, стали фулстек разработчиками. В фулстек также подалось много бэкенд разработчиков, которые успели подтянуть свои знания в JavaScript и фронтенде.

В то же время, фронтенд еще не повзрослел. Часто выпускаются новые версии фреймворков, резко меняются API, появляются новые инструменты для сборки проектов и т.д.

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

Этот материал был представлен на конференции DrupalCamp Krasnodar 2016. С презентацией можно ознакомиться на Google Slides или SlideShare.