JS Lab2017, 25 марта, Одесса Redux: время двигаться дальше? Екатерина Лизогубова (Coach at JavaScript.Ninja) React + Redux стал стандартом де-факто в разработке приложений на React. Говорим React - подразумеваем Redux. Говорим Redux - подразумеваем React. Однако спустя два года активного использования подобного стека у меня накопилось множество проблем: решаемых и не очень. Так что же - пришло время двигаться дальше на волнах хайпа или старый друг лучше новых двух? Как Redux отравляет жизнь и что с этим делать. Все материалы: http://jslab.in.ua/ Организаторы: http://geekslab.org.ua/

1. Redux
Время двигаться дальше?
Екатерина Лизогубова
Coach @ JavaScript.Ninja

2. Кто я?
...Looking for job… :)
Учу писать на JavaScript
и все еще учусь сама :)

3. Про доклад

4. О проекте

5. Что внутри?
➔ Java Backend
➔ React

6. Просто добавь в React
➔ Redux
➔ Redux-Saga
➔ Redux-Form
➔ React-Router
➔ Redux-Router
➔ Server-side
rendering

7. Один мой день
[JBL-932] Implement buying
second ticket for social
sharing

8. Один мой день
➔ Анализ существующего кода
➔ Планирование новых элементов
Redux-инфраструктуры
➔ Планирование API новых компонент

9. Один мой день

10. Один мой день
❏ Код
❏ Еще код
❏ Тестирование в браузере
❏ Тестирование в Mobile Safari

11. Один мой день
❏ commit
❏ merge
❏ qa
❏ регрессия :(

12. Плюсы
➔ Предсказуемость
➔ Понятность
➔ Расширяемость
➔ Тестируемость

13. Плюсы #2
➔ Простота
➔ Удобство отладки
➔ @dan_abramov
➔ Stack Overflow / Google

14. Оно тормозит

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

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

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

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

19. Денормализация
Турнир
Матч
Время матча

20. Денормализация
Турнир
Матч
Время матча

21. Было Стало

22. Проблемы денормализации
➔ Как загружать данные
➔ Как выгружать данные

23. Redux и Ко
normalizr →
← reselect

24. Философия React
UI = f(props, state)

25. componentWillReceiveProps
componentWillReceiveProps(nextProps) {
if (!this.props.bets && nextProps.bets) {
// logic here
}
}

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

27. React ≠ Reactive
Event → React
Event → Update → Render

28. Конкуренты
4.0!

29. Observable proposal
stage 1

30. Observable proposal
Меньше
учить

31. Observable proposal
Меньше
boilerplate

32. Зачем
нам redux?

33. Application State
➔ все
➔ все, но...
➔ все, и...

34. Простой рецепт
⚠ Application State
REST Component 1
Store

35. Простой рецепт
✓ Application State
Простой рецепт
REST Component 1
Component 2
Store

36. Простой рецепт
✓ Application State
Простой рецепт
REST
WS
Component 1
Store

37. Простой рецепт
✓ Application State
Простой рецепт
REST
WS
Component 1
Component 2
Store

39. Вопросы?