Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

38 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×