JS Lab2017_Redux: время двигаться дальше?_Екатерина...

ReduxВремя двигаться дальше?

Екатерина ЛизогубоваCoach @ JavaScript.Ninja

Кто я?

...Looking for job… :)

Учу писать на JavaScript

и все еще учусь сама :)

Про доклад

О проекте

Что внутри?

➔ Java Backend

➔ React

Просто добавь в React➔ Redux

➔ Redux-Saga

➔ Redux-Form

➔ React-Router

➔ Redux-Router

➔ Server-side

rendering

Один мой день

[JBL-932] Implement buying

second ticket for social

sharing

Один мой день➔ Анализ существующего кода

➔ Планирование новых элементов

Redux-инфраструктуры

➔ Планирование API новых компонент

Один мой день

Один мой день❏ Код

❏ Еще код

❏ Тестирование в браузере

❏ Тестирование в Mobile Safari

Один мой день❏ commit

❏ merge

❏ qa

❏ регрессия :(

Плюсы➔ Предсказуемость

➔ Понятность

➔ Расширяемость

➔ Тестируемость

Плюсы #2➔ Простота

➔ Удобство отладки

➔ @dan_abramov

➔ Stack Overflow / Google

Оно тормозит

Структура данных

Время обновляется каждую секунду вызывая перерисовку всего лобби

Иммутабельность

Денормализация

ТурнирМатч

Время матча

Было Стало

Проблемы денормализации

➔ Как загружать данные

➔ Как выгружать данные

Redux и Ко

normalizr →

← reselect

Философия React

UI = f(props, state)

componentWillReceivePropscomponentWillReceiveProps(nextProps) {

if (!this.props.bets && nextProps.bets) {

// logic here

}

}

FLUX event есть event’а нет

React ≠ Reactive

Event → React

Event → Update → Render

Конкуренты

4.0!

Observable proposal

stage 1

Observable proposal

Меньше учить

Observable proposal

Меньше boilerplate

Зачемнам redux?

Application State➔ все

➔ все, но...

➔ все, и...

Простой рецепт

⚠ Application State

REST Component 1

Store


✓ Application State


REST Component 1

Component 2

Store




REST

WS

Component 1

Store




REST

WS

Component 1

Component 2

Store

Вопросы?

Technology