Image for post
Image for post

Flux vs. MVC (Design Patterns)

Amir Salihefendic
Feb 9, 2015 · 5 min read

A look at how Facebook’s Flux pattern solves things differently, especially in relation to the Model-View-Controller (MVC) pattern.


Facebook recently released Flux, a new pattern to structure client side applications. In this article I’ll take a look how it relates to the MVC pattern and why I think it could be as interesting as React itself.

In 2011 I looked at the history behind the model-view-controller pattern and how different companies and projects used it. You may want to check it out as it’s a great introduction to understanding the domain that Flux operates in.

The MVC pattern

Historically there has been a lot of MVC patterns that each do things a bit differently. In general most MVC patterns considers three roles:

The core ideas of MVC can be formulated as following:

MVC Problems

MVC is a legendary pattern that has been used for various projects since 1976 (it was introduced in Smalltalk-76). It has stood the test of time and most of the biggest projects still use it today. Why even try to replace it?

MVC did not scale well for Facebook’s huge codebase. The main problem for them was the bidirectional communication, where one change can loop back and have cascading effects across the codebase (making things very complicated to debug and understand).

How does Flux solve this? By forcing an unidirectional flow of data between a system’s components.

In general the flow inside the MVC pattern is not well defined. A lot of the bigger implementations do it very differently (e.g. Cocoa MVC vs. Ruby on Rails MVC).

Flux on the other hand is all about controlling the flow inside the app — and making it as simple to understand as possible.

The core of the Flux pattern

Flux has four roles: actions, stores, the dispatcher and views. Their responsibilities can be defined as following:

The general flow of a Flux application can be defined as following:

Image for post
Image for post

The most important thing to note is that every change goes via an action through the dispatcher, illustrated like this:

Image for post
Image for post

So how is Flux different from MVC?

Code examples

In the next section I’ll show a simple counter example using a Cocoa’s MVC pattern and one using Flux. They are both implemented in CoffeeScript.

These examples should make it easier for you to understand how the code works like and how the general structure is.

Cocoa’s MVC

Should be pretty straight forward. A lot of other GUI MVC’s follow a similar convention like Cocoa’s.

Illustrated the flow of the Cocoa example looks like this:

Image for post
Image for post

Flux and React

This below code isn’t tested, but it should give a clear idea of how the different roles work like inside the Flux system.

Illustrated the Flux flow looks like this:

Image for post
Image for post

Is Flux better than MVC?

We are still very early in the process to determine this. This said, it’s awesome that we have a new pattern that challenges MVC and the old way of doing things. Given that this pattern comes from Facebook is a great sign, since they have smart people working on this and their codebase is huge and spread around many different products.

At Doist we are using Flux and React for a larger project and the codebase so far looks very clean and is a pleasure to work with.

In general, I am more impressed with Flux than with React. The reason is that Flux is very simple to understand and there is almost no code for it—it’s just a way to better structure your app. React meanwhile has a huge codebase and a huge runtime complexity that I am not a huge fan of.

Hacking and Gonzo

Hacking and startups. A publication by Amir Salihefendic.

Amir Salihefendic

Written by

Remote-first CEO of @Doist, the company behind @Todoist and @TwistAppTeam. Born in Bosnia, grew up in Denmark and now living in Barcelona. New dad.

Hacking and Gonzo

Hacking and startups. A publication by Amir Salihefendic.

Amir Salihefendic

Written by

Remote-first CEO of @Doist, the company behind @Todoist and @TwistAppTeam. Born in Bosnia, grew up in Denmark and now living in Barcelona. New dad.

Hacking and Gonzo

Hacking and startups. A publication by Amir Salihefendic.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store