1 of 30

Vue.js

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

Константин Комелин

@kkomelin

2 of 30

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

3 of 30

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

YouMightNotNeedJQuery.com

jQuery

JavaScript

$(‘.selector’)

document.querySelectorAll(‘.selector’)

$.each()

forEach()

4 of 30

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

5 of 30

Если Drupal должен выбирать JS фреймворк, я бы хотел, чтобы @vuejs был рассмотрен. Мой комментарий: drupal.org/node/2645250#comment-10736242 cc/ @Dries

Дэвид Корбачо, председатель фронтенд секции DrupalCon Dublin

6 of 30

Vue / “вью” /

7 of 30

Факты о Vue

  • Автор: Evan You @youyuxi
  • Первый публичный релиз: Февраль 2014
  • Последний стабильный релиз: v1.0.26
  • Пользователи: Alibaba, Baidu & Tencent, Xiaomi и другие
  • В ядре: Laravel и PageKit

​

8 of 30

Основы Vue

9 of 30

Компоненты

10 of 30

Компоненты

11 of 30

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

​

Модель - это обычный JavaScript объект.

Измени модель - изменится и представление.

​

​

​

12 of 30

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

13 of 30

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

14 of 30

Обычный сайт

15 of 30

Подключение библиотеки в Drupal 8

16 of 30

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

17 of 30

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

18 of 30

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

19 of 30

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

20 of 30

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

21 of 30

github.com/kkomelin/vue_drupal_demo

22 of 30

Экосистема

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

​

23 of 30

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

  • Не нужен jQuery
  • Легко стартануть
  • Разделение логики и представления
  • Не нужен TypeScript и JSX
  • Совместимость между версиями
  • Отличная документация
  • Достойная поддержка
  • Нормальная лицензия

​

24 of 30

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

25 of 30

Текущий статус изучения React: перегружен. Изучаю @vuejs, так как он выглядит простым и у него симпатичный сайт.

Тейлор Отуелл, создатель Laravel

26 of 30

The State Of JavaScript 2016

27 of 30

The State Of JavaScript 2016

28 of 30

Я особенно рад за @vuejs, создатели которого ставили своим приоритетом сделать пользователей счастливыми и при этом никогда не занижали заслуги других. Это окупилось.

Дэн Абрамов, команда React.js

29 of 30

Куда движется

веб-разработка,

и что нам с этим делать?

React?

Angular?

Ember?

Backbone?

Polymer?

Aurelia?

Vue?

30 of 30

@kkomelin

Золотой спонсор:

При поддержке:

Серебряные спонсоры:

Благодарю за внимание!

КРАСНОДАР

2016