frontdays #1. Алексей Ульянов, react.js и методологии разработки...
TRANSCRIPT
и методологии разработки
Алексей УльяновLead Developer at Weblime
Знакомьтесь, React.Это не очередной фреймворк
Знакомьтесь, React.Но библиотека для создания
пользовательского интерфейса (UI).
Знакомьтесь, React.Отдаёт ваш UI и реагирует на события.
Знакомьтесь, React.Это "V" в MVC
Ре-рендер, не мутации
Создавайте компоненты, а не шаблоны
Быстрый виртуальный DOM
React не имеет...... контроллеров
... директив
... шаблонов
... глобальных слушателей событий
... моделей
Только компоненты!
Но компоненты надо как-то организовать
методология FLUX
Для начала, надо понять какую боль она решает
Цикличность ошибок
Представления обновляют модели. Модели обновляют другие модели.
Flux решает эти проблемы.
Однонаправленный поток данных
Однонаправленный поток данных
Action- Передача данных в Dispetcher - Запросы к API
Dispetcher- Передача данных в Store
Store- Информировать view (представления) - Хранить состояние
View- Получение данных - Отображение данных
Как это выглядит в реальной жизни
Отображение данных Обработка пользовательских данных
Мы запустим поток данных через действие пользователя.
Поток данныхОтображение данных
Обработка пользовательских данных
1. View (представление) говорит создателю action (действия) выполнить его.
Поток данныхОтображение данных
Обработка пользовательских данных
2. Создатель action (действия) форматирует его и отправляет dispetcher (диспетчеру).
Отображение данных Обработка пользовательских данных
3. Dispetcher (диспетчер) отправляет действие store (хранилищам) последовательно.
Отображение данных Обработка пользовательских данных
4. Как только состояние изменилось, store (хранилища) дает об этом знать всем подписанным на него контроллерам.
5. Эти контроллеры затем запросят у store (хранилища) обновленное состояние.
Отображение данных Обработка пользовательских данных
6. После того как store (хранилище) отдает состояние, контроллер передаст его дочерним view (представлениям)
запрос на повторное отображение согласно новому состоянию.
Звучит здорово? Давайте взглянем на Redux
методология REDUX
Какие проблемы решает 1. Код хранилищ не может быть перезагружен
без обнуления состояния
Какие проблемы решает 1. Код хранилищ не может быть перезагружен
без обнуления состояния
РЕШЕНИЕПросто разделите эти две функции.
Какие проблемы решает 2. Состояние перезаписывается
при каждом действии
Какие проблемы решает 2. Состояние перезаписывается
при каждом действии
РЕШЕНИЕСкопируйте состояния и примените
изменения к копии.
Какие проблемы решает 3. Нет правильных “мест” для сторонних плагинов
Какие проблемы решает 3. Нет правильных “мест” для сторонних плагинов
РЕШЕНИЕСделать легким “оборачивание” частей системы в
другие объекты.
Редьюсеры (The reducers)Отображение данных, обработка пользовательских данных.
Когда хранилище хочет узнать, как действие изменяет состояние, оно спрашивает reducer (редьюсеры).
Отображение данных Обработка пользовательских данных
Как это работает 1. Подготовить хранилище. Корневой компонент создаёт хранилище, говоря ему, какой корневой
редьюсер использовать
Отображение данных Обработка пользовательских данных
Как это работает 2. Установить связь между хранилищем
и компонентами.
Как это работает 3. Подготовить обратные вызовы для действий.
Отображение данных Обработка пользовательских данных
Что ещё?• Простота и предсказуемость
• Мало магии
• Линейное масштабирование
• Малое количество абстракций
• Boilerplate
