Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений , сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.

Согласно замыслу создателей и несмотря на то, что Facebook предоставил реализацию Flux в дополнение к React , Flux не является ещё одним веб-фреймворком , а является архитектурным решением.

Основные понятия

Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении .

В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку :

• Actions ( действия )
• Stores ( хранилища )
• Views ( представления )

Хотя обычно между действиями и хранилищами добавляют Dispatcher ( диспетчер ), .

В первую очередь Flux работает с информационной архитектурой, которая затем отражается в архитектуре программного обеспечения , поэтому уровень представлений слабо зацеплен с другими уровнями системы .

Действия

Действия ( англ. actions ) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация является синхронным процессом . Кроме имени ( англ. name ), действия могут иметь полезную нагрузку ( англ. payload ), содержащую относящиеся к действию данные .

Диспетчер

Диспетчер ( англ. dispatcher ) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами .

Хранилища

Хранилище ( англ. store ) является местом, где сосредоточено состояние ( англ. state ) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища (см. чистая функция ).

Представления

Представление ( англ. view ) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия .

Основные отличительные особенности

• Синхронность : все методы обратного вызова, зарегистрированные для каждого действия, синхронны в исполнении, само же действие может вызываться источником асинхронно.
• Инверсия управления : поток управления передается соответствующему хранилищу и целевой функции обратного вызова.
• Семантические действия : действие, вызываемое источником, содержит смысловую информацию, позволяющую соответствующему хранилищу выбрать правильный метод выполнения.
• Отсутствие каскадов действий : Flux запрещает каскадные (вложенные) действия.

Сравнение

В сравнении с широко используемом, в том числе в веб-программировании, шаблоном « издатель — подписчик », Flux предлагает статическую структуру передачи сообщений, при которой сообщение получает каждый компонент. Компонент решает, что делать с этим сообщением. Это позволяет обойти некоторые архитектурные проблемы «издателя — подписчика», связанные с порядком оповещения компонентов при добавлении новых компонентов (проблемы масштабирования), а также с дополнительной сложностью, связанной с подпиской и отказом от подписки в течение жизненного цикла компонентов, при котором возможна потеря значимых для компонента сообщений .

Реализации

В настоящее время одной из наиболее популярных реализаций Flux-архитектуры является библиотека Redux. Кроме того, Facebook поставляет программный модуль под названием Flux, реализующий в числе прочего диспетчер, для использования совместно с ReactJS .

Другой реализацией Flux является Fluxxor, разработанный Брандоном Тилли ( англ. Brandon Tilley ) , а также Reflux .

См. также

• Elm (язык программирования)

Примечания

Литература

• 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 .

Ссылки

• , Facebook