Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

35 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

  1. 1. All you need is Vue , Андрей Стягайло Nuxt is all you need
  2. 2. Андрей Стягайло ● ~2 года в комерческой разработке ● 1+ года работы с Vue.js и Nuxt.js в продакшене ● Работаю Front-End Developer в KeepSolid
  3. 3. Easy to Learn, Hard to Master 1/30
  4. 4. Vue.js Что такое Vue.js? ● Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов. ● Ядро Vue в первую очередь решает задачи уровня представления (view) ● Vue не является фреймворком-монолитом, он создавался пригодным для постепенного внедрения ● Архитектура фреймворка во многом вдохновлена паттерном MVVM, хоть и не реализует его в полной мере. 2/30
  5. 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. 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. 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. 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. 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. 10. Вычисляемые свойства: 8/30 … data: { message: 'Привет' }, computed: { // геттер вычисляемого значения reversedMessage() { return this.message.split('').reverse().join('') } } ... … <p>«{{ message }}»</p> <!-- Привет --> ... … <p>«{{ reversedMessage }}»</p> <!-- тевирП --> ... ● Написанная функция будет использоваться как геттер свойства данной компоненты ● Вычисляемые свойства кешируются, основываясь на своих зависимостях ● Вычисляемое свойство пересчитывается лишь тогда, когда изменится одна из его зависимостей Профит:
  11. 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 } ...
  12. 12. 10/30 3.0 Vue3 is Coming...
  13. 13. 11/30 Нельзя просто так взять и расказать про Nuxt не затронув экосистему Vue
  14. 14. Экосистема Vue.js 12/30 Vuex Vue Router Vue SSR Vue
  15. 15. Vue Router: ● Глубокая интеграция с Vue.js ● Вложенные маршруты/представления ● Модульная конфигурация маршрутизатора ● Доступ к параметрам маршрута, query, wildcards ● Анимация переходов представлений на основе Vue.js ● Удобный контроль навигации 13/30 Преимущества:
  16. 16. ● Лучшее SEO ● Лучшие показатели времени до отображения контента 14/30 Преимущества: ● Ограничения при разработке ● некоторые внешние библиотеки могут нуждаться в особой обработке ● Более сложные требования по настройке и развёртыванию сборки ● Повышенная нагрузка на стороне сервера Компромисы: Server Side Rendering:
  17. 17. 15/30 Однонаправленный поток данных и его недостатки: ● Несколько представлений могут зависеть от одной и той же части состояния приложения. ● Действия из разных представлений могут оказывать влияние на одни и те же части состояния приложения. Проблемы:
  18. 18. 16/30 И что же с этим делать?: ● вынести всё общее состояние приложения из компонентов и управлять им в глобальном синглтоне Решение: ● Дерево компонентов становится одним большим «представлением» и любой компонент может получить доступ к состоянию приложения ● Можно вызывать действия для изменения состояния, независимо от того, где они находятся в дереве Профит:
  19. 19. ● Привнесения новых концепций и вспомогательного кода. ● Кратковременная продуктивность страдает на благо долгосрочной. 17/30 ● Централизованное хранилище данных для всех компонентов приложения ● Состояние может быть изменено только предсказуемым образом. Vuex: Плюсы: Минусы:
  20. 20. This is Nuxt 18/30
  21. 21. Немного о Nuxt.js: ● Написание Vue-файлов ● Серверный рендеринг ● Мощная система маршрутизации с асинхронными данными ● Обслуживание статических файлов ● Транспиляция ES6/ES7 ● Сборка и минимизация JS & CSS ● Управление элементами в блоке head ● Горячая замена модулей при разработке ● Пре-процессоры: SASS, LESS, Stylus, и др. 19/30 Возможности:
  22. 22. 20/30 Rendering modes: Server Side Rendered Single Page App Statically Generated
  23. 23. Как это работает?: ● assets ● components ● layouts ● middleware ● pages ● plugins ● static ● store ● nuxt.confg.js 21/30 Структура папок:
  24. 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. 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. 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. 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:
  28. 28. Middleware: 26/30
  29. 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:
  30. 30. Server Middleware: 28/30
  31. 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. 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. 33. Итоги: ● Интуитивно понятный ● Мощный инструмент для разработки ● Высокий уровень абстракции ● Обширная экосистема, решающая большую чать проблем Плюсы: ● Большой и сложный ● Зациклен на собственной экосистеме Минусы:
  34. 34. Андрей Стягайло Website: Coming soon... Facebook: https://www.facebook.com/AndriiStiahailo Email: a.stiahailo@keepsolid.com

×