В наши дни JavaScript повсюду, и каждый месяц появляются новые фреймворки и библиотеки. За последние пару лет популярность React и Flux сильно выросла, и, согласно тенденциям Github, популярность продолжает расти. Redux, а вместе с ним и шаблон Flux - новый фаворит для фронтенд-проектов.
Вы задаетесь вопросом, почему внезапно архитектура Flux становится такой важной и популярной. Эта статья - попытка пролить свет на эту тему и, надеюсь, развеять некоторые заблуждения.
Что такое архитектура Flux?
React был разработан командой Facebook и впервые выпущен в марте 2013 года. React подходит как уровень представления (V) в традиционной концепции MVC. Он невероятно быстро обрабатывает изменения всякий раз, когда изменяется состояние приложения. Это достигается с помощью концепции Virtual DOM. Подробнее о концепции Virtual DOM вы можете прочитать здесь.
React предлагает новую архитектуру под названием «Flux», которая используется для управления потоком данных в приложении. Многие новички путают Flux с новой структурой, но это просто новая архитектура, которая работает на концепции однонаправленного потока данных. Подробнее об этом мы поговорим позже в статье. Сначала давайте поймем, как управлялось состояние приложения до появления Flux.
Шаблон двунаправленного потока данных
До появления Flux двунаправленный поток данных был очень популярен и широко использовался. AngularJs, внешняя среда MVC, была разработана Google и впервые выпущена в октябре 2010 года. Она представила двустороннюю привязку данных, которая следовала модели двунаправленного потока данных, и это было волшебно еще в те дни, когда она была впервые выпущена.
В течение многих лет шаблон MVC был самым популярным выбором для архитектуры приложений. В шаблоне MVC контроллер поддерживает как состояние приложения, так и действует как связующее звено между моделью и представлением. Введение двусторонней привязки данных позволило автоматически обновлять представление при изменении модели данных, и наоборот. Элементы пользовательского интерфейса теперь могут напрямую изменять вашу модель. Этот шаблон потока данных становится все сложнее по мере роста вашего проекта и может привести к каскадным обновлениям. Кроме того, изменение одной модели может вызвать больше обновлений.
Поскольку состояние может изменяться из нескольких источников, состояние приложения и поток данных становятся непредсказуемыми, и поиск ошибок становится затруднительным. Все эти проблемы привели к принятию Flux и однонаправленного потока данных.
Шаблон однонаправленного потока данных
В небольших приложениях управление состоянием несложно, но по мере роста приложений управление состоянием приложения становится важным и сложным.
Flux предлагает способ упростить управление состоянием приложения с помощью однонаправленного потока данных. Всякий раз, когда пользователь взаимодействует с пользовательским интерфейсом, он запускает некоторые действия на уровне представления приложения, которые, в свою очередь, изменяют состояние приложения. Изменение состояния приложения распространяется обратно в представление, завершая цикл. Этот шаблон потока данных называется однонаправленным потоком данных. Однонаправленный поток данных обеспечивает предсказуемое состояние приложения, позволяя данным перемещаться только в одном направлении. Это также упрощает поиск источника ошибок, поскольку данные передаются по конвейеру. В отличие от двунаправленной модели представление здесь не изменяет состояние приложения напрямую.
Надеюсь, вам понравился пост, если он вам понравился, напишите мне в Twitter или напишите мне!
Нажмите кнопку «Рекомендовать» ниже, если вы нашли ценность в этом сообщении (чтобы я знал, стоит ли мне писать больше подобных сообщений)
