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

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

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

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. Тестируем компонент
Святая троица: 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. Модульность
Через модули и миксины мы можем выносить общую логику в отдельные сущности и при
необходимости их подключать. Ниже пример миксина:
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. Документация на русском языке
Вся документация по библиотекам входящим в экосистему есть на русском языке и
поддерживается в актуальном состоянии.

7. Небольшое, отзывчивое комьюнити
авторы библиотек отвечают быстро
документация не core‑библиотек может быть не актуальной

8. Общая проблема молодых проектов

9. vee‑validations ‑ валидации
vue‑resource ‑ годный http клиент
vue‑i18n ‑ переводы
vue‑router ‑ роутер для SPA

10. Полный список: awesome‑vue.com

11. Vue.js devtools

12. Моя история
Задача: сделать админку на vue, бэкэнд на Ruby On Rails.
2‑3 дня на настройку webpack, babel
1‑2 дня настройка связки karma, jasmine, phantomjs
вечер на интеграцию с CI
около недели на понимание работы и взаимодействия компонентов
неделя на понимание работы со стейтом

13. Перейдем к практике
Воспользуемся утилитой vue-cli для быстрого развертывания приложения:
npm install -g vue-cli
Создадим приложение:
vue init link-shorter
Далее последует несложный диалог о конфигурировании приложения.
*Очень похоже на ember‑cli

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. Как выглядит директория приложения?
src
├── App.vue # корневой компонент
├── assets
│ └── logo.png
├── components # директория с компонентами
│ └── Hello.vue
├── main.js # точка входа приложения
└── router
└── index.js # директория для роутов

16. Добавим зависимости
yarn add bootstrap-vue@latest # куда без него?
yarn add vuex@latest # Vuex!

17. ShortLinkForm
обратим внимание на семантическое название
обратим внимание что всегда нужно внутри <template> добавлять div , внутри
которого будет шаблон

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. Регистрация компонента в приложении
<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. Список укороченных ссылок
cоздадим SortLinkList, который будет выводить все сокращенные урлы
на помощь приходит Vuex

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. Как изменится компонент ShortLinkForm?
<template>
<!--никак не меняется-->
</template>
<script>
export default {
name: 'short-link-url',
data () {
return {
url: ''
}
},
methods: {
minimizeUrl () {
this.$store.commit('MINIMIZE_URL', this.url)
}
}
}
</script>

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. Хуки
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. Webpack
Никаких проблем при использовании vue-cli .
Перед выходом в продакшен все‑таки придется изучить webpack.

26. 3 причины перейти с реакта
vue компоненты восхитительны и не ломают глаза, вызывают привыкание
быстрый старт с vue-cli
основные библиотеки экосистемы поддерживаются авторами библиотеки

27. 5 причин попробовать после jQuery
не хотите выбирать между Flux/Redux ‑ попробуйте сразу Vuex
попробуйте реактивность
библиотека очень дружественна, пологая кривая вхождения
подключить можно через <script src="https://unpkg.com/vue"></script>
отзывчивое комьюнити, быстро помогают новичкам, хороший форум
forum.vuejs.org

28. Где не стоит использовать?
Мобильные приложения.

29. Где стоит использовать?
Везде где нужна быстрая и функциональная View библиотека без лишних зависимостей.

30. Вольдэмар Дулецкий, веб‑разработчик, компания Evrone
https://github.com/r00takaspin
https://fb.com/voldemar.duletskiy
voldemar@evrone.com

31. Вопросы?