OdessaJS'2017

1. Борисенко Андрей, веб-разработчик
Магия Vue.js
и почему это лучше,
чем Реакт
Борисенко Андрей, seigiard@gmail.com

2. Борисенко Андрей
Занимаюсь веб-разработкой с 2000 года.
Умею верстать под пятый Эксплорер.
Пишу на джаваскрипт.
Проектирую интерфейсы.
Почта: seigiard@gmail.com
Скайп: seigiard

3. Создан в 2012 г.
Поддерживается Фейсбуком.
67000 звезд на Гитхаб за 5 лет.
Реакт используют все и везде вокруг.
Реакт компонентный — это удобно.
Реакт быстрый — это важно.
Реакт показал, как можно работать.
Реакт

5. Реакт — это только представление. Собери свой велосипед!
Реакт — это JSX. Смешай джаваскрипт с «версткой»!
Реакт — мы ни слова не говорим про стили!
Реакт — это компоненты. Много компонентов. Ещё больше компонентов!
Реакт — это очень излишне непомерно избыточно раздутый код. Местами.
Реакт

6. Vue.js
/vjuː/

7. Китайская модель познания мира

8. Скопируй, повтори, улучши

9. Создан в 2014 г., переписан в 2016 г.
Поддерживается Алибаба Груп.
54000 звезд на Гитхаб за 3 года.
Под мобильные Виикс (Weex).
Используют Вью:
GitLab, Laravel, CodeShip, PageKit...
История развития Вью
Звёзды на гитхабе: Реакт, Вью

10. Хуки жизненного цикла компонента
Вью
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
Реакт
constructor
componentWillMount
componentDidMount
componentWillReceiveProps
componentWillUpdate
componentDidUpdate
componentWillUnmount
Инициализация компонента
Создание компонента
Перед началом монтирования
Компонент смонтирован
Перед обновлением компонента
Компонент обновлён
Перед удалением компонента
Компонент удалён

11. Компоненты

