Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

158 views

Published on

Выступление на конференции DUMP-2017

Published in: Internet
  • Be the first to comment

  • Be the first to like this

"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. Вопросы?

×