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.
VUE.JS
VUE.JS как реакт с человеческим лицом
Вольдэмар Дулецкий ( @r00takaspin ), компания Evrone
VUE.JS
Прежде всего View библиотека, а не framework
Компактен, быстр, прост
Очень похож на React: Virtual DOM, компоненты,...
Как выглядит компонент?
Отдельный файл c расширением .vue:
<template>
Say hello: <span class='colored'>{{ $hello }}</span>...
Тестируем компонент
Святая троица:  karma ,  jasmine ,  phantom-js .
Пример теста:
it('#confirmed', () => {
let component ...
Модульность
Через модули и миксины мы можем выносить общую логику в отдельные сущности и при
необходимости их подключать. ...
Документация на русском языке
Вся документация по библиотекам входящим в экосистему есть на русском языке и
поддерживается...
Небольшое, отзывчивое комьюнити
авторы библиотек отвечают быстро
документация не core‑библиотек может быть не актуальной
Общая проблема молодых проектов
vee‑validations ‑ валидации
vue‑resource ‑ годный http клиент
vue‑i18n ‑ переводы
vue‑router ‑ роутер для SPA
Полный список: awesome‑vue.com
Vue.js devtools
Моя история
Задача: сделать админку на vue, бэкэнд на Ruby On Rails.
2‑3 дня на настройку webpack, babel
1‑2 дня настройка...
Перейдем к практике
Воспользуемся утилитой  vue-cli для быстрого развертывания приложения:
npm install -g vue-cli
Создадим...
Структура приложения
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── de...
Как выглядит директория приложения?
src
├── App.vue # корневой компонент
├── assets
│   └── logo.png
├── components # дире...
Добавим зависимости
yarn add bootstrap-vue@latest # куда без него?
yarn add vuex@latest # Vuex!
ShortLinkForm
обратим внимание на семантическое название
обратим внимание что всегда нужно внутри  <template> добавлять  d...
<template>
<div>
<input type="text" class="form-control" v-model="url" placeholder="Ссылка">
<span class="input-group-btn"...
Регистрация компонента в приложении
<template>
...
<short-link-form></short-link-form>
...
</template>
<script>
import Vue...
Список укороченных ссылок
cоздадим SortLinkList, который будет выводить все сокращенные урлы
на помощь приходит Vuex
Vuex
const URL = 'http://localhost:8080/'
export default new Vuex.Store({
state: {
urls: []
},
mutations: {
MINIMIZE_URL (...
Как изменится компонент ShortLinkForm?
<template>
<!--никак не меняется-->
</template>
<script>
export default {
name: 'sh...
Список сокращенных ссылок
<template>
<table class="table">
<tr v-for="url in urls">
<td>
{{url.url}}
</td>
<td>
{{url.shor...
Хуки
export default {
name: 'Index',
components: {ShortUrlList, ShortLinkForm},
mounted () {
let urls = ['http://ya.ru/', ...
Webpack
Никаких проблем при использовании  vue-cli .
Перед выходом в продакшен все‑таки придется изучить webpack.
3 причины перейти с реакта
vue компоненты восхитительны и не ломают глаза, вызывают привыкание
быстрый старт с  vue-cli 
о...
5 причин попробовать после jQuery
не хотите выбирать между Flux/Redux ‑ попробуйте сразу Vuex
попробуйте реактивность
библ...
Где не стоит использовать?
Мобильные приложения.
Где стоит использовать?
Везде где нужна быстрая и функциональная View библиотека без лишних зависимостей.
Вольдэмар Дулецкий, веб‑разработчик, компания Evrone
https://github.com/r00takaspin
https://fb.com/voldemar.duletskiy
vold...
Вопросы?
Nächste SlideShare
Wird geladen in …5
×

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

200 Aufrufe

Veröffentlicht am

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

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

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

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

×