Download - Data flow layer. Захарченко Артем
![Page 1: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/1.jpg)
Data flow layerЗахарченко Артем
![Page 2: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/2.jpg)
Зачем мы делаем SPA?
1)Скорость отклика
2)Заимствование паттернов из десктоп мира
3)Перенос части логики на клиент
4)Рынок, требующий такие приложения
![Page 3: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/3.jpg)
![Page 4: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/4.jpg)
Networking
![Page 5: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/5.jpg)
Rendering performance
![Page 6: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/6.jpg)
Rendering performance
![Page 7: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/7.jpg)
Rendering performance
![Page 8: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/8.jpg)
Rendering performance
![Page 9: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/9.jpg)
CSS Triggers
![Page 10: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/10.jpg)
Вычисления
![Page 11: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/11.jpg)
Вычисления
![Page 12: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/12.jpg)
Вычисления
![Page 13: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/13.jpg)
Вычисления
![Page 14: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/14.jpg)
Garbage collection
![Page 15: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/15.jpg)
Who cares about M?
![Page 16: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/16.jpg)
js-data.io
![Page 17: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/17.jpg)
Side effects
![Page 18: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/18.jpg)
Data changing strategy1)Push/Pull Observer
2)Data binding (get/set)
3)Dirty checking
4)Immutable data structure
![Page 19: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/19.jpg)
Чем же является приложение?
![Page 20: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/20.jpg)
![Page 21: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/21.jpg)
![Page 22: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/22.jpg)
![Page 23: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/23.jpg)
Принципы• Single source of truth
• State is read-only
• Change are made with pure functions
![Page 24: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/24.jpg)
ReduxРазделение ответственности
• Отрисовка отображения
• Получение данных из action
• Изменения данных в reducer
![Page 25: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/25.jpg)
Redux
![Page 26: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/26.jpg)
Предполагаем, что ваши данные не будут мутировать
Что это значит?
![Page 27: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/27.jpg)
Состояние иммутабельно
![Page 28: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/28.jpg)
![Page 29: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/29.jpg)
Action
![Page 30: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/30.jpg)
Reducer
![Page 31: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/31.jpg)
Store
![Page 32: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/32.jpg)
Mutable vs ImmutableMutable
• Сравнения по значениям• Оптимизация платформ• Все знают как это
работает
Immutable• Сравнения по ссылке
• Дополнительные зависимости
• Падение производительности на маленьких объемах
• Надо обучать команду
![Page 33: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/33.jpg)
![Page 34: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/34.jpg)
![Page 35: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/35.jpg)
Как итог1)Достаточно простой концепт2)Простые функции и объекты3)Последовательная работа с данными4)Это не только о React.js5)Отличная интеграция с любыми библиотеками
![Page 36: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/36.jpg)
Behavior-Event-State-Tree (BEST)
![Page 37: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/37.jpg)
BEST
![Page 38: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/38.jpg)
BEST
![Page 39: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/39.jpg)
BEST
![Page 40: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/40.jpg)
MVI
![Page 41: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/41.jpg)
Intent
![Page 42: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/42.jpg)
Model
![Page 43: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/43.jpg)
View
![Page 44: Data flow layer. Захарченко Артем](https://reader035.vdocuments.site/reader035/viewer/2022062522/586f8f4b1a28ab54768b74e7/html5/thumbnails/44.jpg)
@Blackrabbit99