Опыт использования Nuxt.js – Григорий Петров (технический евангелист Voximplant)- Vue.js Moscow Meetup

Фреймворк Nuxt.js позволяет очень быстро собирать на Vue.js статические сайты. Получающиеся пререндеренные HTML страницы грузятся очень быстро, затем загружают JavaScript код и оживают в ваше приложение. В Voximplant используют Nuxt для внутренних проектов, документации, одностраничных сайтов.

Transcript

1. Nuxt.js https://twitter.com/grigoryvp VueJS Meetup №1, Москва, 03.2018 Григорий Петров Voximplant
2. Что сейчас будет? Рассказывает Григорий Петров Специализация Руководство разработкой Чем занимается Технический евангелист Опыт Более 15 лет Время выступления 20 минут Вопросы В конце выступления D2
3. Давайте познакомимся с Вуем Python вообще “Пайтон”, но мы говорим “Питон” Azure вообще “Эжа”, но мы говорим “Азура” Vue вообще “Вью”, но мы говорим “Вуй” Nuxt вообще “Накст”, но мы говорим “Нукст” D3
4. Немного истории D4
5. Немного истории • 25 Октября 2016 года анонс Next.js для React.js D5
6. Немного истории • 25 Октября 2016 года анонс Next.js для React.js • Через пару недель Себастьян Чопин решил повторить для Vue.js D6
7. Немного истории • 25 Октября 2016 года анонс Next.js для React.js • Через пару недель Себастьян Чопин решил повторить для Vue.js • Цель - облегчить конфигурирование Vue.js D7
8. Немного истории • 25 Октября 2016 года анонс Next.js для React.js • Через пару недель Себастьян Чопин решил повторить для Vue.js • Цель - облегчить конфигурирование Vue.js • 8 Января 2018 года релиз стабильной версии 1.0 D8
9. Облегчить конфигурирование? D9
10. Облегчить конфигурирование? D10
11. Облегчить конфигурирование? https://localhost:3000/ https://localhost:3000/contact https://localhost:3000/doc/about D11
12. Облегчить конфигурирование? Convention over configuration D12
13. Что еще "облегчается"? D13
14. Что еще "облегчается"? SSR D14
15. Что еще "облегчается"? Server Side Rendering D15
16. Что еще "облегчается"? Server Side Rendering VueJS был создан для этого D16
17. Генерация статики в режиме SSR D17
18. Как выглядит статика D18
19. Как выглядит статика • HTML со встроенным CSS для каждой страницы D19
20. Как выглядит статика • HTML со встроенным CSS для каждой страницы • Webpack runtime D20
21. Как выглядит статика • HTML со встроенным CSS для каждой страницы • Webpack runtime • Vue runtime D21
22. Как выглядит статика • HTML со встроенным CSS для каждой страницы • Webpack runtime • Vue runtime • JS код приложения по чанкам для "hydration" D22
23. Как выглядит статика • HTML со встроенным CSS для каждой страницы • Webpack runtime • Vue runtime • JS код приложения по чанкам для "hydration" • Nuxt runtime для layouts D23
24. Можно выкладывать в GitHub Pages • GUID в качестве имени репозитория • <meta name="robots" content="noindex,nofollow"> в статике D24
25. Так что такое Nuxt.js? D25
26. Так что такое Nuxt.js? Генератор приложений на современном стеке frontend технологий: D26
27. Так что такое Nuxt.js? Генератор приложений на современном стеке frontend технологий: • Vue.js D27
28. Так что такое Nuxt.js? Генератор приложений на современном стеке frontend технологий: • Vue.js • Webpack D28
29. Так что такое Nuxt.js? Генератор приложений на современном стеке frontend технологий: • Vue.js • Webpack • Babel D29
30. Так что такое Nuxt.js? Генератор приложений на современном стеке frontend технологий: • Vue.js • Webpack • Babel • vue-router D30
31. Так что такое Nuxt.js? Генератор приложений на современном стеке frontend технологий: • Vue.js • Webpack • Babel • vue-router • vuex D31
32. Три режима работы D32
33. Три режима работы • Generated ◦ Может миллионы статик страниц из таблицы id'шек. D33
34. Три режима работы • Generated ◦ Может миллионы статик страниц из таблицы id'шек. • Universal ◦ Backend на выбор: Express.js etc, или написать свой. D34
35. Три режима работы • Generated ◦ Может миллионы статик страниц из таблицы id'шек. • Universal ◦ Backend на выбор: Express.js etc, или написать свой. • SPA ◦ Пустой HTML со спиннером + Vue.js приложение. D35
36. О пользе SSR D36
37. О пользе SSR • Возможность быстрой загрузки страницы D37
38. О пользе SSR • Возможность быстрой загрузки страницы • Кеширование на уровне приложения и CDN D38
39. О пользе SSR • Возможность быстрой загрузки страницы • Кеширование на уровне приложения и CDN • Отсутствие "вспышке не-стилизованного контента" D39
40. О пользе SSR • Возможность быстрой загрузки страницы • Кеширование на уровне приложения и CDN • Отсутствие "вспышке не-стилизованного контента" • Лучшая совместимость с поисковиками D40
41. Что еще может Nuxt.js? D41
42. Что еще может Nuxt.js? • Hot Reloading для режима разработки D42
43. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel D43
44. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel • Анимации при переключении страниц D44
45. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel • Анимации при переключении страниц • Layout'ы D45
46. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части D46
47. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части • Альясы "@", "@@", "~" и "~~" для импортов D47
48. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части • Альясы "@", "@@", "~" и "~~" для импортов • Кеширование на уровне компонентов D48
49. Что еще может Nuxt.js? • Hot Reloading для режима разработки • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части • Альясы "@", "@@", "~" и "~~" для импортов • Кеширование на уровне компонентов • Stream Rendering D49
50. Киллер-фича для меня Single file components .vue: • Один компонент - один файл • Любые языки: pug + typescript + postcss D50
51. Из интервью автора Vue.js для Хабрахабр Nuxt — отличная штука. Если нужен SSR под Vue — используй его, если не хочешь настраивать все самостоятельно D51
52. Вопросы? Григорий Петров grigory.v.p@gmail.com https://twitter.com/grigoryvp https://facebook.com/grigoryvp Это всё!