SlideShare a Scribd company logo

All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10

Уже все знают о React и Angular, но что мы знаем о Vue.js? Андрей Стягайло рассказывает не только о Vue.js, но и о том что такое Nuxt.js и почему на него стоит обратить внимание в 2019 году.

1 of 34
Download to read offline
All you need is Vue ,
Андрей Стягайло
Nuxt is all you need
Андрей Стягайло
●
~2 года в комерческой разработке
●
1+ года работы с Vue.js и Nuxt.js в продакшене
●
Работаю Front-End Developer в KeepSolid
Easy to Learn, Hard to Master
1/30
Vue.js
Что такое Vue.js?
● Vue — это прогрессивный фреймворк для создания
пользовательских интерфейсов.
● Ядро Vue в первую очередь решает задачи уровня
представления (view)
● Vue не является фреймворком-монолитом, он
создавался пригодным для постепенного внедрения
● Архитектура фреймворка во многом вдохновлена
паттерном MVVM, хоть и не реализует его в полной мере.
2/30
Однофайловые
компоненты:
3/30
<template>
<p>{{ greeting }} World!</p>
</template>
./Hello.vue
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
● Написание представления в виде
html разметки
● Модульный CSS
● Использование HTML/СSS
препроцессоров
● Весь код
разметки/стилей/скриптов
относящийся к компоненте
структурирован и находится в
одном файле
Приемущества:
Данные (data):
4/30
● Cвойства в data будут реактивными,
только если они существовали при
создании экземпляра.
● Когда экземпляр Vue создан, он
добавляет все свойства, найденные в
опции data , в систему реактивности
Vue.
● Представление будет «реагировать»
на их изменения, обновляясь в
соответствии с новыми значениями.
//<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
<!-- template -->
<div id="app">
{{ message }} <!-- Hello World -->
</div>
//<script>
…
this.message = 'ololo'
...
<!-- template -->
<div id="app">
{{ message }} <!-- ololo -->
</div>
//<script>
…
this.todo = '1'
...
<!-- template -->
<div id="app">
{{ todo }} <!-- undefned -->
</div>
Профит:
Компромисы:

Recommended

Рендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковРендеринг может больше: vue.js vs React, Андрей Солодовников
Рендеринг может больше: vue.js vs React, Андрей СолодовниковDevDay
 
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...
#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib
 
Vue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейVue.js - реактивный фронтенд фреймворк для людей
Vue.js - реактивный фронтенд фреймворк для людейKonstantin Komelin
 
Knockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-ОнлайнKnockoutjs на примере 2ГИС-Онлайн
Knockoutjs на примере 2ГИС-Онлайн2ГИС Технологии
 
Антон Валюх - Использование паттерна Mvvm в android
Антон Валюх - Использование паттерна Mvvm в androidАнтон Валюх - Использование паттерна Mvvm в android
Антон Валюх - Использование паттерна Mvvm в androidDataArt
 
Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12
Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12
Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12HappyDev
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.Igor Shkulipa
 

More Related Content

What's hot

Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)DrupalYug
 
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011camp_drupal_ua
 
JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.Igor Shkulipa
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico
 
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...Andrey Taritsyn
 
Первые шаги после установки WordPress
Первые шаги после установки WordPressПервые шаги после установки WordPress
Первые шаги после установки WordPressDarja Kruzhkova
 
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evroneit-people
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...Тарасов Константин
 
JavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовJavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовguest42f396
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
 
Вёрстка для мобильных телефонов
Вёрстка для мобильных телефоновВёрстка для мобильных телефонов
Вёрстка для мобильных телефоновtoWave.ru
 
Вёрстка WordPress тем - WP Kharkiv Meetup #1
Вёрстка WordPress тем - WP Kharkiv Meetup #1Вёрстка WordPress тем - WP Kharkiv Meetup #1
Вёрстка WordPress тем - WP Kharkiv Meetup #1dima_kuzovlev
 
Selenium 2.0: обзор новых возможностей
Selenium 2.0: обзор новых возможностейSelenium 2.0: обзор новых возможностей
Selenium 2.0: обзор новых возможностейPaul Stashevsky
 
AngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияIgor Sazonov
 
Олег Мохов: Веб-компоненты
Олег Мохов: Веб-компонентыОлег Мохов: Веб-компоненты
Олег Мохов: Веб-компонентыYandex
 
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, ControllersШкола-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, ControllersГлеб Тарасов
 

What's hot (19)

Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)Реактивный фронтенд фреймворк для людей (Константин Комелин)
Реактивный фронтенд фреймворк для людей (Константин Комелин)
 
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
 
JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.JavaScript Базовый. Занятие 11.
JavaScript Базовый. Занятие 11.
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
RequireJS і Magento 2
RequireJS і Magento 2RequireJS і Magento 2
RequireJS і Magento 2
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
 
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
 
Первые шаги после установки WordPress
Первые шаги после установки WordPressПервые шаги после установки WordPress
Первые шаги после установки WordPress
 
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 
JavaScript и доступность web-сайтов
JavaScript и доступность web-сайтовJavaScript и доступность web-сайтов
JavaScript и доступность web-сайтов
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
 
Вёрстка для мобильных телефонов
Вёрстка для мобильных телефоновВёрстка для мобильных телефонов
Вёрстка для мобильных телефонов
 
Вёрстка WordPress тем - WP Kharkiv Meetup #1
Вёрстка WordPress тем - WP Kharkiv Meetup #1Вёрстка WordPress тем - WP Kharkiv Meetup #1
Вёрстка WordPress тем - WP Kharkiv Meetup #1
 
Selenium 2.0: обзор новых возможностей
Selenium 2.0: обзор новых возможностейSelenium 2.0: обзор новых возможностей
Selenium 2.0: обзор новых возможностей
 
AngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для понимания
 
Олег Мохов: Веб-компоненты
Олег Мохов: Веб-компонентыОлег Мохов: Веб-компоненты
Олег Мохов: Веб-компоненты
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, ControllersШкола-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
Школа-студия разработки приложений для iOS. 2 лекция. MVC, View, Controllers
 

Similar to All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10

Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico
 
JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"oelifantiev
 
Andrew Borisenko "Magic of Vue.js""
Andrew Borisenko  "Magic of Vue.js""Andrew Borisenko  "Magic of Vue.js""
Andrew Borisenko "Magic of Vue.js""OdessaJS Conf
 
Всеволод Шмыров, Яндекс
Всеволод Шмыров, ЯндексВсеволод Шмыров, Яндекс
Всеволод Шмыров, ЯндексElena Voynova
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikovyaevents
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Yandex
 
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)7bits
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Web deployment
Web deploymentWeb deployment
Web deploymentGetDev.NET
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнDevDay
 
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары SoftengiРазработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары SoftengiSoftengi
 
"Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации...
"Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации..."Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации...
"Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации...Yandex
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис РечкуновJSib
 
Take more from Jquery
Take more from JqueryTake more from Jquery
Take more from JqueryMagento Dev
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Introduction in Node.js (in russian)
Introduction in Node.js (in russian)Introduction in Node.js (in russian)
Introduction in Node.js (in russian)Mikhail Davydov
 
#MBLTdev: Опыт использования MVVM в реальных проектах
#MBLTdev: Опыт использования MVVM в реальных проектах#MBLTdev: Опыт использования MVVM в реальных проектах
#MBLTdev: Опыт использования MVVM в реальных проектахe-Legion
 
'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020
'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020
'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020OdessaJS Conf
 

Similar to All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10 (20)

Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
 
JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"JavaScript-модули "из прошлого в будущее"
JavaScript-модули "из прошлого в будущее"
 
Vuejs composition API
Vuejs composition APIVuejs composition API
Vuejs composition API
 
Andrew Borisenko "Magic of Vue.js""
Andrew Borisenko  "Magic of Vue.js""Andrew Borisenko  "Magic of Vue.js""
Andrew Borisenko "Magic of Vue.js""
 
