Flux vs MVC: Best Explanation

Flux vs MVC: Best Explanation

December 19, 2016

Flux architecture is the backbone of React.js. It's an alternative to MVC and other popular software design patterns. Facebook claims that it's superior in both scalability and readability. If you've used React or Angular 2, there's a good chance you've already designed an app using the Flux architecture.

As to whether or not the Flux pattern is superior to MVC remains debatable. Rather than explore which one is best, this article explains the key differences in Flux and MVC.

Unidirectional data flow

Angular is well known for its two-way data binding. When a user updates an input field on a view, the view directly updates the data model it represents. Likewise, when the model receives updates (via the controller) it propagates those changes to the presentation layer. This makes for bi-directional data flow, as the view and model are constantly kept in-sync.

Unlike MVC, the Flux pattern enforces a unidirectional data flow. A dispatcher receives user actions from the view and updates stores. These stores are similar to models in MVC, however they can contain multiple data objects. After receiving user actions from the dispatcher, each store updates the view(s) that are affected by the user action. It should be noted that application state is only handled in the stores. This maintains a strict separation between different parts of the app. This means that the view can't mutate the app's existing state directly. Rather, the view creates an actionable item that generates a new state. This new state replaces the current one only where necessary.

So What?

What makes unidirectional data flow so much better? While two-way data binding keeps an app's state closely bound to it's presentation layer, things can get out of hand fast when your app grows in complexity. One controller may have several models with several corresponding views. Advocates of Flux argue that this leaves apps prone to 'cascading events' and 'nested upates'. With bi-directional data flow, views can update models that unexpectedly trigger other models to update other view, etc. Things can get out of hand fast.

This makes a strong case for unidirectional data flow, as user actions only propagate changes from one direction. This is especially useful for larger apps with many models and views. Developers don't need to worry about how a new feature will affect other components. Instead they can focus on building independent features that respond to existing user actions / events.

Conclusion

The flux architecture has proven a legitimate alternative to MVC. While proponents of MVC argue that Flux is more or less 'reinventing the wheel', the Flux pattern clearly reduces the complexity of relationships between the data and presentation layer. Flux remains an integral part of the React.js library and can be used with Angular 2 as well.


Join the conversation...



Submit

MVC is great because it's been around for a long time and developers understand it. this makes it easy for any developer to jump into the angular world. flux is a more progressive concept dealing with state and dispatchers etc. this can be harder to understand but is ultimately easier to understand, especially as your code base grows. MVC is great and makes the two way data binding possible but also gets messy fast when you scale.
Posted by Robert Peterson on May 11, 2017
my thoughts are that MVC has been most popular design pattern for awhile now and isn't going away. unidirectional data flow sounds great and all, but having a closer relationship with the data your view is displaying makes things easier to account for. i don't know i just find angular 1 pretty easy to understand and that adheres strictly to an MVC like model.
Posted by Brad Burshaw on April 7, 2017
I started using React and Redux (another unidirectional architecture) just a few months ago. I find unidirectional data flow easier to think about and keep track of, even in simpler applications.
Posted by Josh Forman on February 28, 2017
agreed, thanks for the read stackchief!
Posted by Todd Raker on December 22, 2016
great read...
Posted by Sam Erickson on December 19, 2016


More by the stackchief