Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Lab2017_Redux: время двигаться дальше?_Екатерина Лизогубова

209 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JS Lab2017_Redux: время двигаться дальше?_Екатерина Лизогубова

  1. 1. Redux Время двигаться дальше? Екатерина Лизогубова Coach @ JavaScript.Ninja
  2. 2. Кто я? ...Looking for job… :) Учу писать на JavaScript и все еще учусь сама :)
  3. 3. Про доклад
  4. 4. О проекте
  5. 5. Что внутри? ➔ Java Backend ➔ React
  6. 6. Просто добавь в React ➔ Redux ➔ Redux-Saga ➔ Redux-Form ➔ React-Router ➔ Redux-Router ➔ Server-side rendering
  7. 7. Один мой день [JBL-932] Implement buying second ticket for social sharing
  8. 8. Один мой день ➔ Анализ существующего кода ➔ Планирование новых элементов Redux-инфраструктуры ➔ Планирование API новых компонент
  9. 9. Один мой день
  10. 10. Один мой день ❏ Код ❏ Еще код ❏ Тестирование в браузере ❏ Тестирование в Mobile Safari
  11. 11. Один мой день ❏ commit ❏ merge ❏ qa ❏ регрессия :(
  12. 12. Плюсы ➔ Предсказуемость ➔ Понятность ➔ Расширяемость ➔ Тестируемость
  13. 13. Плюсы #2 ➔ Простота ➔ Удобство отладки ➔ @dan_abramov ➔ Stack Overflow / Google
  14. 14. Оно тормозит
  15. 15. Структура данных Время обновляется каждую секунду вызывая перерисовку всего лобби
  16. 16. Иммутабельность
  17. 17. Иммутабельность
  18. 18. Иммутабельность
  19. 19. Денормализация Турнир Матч Время матча
  20. 20. Денормализация Турнир Матч Время матча
  21. 21. Было Стало
  22. 22. Проблемы денормализации ➔ Как загружать данные ➔ Как выгружать данные
  23. 23. Redux и Ко normalizr → ← reselect
  24. 24. Философия React UI = f(props, state)
  25. 25. componentWillReceiveProps componentWillReceiveProps(nextProps) { if (!this.props.bets && nextProps.bets) { // logic here } }
  26. 26. FLUX event есть event’а нет
  27. 27. React ≠ Reactive Event → React Event → Update → Render
  28. 28. Конкуренты 4.0!
  29. 29. Observable proposal stage 1
  30. 30. Observable proposal Меньше учить
  31. 31. Observable proposal Меньше boilerplate
  32. 32. Зачем нам redux?
  33. 33. Application State ➔ все ➔ все, но... ➔ все, и...
  34. 34. Простой рецепт ⚠ Application State REST Component 1 Store
  35. 35. Простой рецепт ✓ Application State Простой рецепт REST Component 1 Component 2 Store
  36. 36. Простой рецепт ✓ Application State Простой рецепт REST WS Component 1 Store
  37. 37. Простой рецепт ✓ Application State Простой рецепт REST WS Component 1 Component 2 Store
  38. 38. Вопросы?

×