Другое

Flux-архитектура: определение, применение и отличительные характеристики

Lorem ipsum dolor

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

React и Flux идут рука об руку. Напомним, что React — это фреймворк на основе JavaScript, который был разработан компанией Фейсбук и используется во фронтенд-разработке. Реакт является достаточно гибким и популярным инструментом. Но что же такое Flux-архитектура?

Flux-архитектура

Большинство пользователей знакомо с таким подходом в программировании, как MVC или Model, View, Controller. При проектировании приложений по такой модели React будет отвечать за «V», «View» или «представление». Простыми словами, Реакт будет отвечать за внешний интерфейс приложения. В этом случае Flux будет отвечать за «М» или «Model», что означает шаблон, по которому будет происходить проектирование приложения и связывание всех его модулей. Однако MVC и Flux это разные подходы в разработке.

По сути, Flux отвечает за создание слоя данных в JavaScript-приложениях, а также за работу серверной части.

Из чего состоит Flux-архитектура

Flux-архитектура состоит из 4 важных компонентов:

  1. «Actions», они же «действия» это помощники, которые упрощают передачу информации «диспетчеру».

  2. «Dispatcher», он же «диспетчер» компонент, который обрабатывает информацию от «actions». По сути, он является «менеджером» приложения, потому что он принимает входящие действия и распределяет их среди разработчиков.

  3. «Stories», они же «хранилища» компоненты, которые сохраняют состояние приложения и его бизнес-логику. Вся работа приложения сосредоточена именно здесь. Внутри «хранилищ» хранятся: информация, методы, функции и обработчики «действий».

  4. «Controller Views», они же «представления» это компоненты от Реакт, которые определяют состояние приложения, основываясь на бизнес-логику из «хранилищ».

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

  1. В поле «action» возникает какое-то взаимодействие с приложением.

  2. «Action» вызывает специальные методы, которые задают константы этим взаимодействиям и отправляют их в «диспетчер».

  3. «Диспетчер» обрабатывает полученное событие. Он различает полученное событие по его источникам. После обработки события он отправляет его ко всем зарегистрированным обработчикам событий, то есть в «хранилище».

  4. «Хранилище» получает данное событие и определяет ему обработчика. Далее «хранилище» реагирует на полученное событие и создает другое событие «changed», которое определяет состояние приложения как ответ на взаимодействие с ним.

  5. «Представление» «слушает» «хранилище» и, как только обнаруживает событие «changed», тут же на него реагирует, обновляя себя и собственные React-компоненты.

Это описание одного цикла. Но цикл каждый раз повторяется, когда в поле «action» происходит какое-то взаимодействие с приложением.

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

Flux-архитектура и React

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

Некоторым пользователям нравится применять Flux-архитектуру, но не нравится работать с React. Что же, и тут есть решение — использовать Flux-фреймворк или фреймворк Delorean. Также можно воспользоваться библиотекой Fluxor, которая поддерживает Flux-архитектуру, но использует более жесткую взаимосвязь между компонентами этой архитектуры.

Заключение

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

Большинство приложений сделано по архитектуре MVC, однако эта архитектура была придумана еще в 1976 году и морально начинает устаревать. Например:

  • приложения в такой архитектуре сложнее масштабировать;

  • она сложнее переносит огромную базу кода;

  • сложнее управляет кодом приложения;

  • разнообразная реализация потоков данных, что приводит к более сложному поиску возникающих ошибок;

  • более сложная структура;

  • и др.

Flux-архитектура лишена этих недостатков.

Схожие статьи

Ченджлог или журнал изменения проектов: нужно использовать или нет?
Другое

Ченджлог или журнал изменения проектов: нужно использовать или нет?

Генератор HTML кода: фон, фигуры, анимации, таблицы и другие элементы
Другое

Генератор HTML кода: фон, фигуры, анимации, таблицы и другие элементы

Перехват сообщений WhatsApp: как читать чужую переписку в WhatsApp
Другое

Перехват сообщений WhatsApp: как читать чужую переписку в WhatsApp

Инди-игры и их разработчики: чем интересно и почему стоит попробовать
Другое

Инди-игры и их разработчики: чем интересно и почему стоит попробовать