Why use Flux Architecture

JavaScript is everywhere these days with new frameworks and libraries coming out every month. Over the last couple of years React and Flux have grown immensely in popularity and according to Github trends the popularity continues to grow. Redux and with it’s Flux pattern is a new favorite for frontend projects.

You come to wonder why suddenly Flux architecture is becoming so important and mainstream. This article is an attempt to shine some light on the topic and hopefully clear some misconceptions.

React brings with it a new architecture called “Flux” that is used to manage the data flow in the application. A lot of newcomers confuse Flux to be a new framework but it simply is a new architecture that works on the concept of Unidirectional Data Flow. We will talk more about it later in the article. First lets understand how application state was managed prior to the introduction of Flux.

Bidirectional data flow pattern

Before Flux came along bidirectional data flow was very popular and widely used. AngularJs, a frontend MVC framework was developed by Google and released first in October 2010. It introduced Two-way data binding which followed bidirectional data flow model and it was magical back in the day when it was first released.

For many years, the MVC pattern has been the most popular choice for application architecture. In MVC pattern, Controller maintains both application state, and also acts as a glue between the model and view. Introduction of two-way data binding allowed automatically updating the view whenever the data model changes, and vice versa. UI elements were now able to directly mutate your model. This data flow pattern becomes increasingly difficult as your project grows and can lead to cascading updates. Also, mutating one model may trigger more updates.
As the state can be mutated by from multiple sources, the application state and data flow becomes unpredictable and hunting down bugs becomes difficult. All these issues led to the adoption of Flux and unidirectional data flow.

Unidirectional data flow pattern

In small applications managing the state is uncomplicated but as applications grow managing the application state becomes important and challenging.

Flux offers a way to simplify application state management using unidirectional data flow. Whenever a user interacts with the UI, it triggers some actions in the application view layer which in turn change the state of the application. The change in application state is propagated back to the view thus completing the cycle. This pattern of data flow is called Unidirectional Data Flow. Unidirectional data flow provides predictable application state by allowing data to flow in only one direction. It also makes it easy to find the source of bugs since data flows in a pipeline. Unlike the bidirectional model the view here does not change the application state directly.

Click the “Recommend” button below if you found value in this post (so I know if I should write more posts like this)

Related posts:

Alegal claim against Amazon guarantees that the organization neglected to uncover to its clients in New York City that they were being watched by facial acknowledgment innovation in its Amazon Go…

League of Legends has been around since 27/10/2009 and one of the most common questions asked is “how do I climb the ranked ladder?”. Of course there is already a tonne of advice out there; But of…

La prima nuova feature aggiunta agli Analytics è la divisione dei dati di vendita in temporanei e definitivi. Potrai sempre visualizzarli entrambi, per una maggiore trasparenza nel monitoraggio delle…