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