Речь пойдет о набирающем обороты фронтенд фреймворке Vue.js, который вошел в ядро Laravel и PageKit, и по популярности начинает догонять React и Angular. Тезисы: Куда движется веб разработка Почему именно Vue.js Краткое введение в Vue.js Vue.js как альтернатива jQuery Как интегрировать Vue.js и Drupal О докладчике: Константин Комелин - Drupal разработчик с 9-ти летним стажем, соорганизатор Drupal сообщества в Санкт-Петербурге, автор и контрибьютор нескольких проектов на Drupal.org. ------------------------------------------------------------------------------------------------------------------------------ [[ О КОНФЕРЕНЦИИ ]] DrupalCamp Краснодар 2016 Время: 9-11 сентября 2016 г. Место: Кубанский государственный университет. Россия, г. Краснодар, ул. Ставропольская, д. 149 Сайт конференции: http://2016.drupalyug.ru Сайт Южного Drupal-сообщества: http://drupalyug.ru ------------------------------------------------------------------------------------------------------------------------------ [[ ОРГАНИЗАТОРЫ ]] * Кубанский государственный университет - https://www.kubsu.ru * Агентство "SelfinPro" - http://selfin.pro * Компания "ИнитЛаб" - https://initlab.ru * и Команда поддержки - http://2016.drupalyug.ru/community/organizers ------------------------------------------------------------------------------------------------------------------------------ [[ СПОНСОРЫ ]] __Золотой спонсор__ *** PAYANYWAY *** Прием оплаты на сайте, интернет-эквайринг Сайт: https://www.payanyway.ru __Серебряные спонсоры__ * ГРУППА КОМПАНИЙ I20 - http://i20.biz * EGEEK’S CONTENT - https://www.egeeks.co __Бронзовые спонсоры__ * Z-Wolves Development * Vakorin * ООО "РаДон" * Компания Портал-Юг * Веб-студия Voodoo * Toptal Подробнее о спонсорах на сайте http://2016.drupalyug.ru/sponsors

1. Vue.js
Реактивный фронтенд фреймворк для людей
Константин Комелин
@kkomelin

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

3. Возможно, вам не нужна jQuery
YouMightNotNeedJQuery.com
jQuery JavaScript
$(‘.selector’) document.querySelectorAll(‘.selector’)
$.each() forEach()

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

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

6. Vue / “вью” /

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

8. Основы Vue

9. Компоненты

10. Компоненты

11. Модель - это обычный JavaScript объект.
Измени модель - изменится и представление.
Реактивность

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

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

14. Обычный сайт

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

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

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

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

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

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

21. github.com/kkomelin/vue_drupal_demo

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

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

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

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

26. The State Of JavaScript 2016

27. The State Of JavaScript 2016

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

29. Куда движется
веб-разработка,
и что нам с этим
делать? React?
Angular?
Ember?
Backbone?
Polymer?
Aurelia?
Vue?

30. @kkomelin
Золотой спонсор:При поддержке: Серебряные спонсоры:
Благодарю за внимание!
КРАСНОДАР
2016