Всеволод Шмыров, Яндекс
Всеволод Шмыров, ЯндексВсеволод Шмыров, Яндекс
Всеволод Шмыров, Яндекс
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikov
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"
 
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Web deployment
Web deploymentWeb deployment
Web deployment
 
Knockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-ОнлайнKnockout.JS на примере 2ГИС-Онлайн
Knockout.JS на примере 2ГИС-Онлайн
 
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары SoftengiРазработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
 
"Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации...
"Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации..."Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации...
"Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации...
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
 
пр 14.docx
пр 14.docxпр 14.docx
пр 14.docx
 
Take more from Jquery
Take more from JqueryTake more from Jquery
Take more from Jquery
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Introduction in Node.js (in russian)
Introduction in Node.js (in russian)Introduction in Node.js (in russian)
Introduction in Node.js (in russian)
 
#MBLTdev: Опыт использования MVVM в реальных проектах
#MBLTdev: Опыт использования MVVM в реальных проектах#MBLTdev: Опыт использования MVVM в реальных проектах
#MBLTdev: Опыт использования MVVM в реальных проектах
 
'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020
'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020
'The best practices' by KONSTANTIN KULAKSYZ at OdessaJS'2020
 

More from OdessaFrontend

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19OdessaFrontend
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...OdessaFrontend
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19OdessaFrontend
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...OdessaFrontend
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18OdessaFrontend
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17OdessaFrontend
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17OdessaFrontend
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17OdessaFrontend
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OdessaFrontend
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16OdessaFrontend
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16OdessaFrontend
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16OdessaFrontend
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщикаOdessaFrontend
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15OdessaFrontend
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15OdessaFrontend
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15OdessaFrontend
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15OdessaFrontend
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14OdessaFrontend
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13OdessaFrontend
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13OdessaFrontend
 

More from OdessaFrontend (20)

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
 