12. Компоненты в Реакте
class HelloWorld extends React.Component {
let items = null;
if (this.props.items) {
items = (<ul>
{this.props.items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>);
}
render() {
return <div>
<h1>Hello {this.props.name}!</h1>
{this.props.items ? items : <p>No items found</p>}
</div>;
}
}
Логика может быть
размазана по всему
компоненту.
Логика может быть спрятана
в рендер-функции.

13. Компоненты во Вью: всё в одном файле
<template>
<h1>Hello {{name}}!</h1>
</template>
<style>
h1 { color: red }
</style>
<script>
export default {
data() => {
name: ‘World’
}
}
</script>
Компонент состоит
из трёх явных частей:
- Шаблон
- Стили
- Логика

14. Компоненты во Вью: всё по файлам
<template>
<h1>Hello {{name}}!</h1>
</template>
<style src="./hello.css" scoped></style>
<script src="./hello.js"></script>

15. Опции компонента
export default {
data() {
return { … }
},
props: [ 'name' ],
computed: {
value() { … }
},
watch: {
value() { … }
},
methods: {
onClick() { … }
}
}
Данные компонента
Пропсы, ожидаемые в компоненте
Вычисляемые свойства
Наблюдаемые свойства
Методы компонента

16. Опции компонента: пропсы
// Простая форма записи
{
props: ['size', 'myMessage']
}
{
props: {
// только проверка типа
height: Number,
// проверка типа и другие правила валидации
age: {
type: Number,
default: 0,
required: true,
validator: x => x >= 0
}
}
}
Атрибуты компонента,
по которым приходят данные
из родительского
компонента.

17. Опции компонента: вычисляемые свойства
{
data: {
a: 1
},
computed: {
aDouble() {
return this.a * 2
}
}
}
this.a; // 1
this.aDouble; // 2;
Свойства, зависящие
от других свойств.

18. Опции компонента: наблюдатели
{
data: { a: 1 },
watch: {
// реагирует на изменение a:
a(value, oldValue) {
console.log(
'новое значение: %s, старое значение: %s',
val,
oldVal
);
}
}
}
this.a = 2; // → новое значение: 2, старое значение:
1
Объект, ключи которого —
это свойства для
наблюдения,
а значения — функции,
вызываемые при изменении.

19. Опции компонента: методы
{
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
}
this.a; // 1
this.plus();
this.a; // 2
Вся методы, например
обработка событий,
хранятся здесь.

20. Стили

21. Стили в Реакт: инлайн
const headerStyle = {
color: 'red',
fontSize: '24px'
};
class HelloWorld extends React.Component {
render() {
return <h1 style={headerStyle}>
Hello World!
</h1>;
}
}

22. Нет медиа-выражений.
Нет ховера и фокуса.
Нет псевдоэлементов.
Стили в Реакт: инлайн
const headerStyle = {
color: 'red',
fontSize: '24px',
// Это невозможно понять,
это можно только запомнить.
WebkitTransition: 'all', // тут большая 'W' важна
msTransition: 'all' // а 'ms' уже маленькая
};
class HelloWorld extends React.Component {
render() {
return <h1 style={headerStyle}>
Hello World!
</h1>;
}
}

23. Стили в Реакт: инлайновая боль

24. import styles from "./hello-world.css";
class HelloWorld extends React.Component {
render() {
return <h1 style={styles.headerStyle}>
Hello World!
</h1>;
}
}
Стили в Реакт: react-css-modules

25. Стили в Реакт: styled-components
const RedTitle = styled.h1`
color: red;
fontSize: 24px;
`;
class HelloWorld extends React.Component {
render() {
return <RedTitle>
Hello World!
</RedTitle>;
}
}

26. Стили в Вью
<template>
<h1>
Hello World!
</h1>
</template>
<style>
h1 {
color: red;
}
</style>
// template
<h1>
Hello World!
</h1>
// style.css
h1 {
color: red;
}

27. Стили в Вью: компонентный подход
<template>
<h1>
Hello World!
</h1>
</template>
<style scoped>
h1 {
color: red;
}
</style>
// template
<h1 data-v-f3f3eg9>
Hello World!
</h1>
// style.css
h1[data-v-f3f3eg9] {
color: red;
}

28. Стили в Вью: CSS модули
<template>
<h1 v-bind:class=”$style.red”>
Hello World!
</h1>
</template>
<style modules>
.red {
color: red;
}
</style>
// template
<h1 class=”_1VyoJ-uZOjlO_0”>
Hello World!
</h1>
// style.css
h1._1VyoJ-uZOjlO_0 {
color: red;
}

29. Шаблоны

30. Шаблон в Реакте, наверное, где-то тут
return <div>
{props.isLoggedIn
? <UserGreeting/>
: <GuestGreeting />
}
</div>
return <div>
{state.array
.map((s,i) => <span key={i}>{s}</span>)
}
</div>
return <div>{myAwesomeTemplate}</div>
Можно в представлении
засунуть много логики.
Можно размазать
представление по коду
компонента.
Легко запутаться и запутать
других.

31. Шаблон во Вью
<template>
<div>
<user-greeting v-if=”isLoggedIn”/>
<guest-greeting v-else />
<span v-for=”i in Array(level).fill(0)” :key=”i”/>{{i}}</span>
</div>
</template>
Валидный HTML — валидный шаблон.
Директивы, как управление логикой отображения.
Можно использовать JSX или сразу функцию render.

32. Директивы — это синтаксический сахар
<nav>
<a v-if="signedIn">logout</a>
<a v-else>login</a>
</nav>
function render() {
with(this) {
return _c('nav', [
(signedIn)
? _c('a', [_v("logout")])
: _c('a', [_v("login")])
]);
}
}
https://vuejs-tips.github.io/compiler/#v-else

33. Двунаправленное связывание в Реакте
class Hello extends React.Component {
state = { name: 'World' }
change(e) {
this.setState({ name: e.target.value });
}
render() {
const { name } = this.state;
return
<div>
Name: <input value={name}
onChange={this.change.bind(this)} />
<br/>
Hello {name}!
</div>;
}
}

34. Двунаправленное связывание во Вью
<template>
<div>
Name: <input v-model='name' />
<br/>
Hello {{name}}!
</div>
</template>
<script>
export default {
data() {
return { name: 'World' }
}
}
</script>

35. Двунаправленное связывание во Вью
<template>
<div>
Name: <input
v-bind:value='name'
v-on:input='name = $event.target.value'
/>
<br/>
Hello {{name}}!
</div>
</template>

36. Двунаправленное связывание во Вью. С
рюшечками.
<template>
<div>
Name: <input-length v-model='name' />
<br/>
Hello {{name}}!
</div>
</template>
Компонент с поддержкой v-model:
— принимает входной параметр value
— порождает событие input с новым значением

37. Управление состоянием

38. Управление состоянием в Реакт: Редакс
Явно связываем
стэйт и пропсы.
Явно объявляем экшены
для диспатчеров.

39. Управление состоянием в Реакт: Мобикс
Явно указываем, за какими
свойствами стора
следим в компоненте.
Все экшены доступны.
Чуть больше магии
обсерверов.

40. Управление состоянием во Вью: Вьюикс (Vuex)
Весь стэйт доступен.
Все экшены доступны.
Магия обсерверов на 100%

41. Магия Вью

42. Реактивность Вью

43. Магия Вью
export default {
data() {
return {
someObject: {}
}
}
});
Каждое свойство объекта
превращается
в пару геттер/сеттер
с помощью волшебства
Object.defineProperty.

