Flux-архитектура
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Согласно замыслу создателей и несмотря на то, что Facebook предоставил реализацию Flux в дополнение к React, Flux не является ещё одним веб-фреймворком, а является архитектурным решением.
Основные понятия править
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении[1].
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку[2]:
- Actions (действия)
- Stores (хранилища)
- Views (представления)
Хотя обычно между действиями и хранилищами добавляют Dispatcher (диспетчер),[3].
В первую очередь Flux работает с информационной архитектурой, которая затем отражается в архитектуре программного обеспечения, поэтому уровень представлений слабо зацеплен с другими уровнями системы[4].
Действия править
Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация является синхронным процессом[5][6]. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные[7].
Диспетчер править
Диспетчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами[8].
Хранилища править
Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища[9] (см. чистая функция).
Представления править
Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия[10].
Основные отличительные особенности править
- Синхронность: все методы обратного вызова, зарегистрированные для каждого действия, синхронны в исполнении, само же действие может вызываться источником асинхронно.
- Инверсия управления: поток управления передается соответствующему хранилищу и целевой функции обратного вызова.
- Семантические действия: действие, вызываемое источником, содержит смысловую информацию, позволяющую соответствующему хранилищу выбрать правильный метод выполнения.
- Отсутствие каскадов действий: Flux запрещает каскадные (вложенные) действия.[6]
Сравнение править
В сравнении с широко используемом, в том числе в веб-программировании, шаблоном «издатель — подписчик», Flux предлагает статическую структуру передачи сообщений, при которой сообщение получает каждый компонент. Компонент решает, что делать с этим сообщением. Это позволяет обойти некоторые архитектурные проблемы «издателя — подписчика», связанные с порядком оповещения компонентов при добавлении новых компонентов (проблемы масштабирования), а также с дополнительной сложностью, связанной с подпиской и отказом от подписки в течение жизненного цикла компонентов, при котором возможна потеря значимых для компонента сообщений[11].
Реализации править
В настоящее время одной из наиболее популярных реализаций Flux-архитектуры является библиотека Redux. Кроме того, Facebook поставляет программный модуль под названием Flux, реализующий в числе прочего диспетчер, для использования совместно с ReactJS.
Другой реализацией Flux является Fluxxor, разработанный Брандоном Тилли (англ. Brandon Tilley)[12], а также Reflux[13].
Смотрите также править
Примечания править
- ↑ Boduch, 2016, Data flow direction.
- ↑ Stefanov, 2016, Flux.
- ↑ Overview. Дата обращения: 17 июля 2016. Архивировано из оригинала 20 июля 2016 года.
- ↑ Boduch, 2016, Loosely coupled rendering.
- ↑ React: Building Modern Web Applications, 2016, The Flux Architecture.
- ↑ 1 2 Patel, 2015.
- ↑ Boduch, 2016, Action.
- ↑ Boduch, 2016, Dispatcher.
- ↑ Boduch, 2016, Store.
- ↑ Boduch, 2016, View.
- ↑ Boduch, 2016, Consistent notifications.
- ↑ Hayward, 2015.
- ↑ Eisenman, 2015.
Литература править
- Adam Boduch. Flux Architecture. — Packt Publishing, 2016. — 352 с. — ISBN 978-1-78646-581-8.
- Sandeep Kumar Patel. The flux architecture // Learning Web Component Development. — Packt Publishing, 2015. — 256 с. — ISBN 978-1-78439-364-9.
- Jonathan Hayward. Reactive Programming with JavaScript. — Packt Publishing, 2015. — 264 с. — ISBN 978-1-78355-170-5.
- Doel Sengupta; Manu Singhal; Danillo Corvalan. Getting Started with React. — Packt Publishing, 2016. — 212 с. — ISBN 978-1-78355-057-9.
- Cássio de Sousa Antonio. Pro React. — Apress, 2015. — 320 с. — ISBN 978-1-4842-1261-5.
- Stoyan Stefanov. React: Up & Running. — O'Reilly Media, Inc., 2016. — 250 с. — ISBN 978-1-4919-3182-0.
- Jonathan Hayward; Artemij Fedosejev; Narayan Prusty; Adam Horton; Ryan Vice; Ethan Holmes; Tom Bray. React: Building Modern Web Applications. — Packt Publishing, 2016. — 910 с. — ISBN 978-1-78646-226-8.
- Bonnie Eisenman. Learning React Native. — O'Reilly Media, Inc., 2015. — 200 с. — ISBN 978-1-4919-2900-1.