All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10

  • 1. All you need is Vue , Андрей Стягайло Nuxt is all you need
  • 2. Андрей Стягайло ● ~2 года в комерческой разработке ● 1+ года работы с Vue.js и Nuxt.js в продакшене ● Работаю Front-End Developer в KeepSolid
  • 3. Easy to Learn, Hard to Master 1/30
  • 4. Vue.js Что такое Vue.js? ● Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов. ● Ядро Vue в первую очередь решает задачи уровня представления (view) ● Vue не является фреймворком-монолитом, он создавался пригодным для постепенного внедрения ● Архитектура фреймворка во многом вдохновлена паттерном MVVM, хоть и не реализует его в полной мере. 2/30
  • 5. Однофайловые компоненты: 3/30 <template> <p>{{ greeting }} World!</p> </template> ./Hello.vue <script> module.exports = { data: function () { return { greeting: 'Hello' } } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style> ● Написание представления в виде html разметки ● Модульный CSS ● Использование HTML/СSS препроцессоров ● Весь код разметки/стилей/скриптов относящийся к компоненте структурирован и находится в одном файле Приемущества:
  • 6. Данные (data): 4/30 ● Cвойства в data будут реактивными, только если они существовали при создании экземпляра. ● Когда экземпляр Vue создан, он добавляет все свойства, найденные в опции data , в систему реактивности Vue. ● Представление будет «реагировать» на их изменения, обновляясь в соответствии с новыми значениями. //<script> var app = new Vue({ el: '#app', data: { message: 'Hello World' } }) <!-- template --> <div id="app"> {{ message }} <!-- Hello World --> </div> //<script> … this.message = 'ololo' ... <!-- template --> <div id="app"> {{ message }} <!-- ololo --> </div> //<script> … this.todo = '1' ... <!-- template --> <div id="app"> {{ todo }} <!-- undefned --> </div> Профит: Компромисы:
  • 7. Директивы: 5/30 <!-- связывание атрибута --> <img v-bind:src="imageSrc"> <!-- динамическое имя атрибута (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- связывание CSS-класса --> <div :class="{ red: isRed }"></div> <div :class="[classA, { classB: isB, classC: isC }]"> ● V-bind: Динамически связывает атрибуты тега или входной параметр компонента с выражением. ● При использовании с атрибутами class и style поддерживает массивы и объекты в качестве значений. ● V-if: Осуществляет отрисовку элемента, только если передаваемое выражение истинно. ● V-show: Переключает CSS-свойство display элемента, в зависимости от того, истинно ли указанное выражение. <!-- будет отрисовано если isShow == true --> <h1 v-if="isShow">Да</h1> <!-- иначе будет отрисован этот заголовок --> <h1 v-else>Нет</h1> <!-- останется в DOM и при isShow == false --> <h1 v-show="isShow">Шоу</h1> v-bind: v-if / v-show:
  • 8. Обработчики событий: 6/30 <!-- обработчик метода --> <button v-on:click="doThis"></button> <!-- динамическое имя события (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- inline-выражение --> <button v-on:click="doThat('hello', $event)"></button> <!-- сокращённая запись --> <button @click="doThis"></button> <!-- модификатор stop propagation --> <button @click.stop="doThis"></button> <!-- модификатор prevent default --> <button @click.prevent="doThis"></button> ● Тип события указывается в параметре. ● Выражение может быть именем метода, inline-выражением ● Выражение может отсутствовать, если указан один или несколько модификаторов. ● У обычного элемента можно подписаться только на нативные события DOM, у элемента компонента - на пользовательские события v-on: ● .stop — вызовет event.stopPropagation() . ● .prevent — вызовет event.preventDefault() . Модификаторы:
  • 9. Работа с формами (v-model): 7/30 <input v-model="message" placeholder="введите текст"> <textarea v-model="message" placeholder="введите несколько строчек"></textarea> <input type="checkbox" id="checkbox" v- model="checked"> <label for="checkbox">{{ checked }}</label> <input type="radio" id="one" value="Один" v- model="picked"> <label for="one">Один</label> ● Двунаправленнее связывание данных с элементами форм input, textarea и select. ● Способ обновления элемента выбирается автоматически в зависимости от типа элемента ● v-model игнорирует начальное значение атрибутов value , checked или selected . ● Начальное значение необходимо объявить опции data компонента. ● В языках, требующих IME (китайский, японский, корейский и т.д.), v-model не обновляется по мере IME-композиции. Плюсы: Минусы:
  • 10. Вычисляемые свойства: 8/30 … data: { message: 'Привет' }, computed: { // геттер вычисляемого значения reversedMessage() { return this.message.split('').reverse().join('') } } ... … <p>«{{ message }}»</p> <!-- Привет --> ... … <p>«{{ reversedMessage }}»</p> <!-- тевирП --> ... ● Написанная функция будет использоваться как геттер свойства данной компоненты ● Вычисляемые свойства кешируются, основываясь на своих зависимостях ● Вычисляемое свойство пересчитывается лишь тогда, когда изменится одна из его зависимостей Профит:
  • 11. Входные параметры: 9/30 … props: ['postTitle'] ... … <blog-post post-title="hello!"></blog-post> <!-- передача JavaScript выражений. --> <blog-post v-bind:post-title="message"></blog-post> ... ./parent-component.vue <template> ./child-component.vue <script>./parent-component.vue <template>./parent-component.vue <template> … props: { postTitle: String } ...
  • 13. 11/30 Нельзя просто так взять и расказать про Nuxt не затронув экосистему Vue
  • 15. Vue Router: ● Глубокая интеграция с Vue.js ● Вложенные маршруты/представления ● Модульная конфигурация маршрутизатора ● Доступ к параметрам маршрута, query, wildcards ● Анимация переходов представлений на основе Vue.js ● Удобный контроль навигации 13/30 Преимущества:
  • 16. ● Лучшее SEO ● Лучшие показатели времени до отображения контента 14/30 Преимущества: ● Ограничения при разработке ● некоторые внешние библиотеки могут нуждаться в особой обработке ● Более сложные требования по настройке и развёртыванию сборки ● Повышенная нагрузка на стороне сервера Компромисы: Server Side Rendering:
  • 17. 15/30 Однонаправленный поток данных и его недостатки: ● Несколько представлений могут зависеть от одной и той же части состояния приложения. ● Действия из разных представлений могут оказывать влияние на одни и те же части состояния приложения. Проблемы:
  • 18. 16/30 И что же с этим делать?: ● вынести всё общее состояние приложения из компонентов и управлять им в глобальном синглтоне Решение: ● Дерево компонентов становится одним большим «представлением» и любой компонент может получить доступ к состоянию приложения ● Можно вызывать действия для изменения состояния, независимо от того, где они находятся в дереве Профит:
  • 19. ● Привнесения новых концепций и вспомогательного кода. ● Кратковременная продуктивность страдает на благо долгосрочной. 17/30 ● Централизованное хранилище данных для всех компонентов приложения ● Состояние может быть изменено только предсказуемым образом. Vuex: Плюсы: Минусы:
  • 20. This is Nuxt 18/30
  • 21. Немного о Nuxt.js: ● Написание Vue-файлов ● Серверный рендеринг ● Мощная система маршрутизации с асинхронными данными ● Обслуживание статических файлов ● Транспиляция ES6/ES7 ● Сборка и минимизация JS & CSS ● Управление элементами в блоке head ● Горячая замена модулей при разработке ● Пре-процессоры: SASS, LESS, Stylus, и др. 19/30 Возможности:
  • 22. 20/30 Rendering modes: Server Side Rendered Single Page App Statically Generated
  • 23. Как это работает?: ● assets ● components ● layouts ● middleware ● pages ● plugins ● static ● store ● nuxt.confg.js 21/30 Структура папок:
  • 24. Страницы: 22/30 ● data ● fetch ● layout ● transition ● scrollToTop ● validate ● middleware Специальные атрибуты: <template lang="pug"> h1.red Hello {{ name }}! </template> <script lang="coffee"> module.exports = data: -> { name: 'World' } </script> <style lang="sass"> .red color: red </style> ./pages/random-page-name.vue
  • 25. Vue router in Nuxt: 23/30 router: { routes: [ { path: '/users', component: 'pages/users.vue', children: [ { path: ':id?', component: 'pages/users/_id.vue', name: 'users-id' } ] } ] } pages/ --| users/ -----| _id.vue --| users.vue Древо файлов: Итоговый роутинг:
  • 26. Асинхронные данные: 24/30 export default { async asyncData ({ params }) { let { data } = await axios.get(`https://my-api/posts/${params.id}`) return { title: data.title } } } export default { asyncData ({ params }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) } } Возвращая Promise: Используя async/await:
  • 27. Хранилище Vuex: 25/30 export const state = () => ({ list: [] }) export const mutations = { add (state, text) { state.list.push({ text: text, done: false }) }, toggle (state, todo) { todo.done = !todo.done } } ./store/todos.js export default { fetch ({ store, params }) { return axios.get('http://my-api/stars') .then((res) => { store.commit('setStars', res.data) }) } } The fetch Method:
  • 29. Middleware: 27/30 <template> <h1>Secret page</h1> </template> <script> export default { middleware: 'authenticated' } </script> export default function ({ store, redirect }) { // If the user is not authenticated if (!store.state.authenticated) { return redirect('/login') } } middleware/authenticated.js: pages/secret.vue:
  • 31. Server Middleware: 29/30 export default function (req, res, next) { // write here your code... console.log(req.path) next() } export default { serverMiddleware: [ '~/api/logger' ] } nuxt.confg.js: ./api/logger.js:
  • 32. Статика и плагины: 30/30 module.exports = { build: { vendor: ['vue-notifcations'] }, plugins: ['~plugins/vue-notifcations'] } Использование плагинов: <template> <img src="~assets/image.png"> </template> Статические и файлы исходного кода: ... <!-- Статическое изображение из папки `static`--> <img src="/my-image.png"/> ...
  • 33. Итоги: ● Интуитивно понятный ● Мощный инструмент для разработки ● Высокий уровень абстракции ● Обширная экосистема, решающая большую чать проблем Плюсы: ● Большой и сложный ● Зациклен на собственной экосистеме Минусы: