Successfully reported this slideshow.
Your SlideShare is downloading. ×

"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone

Ad

VUE.JS
VUE.JS как реакт с человеческим лицом
Вольдэмар Дулецкий ( @r00takaspin ), компания Evrone

Ad

VUE.JS
Прежде всего View библиотека, а не framework
Компактен, быстр, прост
Очень похож на React: Virtual DOM, компоненты,...

Ad

Как выглядит компонент?
Отдельный файл c расширением .vue:
<template>
Say hello: <span class='colored'>{{ $hello }}</span>...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 31 Ad
1 of 31 Ad

More Related Content

Slideshows for you (19)

More from it-people (20)

"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone

  1. 1. VUE.JS VUE.JS как реакт с человеческим лицом Вольдэмар Дулецкий ( @r00takaspin ), компания Evrone
  2. 2. VUE.JS Прежде всего View библиотека, а не framework Компактен, быстр, прост Очень похож на React: Virtual DOM, компоненты, Vuex *Иногда сравнивают как смесь Angular 1 и React.
  3. 3. Как выглядит компонент? Отдельный файл c расширением .vue: <template> Say hello: <span class='colored'>{{ $hello }}</span> </template> <style> .colored { color: 'yellow' } </style> <script> export default { name: 'hello-component', data(): { return { hello: 'Hello, buddy' } }, mounted() { console.log('hey, I am inited') } } </script>
  4. 4. Тестируем компонент Святая троица:  karma ,  jasmine ,  phantom-js . Пример теста: it('#confirmed', () => { let component = getComponent('confirmed'); expect(component.icon_class).toBe('bg-success'); expect(component.title).toBe('Confirmed') }); it('#declined', () => { let component = getComponent('declined'); expect(component.icon_class).toBe('bg-danger'); expect(component.title).toBe('Declined') });
  5. 5. Модульность Через модули и миксины мы можем выносить общую логику в отдельные сущности и при необходимости их подключать. Ниже пример миксина: export default { computed: { file_name() { if (this.files) { let url = new URL(this.files[0].url); return url.pathname.replace(/^.*[/]/, '') } else { return 'N/A' } } } }
  6. 6. Документация на русском языке Вся документация по библиотекам входящим в экосистему есть на русском языке и поддерживается в актуальном состоянии.
  7. 7. Небольшое, отзывчивое комьюнити авторы библиотек отвечают быстро документация не core‑библиотек может быть не актуальной
  8. 8. Общая проблема молодых проектов
  9. 9. vee‑validations ‑ валидации vue‑resource ‑ годный http клиент vue‑i18n ‑ переводы vue‑router ‑ роутер для SPA
  10. 10. Полный список: awesome‑vue.com
  11. 11. Vue.js devtools
  12. 12. Моя история Задача: сделать админку на vue, бэкэнд на Ruby On Rails. 2‑3 дня на настройку webpack, babel 1‑2 дня настройка связки karma, jasmine, phantomjs вечер на интеграцию с CI около недели на понимание работы и взаимодействия компонентов неделя на понимание работы со стейтом
  13. 13. Перейдем к практике Воспользуемся утилитой  vue-cli для быстрого развертывания приложения: npm install -g vue-cli Создадим приложение: vue init link-shorter Далее последует несложный диалог о конфигурировании приложения. *Очень похоже на ember‑cli
  14. 14. Структура приложения . ├── README.md ├── build │   ├── build.js │   ├── check-versions.js │   ├── dev-client.js │   ├── dev-server.js │   ├── utils.js │   ├── vue-loader.conf.js │   ├── webpack.*.conf.js ├── config │   ├── dev.env.js │   ├── index.js │   ├── *.env.js ├── index.html ├── package.json ├── src │   ... # каталог приложения ├── static └── test │   ... # тесты
  15. 15. Как выглядит директория приложения? src ├── App.vue # корневой компонент ├── assets │   └── logo.png ├── components # директория с компонентами │   └── Hello.vue ├── main.js # точка входа приложения └── router └── index.js # директория для роутов
  16. 16. Добавим зависимости yarn add bootstrap-vue@latest # куда без него? yarn add vuex@latest # Vuex!
  17. 17. ShortLinkForm обратим внимание на семантическое название обратим внимание что всегда нужно внутри  <template> добавлять  div , внутри которого будет шаблон
  18. 18. <template> <div> <input type="text" class="form-control" v-model="url" placeholder="Ссылка"> <span class="input-group-btn"> <button class="..." type="button" v-on:click="minimizeUrl"> Укротить </button> </span> </div> </template> <script> export default { name: 'short-link-url', data () { return { url: '' } }, methods: { minimizeUrl: () => { console.log('url minimized') } } } </script>
  19. 19. Регистрация компонента в приложении <template> ... <short-link-form></short-link-form> ... </template> <script> import Vue from 'vue' import ShortLinkForm from './ShortLinkForm.vue' Vue.component('short-link-form', ShortLinkForm) export default { name: 'Index', components: {ShortLinkForm} } </script>
  20. 20. Список укороченных ссылок cоздадим SortLinkList, который будет выводить все сокращенные урлы на помощь приходит Vuex
  21. 21. Vuex const URL = 'http://localhost:8080/' export default new Vuex.Store({ state: { urls: [] }, mutations: { MINIMIZE_URL (state, url) { let hash = crypto.randomBytes(10).toString('hex') state.urls.push({ url: url, short: `${URL}${hash}` }) } } })
  22. 22. Как изменится компонент ShortLinkForm? <template> <!--никак не меняется--> </template> <script> export default { name: 'short-link-url', data () { return { url: '' } }, methods: { minimizeUrl () { this.$store.commit('MINIMIZE_URL', this.url) } } } </script>
  23. 23. Список сокращенных ссылок <template> <table class="table"> <tr v-for="url in urls"> <td> {{url.url}} </td> <td> {{url.short}} </td> </tr> </table> </template> <script> export default { name: 'short-url-list', computed: { urls: function () { return this.$store.state.urls } } } </script>
  24. 24. Хуки export default { name: 'Index', components: {ShortUrlList, ShortLinkForm}, mounted () { let urls = ['http://ya.ru/', 'http://google.com', 'http://koenig-rb.ru/'] for (let i = 0; i < urls.length; i++) { this.$store.commit('MINIMIZE_URL', urls[i]) } } } Если мы хотим что‑то подгрузить при инициализации компонента.
  25. 25. Webpack Никаких проблем при использовании  vue-cli . Перед выходом в продакшен все‑таки придется изучить webpack.
  26. 26. 3 причины перейти с реакта vue компоненты восхитительны и не ломают глаза, вызывают привыкание быстрый старт с  vue-cli  основные библиотеки экосистемы поддерживаются авторами библиотеки
  27. 27. 5 причин попробовать после jQuery не хотите выбирать между Flux/Redux ‑ попробуйте сразу Vuex попробуйте реактивность библиотека очень дружественна, пологая кривая вхождения подключить можно через  <script src="https://unpkg.com/vue"></script>  отзывчивое комьюнити, быстро помогают новичкам, хороший форум forum.vuejs.org
  28. 28. Где не стоит использовать? Мобильные приложения.
  29. 29. Где стоит использовать? Везде где нужна быстрая и функциональная View библиотека без лишних зависимостей.
  30. 30. Вольдэмар Дулецкий, веб‑разработчик, компания Evrone https://github.com/r00takaspin https://fb.com/voldemar.duletskiy voldemar@evrone.com
  31. 31. Вопросы?

×