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

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

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

YouMightNotNeedJQuery.com

jQuery JavaScript

$(‘.selector’) document.querySelectorAll(‘.selector’)

$.each() forEach()

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

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

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

Если Drupal должен выбирать JS фреймворк, я бы хотел, чтобы @vuejs был рассмотрен. Мой комментарий:

drupal.org/node/2645250#comment-10736242 cc/ @DriesДэвид Корбачо, председатель фронтенд секции DrupalCon Dublin

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

Vue / “вью” /

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

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

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

Основы Vue

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

Компоненты

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

Компоненты

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

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

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

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

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

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

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

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

Обычный сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

github.com/kkomelin/vue_drupal_demo

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

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

Экосистема

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

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

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

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

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

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

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

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

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

The State Of JavaScript 2016

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

The State Of JavaScript 2016

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

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

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

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

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

Angular?

Ember?Backbone?

Polymer?Aurelia?

Vue?

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

@kkomelin

Золотой спонсор:При поддержке: Серебряные спонсоры:

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

КРАСНОДАР2016