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

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

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

3fa2f88e8c707ec90e4ecd1ac2ed023a?s=128

Vue.js Moscow Meetup

March 28, 2018
Tweet

Transcript

  1. 2.

    Что сейчас будет? Рассказывает Григорий Петров Специализация Руководство разработкой Чем

    занимается Технический евангелист Опыт Более 15 лет Время выступления 20 минут Вопросы В конце выступления D2
  2. 3.

    Давайте познакомимся с Вуем Python вообще “Пайтон”, но мы говорим

    “Питон” Azure вообще “Эжа”, но мы говорим “Азура” Vue вообще “Вью”, но мы говорим “Вуй” Nuxt вообще “Накст”, но мы говорим “Нукст” D3
  3. 6.

    Немного истории • 25 Октября 2016 года анонс Next.js для

    React.js • Через пару недель Себастьян Чопин решил повторить для Vue.js D6
  4. 7.

    Немного истории • 25 Октября 2016 года анонс Next.js для

    React.js • Через пару недель Себастьян Чопин решил повторить для Vue.js • Цель - облегчить конфигурирование Vue.js D7
  5. 8.

    Немного истории • 25 Октября 2016 года анонс Next.js для

    React.js • Через пару недель Себастьян Чопин решил повторить для Vue.js • Цель - облегчить конфигурирование Vue.js • 8 Января 2018 года релиз стабильной версии 1.0 D8
  6. 22.

    Как выглядит статика • HTML со встроенным CSS для каждой

    страницы • Webpack runtime • Vue runtime • JS код приложения по чанкам для "hydration" D22
  7. 23.

    Как выглядит статика • HTML со встроенным CSS для каждой

    страницы • Webpack runtime • Vue runtime • JS код приложения по чанкам для "hydration" • Nuxt runtime для layouts D23
  8. 24.

    Можно выкладывать в GitHub Pages • GUID в качестве имени

    репозитория • <meta name="robots" content="noindex,nofollow"> в статике D24
  9. 31.

    Так что такое Nuxt.js? Генератор приложений на современном стеке frontend

    технологий: • Vue.js • Webpack • Babel • vue-router • vuex D31
  10. 34.

    Три режима работы • Generated ◦ Может миллионы статик страниц

    из таблицы id'шек. • Universal ◦ Backend на выбор: Express.js etc, или написать свой. D34
  11. 35.

    Три режима работы • Generated ◦ Может миллионы статик страниц

    из таблицы id'шек. • Universal ◦ Backend на выбор: Express.js etc, или написать свой. • SPA ◦ Пустой HTML со спиннером + Vue.js приложение. D35
  12. 39.

    О пользе SSR • Возможность быстрой загрузки страницы • Кеширование

    на уровне приложения и CDN • Отсутствие "вспышке не-стилизованного контента" D39
  13. 40.

    О пользе SSR • Возможность быстрой загрузки страницы • Кеширование

    на уровне приложения и CDN • Отсутствие "вспышке не-стилизованного контента" • Лучшая совместимость с поисковиками D40
  14. 44.

    Что еще может Nuxt.js? • Hot Reloading для режима разработки

    • Babel • Анимации при переключении страниц D44
  15. 45.

    Что еще может Nuxt.js? • Hot Reloading для режима разработки

    • Babel • Анимации при переключении страниц • Layout'ы D45
  16. 46.

    Что еще может Nuxt.js? • Hot Reloading для режима разработки

    • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части D46
  17. 47.

    Что еще может Nuxt.js? • Hot Reloading для режима разработки

    • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части • Альясы "@", "@@", "~" и "~~" для импортов D47
  18. 48.

    Что еще может Nuxt.js? • Hot Reloading для режима разработки

    • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части • Альясы "@", "@@", "~" и "~~" для импортов • Кеширование на уровне компонентов D48
  19. 49.

    Что еще может Nuxt.js? • Hot Reloading для режима разработки

    • Babel • Анимации при переключении страниц • Layout'ы • Автоматическое дробление кода на части • Альясы "@", "@@", "~" и "~~" для импортов • Кеширование на уровне компонентов • Stream Rendering D49
  20. 50.

    Киллер-фича для меня Single file components .vue: • Один компонент

    - один файл • Любые языки: pug + typescript + postcss D50
  21. 51.

    Из интервью автора Vue.js для Хабрахабр Nuxt — отличная штука.

    Если нужен SSR под Vue — используй его, если не хочешь настраивать все самостоятельно D51