Vue.js: новый фреймворк для front end | Михаил Зотов | AzovDevMeetup 2017

Среди множества фреймворков для front end наиболее популярными и известными являются Angular и React, однако хорошую конкуренцию им составляет новый фреймворк Vue.js. Михаил рассмотрит преимущества Vue.js перед его конкурентами и подробно опишет внутреннюю структуру компонентов Vue.js.

Transcript

1. 2017 2017 Vue.js: новый фреймворк для фронтэнда Михаил Зотов, Arcadia front-end developer
2. 2017 Био • Опыт коммерческой разработки с начала 2014 года • Опыт разработки на AngularJS, Angular 2, .NET, Node.js • С начала 2017 года разрабатываю фронтэнд на Vue.js
3. 2017 Vue.js • Создатель - Evan You • Первый релиз в 2014 году (v 1.X) • Второй мажорный релиз в 2016 году (v 2.0.0): virtual DOM + SSR • Официальная документация на многих языках • 67k stars (React – 76k, AngularJS – 57k, Angular – 28k)
4. 2017 Производительность
5. 2017 Использование памяти
6. 2017 Спонсоры и пользователи • Stdlib • JSFiddle • Laravel • Monterail • … • Adobe • Alibaba • gitlab
7. 2017 Vue js: причины выбора и первые впечатления • Низкий порог вхождения • Хорошая структурированность кода • Код – отдельно, разметка – отдельно • Минимальные дополнительные настройки + roadmap для создания проекта • Быстрота разработки компонентов
8. 2017 Vue js: причины выбора и первые впечатления • Цельная экосистема: официальная поддержка плагинов роутинга, управления состоянием приложения и др. • Большое сообщество разработчиков • Маленький размер бандла • SSR • i18n
9. 2017 Vue.js • Все поля оборачивает в get; set; • Watcher помечает поля, затронутые при рендеринге компонента, как зависимости • Уведомление watcher’а при вызове set; get • Особенности отслеживания обновлений How Changes Are Tracked by Evan You licensed under CC BY 4.0
10. 2017 Пример приложения
11. 2017 Пример компонента: общий вид
12. 2017 Пример компонента: темплейт
13. 2017 Vue js: биндинг • Псевдонимы: v-bind: = :, v-on: = @ • Наличие «модификаторов» и возможность объединять их в цепочки: .stop = event.stopPropagation(), .once, .self, ….
14. 2017 Пример компонента: скрипт
15. 2017 Пример компонента: вычисляемые значения
16. 2017 Пример компонента: методы
17. 2017 Пример компонента: компоненты
18. 2017 Пример компонента: стили
19. 2017 Передача свойств (props) Каждый компонент может: • принимать набор свойств; • вызывать события и подписываться на них; • валидировать принимаемые свойства. Свойства можно передавать страницам, сайдбарам, …
20. 2017 Передача свойств (props)
21. 2017 Обновление данных • Дочерние компоненты работают в режиме “read-only” • Вопросами обновления данных занимается родительский компонент • Уровень абстракции у дочерних компонентов выше Composing Components by Evan You licensed under CC BY 4.0
22. 2017 Пример взаимодействия Parent&Child
23. 2017 События: подпись и отмена подписки
24. 2017 Фильтры
25. 2017 Темплейты
26. 2017 Анимация: фазы
27. 2017 Анимация: фазы
28. 2017 Именованные анимации
29. 2017 Анимации: css
30. 2017 Пример анимации
31. 2017 Пример анимации
32. 2017 Developer Tools
33. 2017 Developer Tools
34. 2017 Developer Tools
35. 2017 Анализ бандла
36. 2017 2017 Vue.js: новый фреймворк для фронтэнда Михаил Зотов, mikhail.zotov@softwarecountry.ru https://vuejs.org/ - сайт Vue.js https://github.com/vuejs/vue - репозиторий Vue.js