У каждой технологии есть свой жизненный цикл. Со временем повышается сложность задач и появляются новые, более удобные инструменты для решения этих задач. Настало время посмотреть на них. В данном докладе мы постараемся разобраться, “а что же не так с React” и как может нам помочь Vuejs, который стремительно набирает популярность как новый трендовый фреймворк. Make frontend development great again!

1. Vuejs, или как отказаться от React
Андрей Грачёв
Crello

2. Немного обо мне
▸ Architect at Crello(crello.com)
▸ Пишу на js с 2012 года
▸ Человек-оркестр
▸ Люблю всё новое
Грачёв Андрей

3. О чём будем говорить
Vuejs React
VS

4. Немного истории
2006
2010
2012
2013
??
2017

6. Почему полюбился Angular 1.x.x

7. Observers - медленно!

8. Что всегда мешало сделать
нормальный MVVM

9. Но немного отойдём в сторону…

10. Почему полюбился Реакт
Компоненты - Удобно!

11. Почему полюбился Реакт
Virtual DOM, Batch Rendering - скорость!

12. React Native
Learn once - write everywhere!

13. Нам показали как делать правильно!

15. Redial
Redux-saga
Immutable.js
Postcss modules
Classnames

16. Слишком сложно!

17. Vue to the rescue

19. Вместо тысячи слов…

20. Компоненты
+
Virtual DOM
+
MVVM Bindings

21. Скорость React Удобство Angular

22. Роутинг
React Vue
React-router Vue-router

23. State management
React Vue
Redux, MobX Vuex

24. Шаблоны
React Vue
Только JSX Можно использовать
любой
шаблон,
например Pug

25. Особенности Рендеринга

26. Скорость
Неоптимизированный Vue быстрее
Неоптимизированного React

27. Чем Vue удобней?

28. Conditional rendering - React
let children
if (items.length > 0) {
children = (
<ul>
{items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className='list-container'>
{children}
</div>
)

29. VUE
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
Conditional rendering - Vue

30. CSS React
Postscss + Modules
import s from './style.css';
const classNames = cs(s.interfaceFilterLists, {
[active]: someCondition === index
});
return (
<li
key={type.abbreviation}
className={classNames}
>
<button>{type.title}</button>
</li>
);

31. CSS VUE
Block scoped CSS
<style scoped>
.active {
background-color: '#000000'
}
</style>
<template>
<div v-bind:class="{ active: isActive }">
</div>
</template>

32. А как же React Native ?

33. Аналог React Native, работающий на
Vue.js

34. Почему Плохо
▸ Очень слабо развитая
экосистема
▸ Китайское коммьюнити

35. Где можно уже успешно применять
▸ Админки и внутренние ресурсы
▸ Домашние проекты
▸ MVP

36. Вопросы?