44
Data flow layer Захарченко Артем

Data flow layer. Захарченко Артем

  • Upload
    eatdog

  • View
    390

  • Download
    6

Embed Size (px)

Citation preview

Page 1: Data flow layer. Захарченко Артем

Data flow layerЗахарченко Артем

Page 2: Data flow layer. Захарченко Артем

Зачем мы делаем SPA?

1)Скорость отклика

2)Заимствование паттернов из десктоп мира

3)Перенос части логики на клиент

4)Рынок, требующий такие приложения

Page 3: Data flow layer. Захарченко Артем
Page 4: Data flow layer. Захарченко Артем

Networking

Page 5: Data flow layer. Захарченко Артем

Rendering performance

Page 6: Data flow layer. Захарченко Артем

Rendering performance

Page 7: Data flow layer. Захарченко Артем

Rendering performance

Page 8: Data flow layer. Захарченко Артем

Rendering performance

Page 9: Data flow layer. Захарченко Артем

CSS Triggers

Page 10: Data flow layer. Захарченко Артем

Вычисления

Page 11: Data flow layer. Захарченко Артем

Вычисления

Page 12: Data flow layer. Захарченко Артем

Вычисления

Page 13: Data flow layer. Захарченко Артем

Вычисления

Page 14: Data flow layer. Захарченко Артем

Garbage collection

Page 15: Data flow layer. Захарченко Артем

Who cares about M?

Page 16: Data flow layer. Захарченко Артем

js-data.io

Page 17: Data flow layer. Захарченко Артем

Side effects

Page 18: Data flow layer. Захарченко Артем

Data changing strategy1)Push/Pull Observer

2)Data binding (get/set)

3)Dirty checking

4)Immutable data structure

Page 19: Data flow layer. Захарченко Артем

Чем же является приложение?

Page 20: Data flow layer. Захарченко Артем
Page 21: Data flow layer. Захарченко Артем
Page 22: Data flow layer. Захарченко Артем
Page 23: Data flow layer. Захарченко Артем

Принципы• Single source of truth

• State is read-only

• Change are made with pure functions

Page 24: Data flow layer. Захарченко Артем

ReduxРазделение ответственности

• Отрисовка отображения

• Получение данных из action

• Изменения данных в reducer

Page 25: Data flow layer. Захарченко Артем

Redux

Page 26: Data flow layer. Захарченко Артем

Предполагаем, что ваши данные не будут мутировать

Что это значит?

Page 27: Data flow layer. Захарченко Артем

Состояние иммутабельно

Page 28: Data flow layer. Захарченко Артем
Page 29: Data flow layer. Захарченко Артем

Action

Page 30: Data flow layer. Захарченко Артем

Reducer

Page 31: Data flow layer. Захарченко Артем

Store

Page 32: Data flow layer. Захарченко Артем

Mutable vs ImmutableMutable

• Сравнения по значениям• Оптимизация платформ• Все знают как это

работает

Immutable• Сравнения по ссылке

• Дополнительные зависимости

• Падение производительности на маленьких объемах

• Надо обучать команду

Page 33: Data flow layer. Захарченко Артем
Page 34: Data flow layer. Захарченко Артем
Page 35: Data flow layer. Захарченко Артем

Как итог1)Достаточно простой концепт2)Простые функции и объекты3)Последовательная работа с данными4)Это не только о React.js5)Отличная интеграция с любыми библиотеками

Page 36: Data flow layer. Захарченко Артем

Behavior-Event-State-Tree (BEST)

Page 37: Data flow layer. Захарченко Артем

BEST

Page 38: Data flow layer. Захарченко Артем

BEST

Page 39: Data flow layer. Захарченко Артем

BEST

Page 40: Data flow layer. Захарченко Артем

MVI

Page 41: Data flow layer. Захарченко Артем

Intent

Page 42: Data flow layer. Захарченко Артем

Model

Page 43: Data flow layer. Захарченко Артем

View

Page 44: Data flow layer. Захарченко Артем

@Blackrabbit99