44. Методы массива
перехватываются,
чтобы включить уведомление
об изменениях массива.
Магия Вью: массивы
export default {
data() {
return {
someArray: []
}
}
});

45. Магия Вью: вычисляемые свойства
{
data: { a: 1 },
computed: {
// свойство только возвращает данные:
aDouble() {
return this.a * 2
},
// свойство и возвращает, и получает данные:
aPlus: {
get() { return this.a + 1 },
set(v) { this.a = v − 1 }
}
}
}
this.a; // 1
this.aPlus // 2;
this.aPlus = 5;
this.a; // 4
this.aDouble; // 8;
Свойства кешируются
и повторно вычисляются
только при изменении
реактивных зависимостей.

46. Скорость Вью и Реакт
Вью на ≈10% быстрее Реакта в сырой производительности рендеринга
и обновления страницы.
http://www.stefankrause.net/wp/?p=431
Реакт отлично оптимизируется вручную, а Вью позволяет сосредоточиться
на написании кода.

47. Преимущества Вью

48. Преимущества Вью
Вью — коробочная система для одностраничных приложений.
Вью стремительно развивается.
Файл компонента выглядит понятно.
Удобная работа с шаблонами и стилями.
Небольшая щепотка синтаксического сахара.
У Вью настоящая реактивность под капотом.
Вью изумительно прост.

49. Берём гибкую систему Ubuntu

50. Настраиваем только под себя AwesomeWM

51. А можно просто работать MacOS

52. Документация Вью
https://vuejs.org/
https://router.vuejs.org/
https://vuex.vuejs.org/
https://vue-loader.vuejs.org/
https://github.com/vuejs/awesome-vue
Прекрасная документация Вью,
которую приятно читать.
Роутер для Вью.
Вьюэкс — хранилище данных.
Как работает лоадер во Вью.
Сборник решений, плагинов и т.п.

53. Выводы

54. Работайте с тем, что
знаете.

55. Работайте с тем, что
знаете.
Изучайте новое.

56. Работайте с тем, что
знаете.
Изучайте новое.
Задавайте вопросы.

57. Работайте с тем, что
знаете.
Изучайте новое.
Задавайте вопросы.Борисенко Андрей, seigiard@gmail.com