MVC Aint’ The Only Way To Be

I’m a web developer, so the MVC (Model View Controller) architecture has been my bread and butter for a long time. For me it started with PureMVC, then into Backbone, with brief forays into anything and everything else. Lately I’ve been playing with this little known combination of libraries called React and Redux (henceforth to be known as ReactDux), and it’s made me think about what else exists outside of the world of MVC. Functional programming, like you see in ReactDux, is a bit hard to wrap your head around if you’re used to thinking of things almost exclusively in terms of objects and variables that change. It’s taken me a while, but I think through practice I’ve finally got enough of a handle on things that I can start to put some words together about it. I’ll start with three words, then give three more, and we’ll see how that goes.

In addition to developing with ReactDux, I also teach the combination to students I mentor at Thinkful, an online coding bootcamp. Today I was working with a student on a ReactDux application, and they had tried to organize their code around three words. Three words I’ve uttered so many times in my career that I thought they encompassed the whole universe. Model, View, and Controller (MVC). When I started with ReactDux I tried to think of things this way too. I mapped Reducers to Models, Action Creators to Controllers, and Components to Views. I got away with this for a bit, but now I think it’s best to start fresh with a new vocabulary instead of shoehorning similar looking things into ill fitting categories.

Some New Verbage

ReactDux to MVC is a confusing analogy to work under; because Model, View, and Controller are nouns that describe persistent mutable objects that you can create instances of and observe. When you’re writing functional code most of the things you’re dealing with don’t stick around for long, and instead changes flow from one function call to another. So trying to describe what you’re doing in terms of persistent constructs is not informative as to what you should create. It’s a bit confusing because in JavaScript functions are themselves objects, but their real existence is as a behavior that only has meaning when they are called. They’re not nouns, they’re verbs.

Developing with ReactDux is the process of defining these verbs and letting the frameworks handle the nouns (Store and DOM). So the best TLA (Three Letter Acronym) I could come up with for the combination of ReactDux is not a set of nouns like MVC, but the verbs Do, Change, and Show (DCS). Unlike nouns which sit and exist across time, these verbs occur in a sequence through time, so in reality the acronym would be DCSDCSDCSDCS… on and on until the user closes the browser. But if we look at single cycle in this chain then DCS by itself is a good enough description.

Easy As ∞ / 3

const do = (data) => action

In the beginning there was nothing: no state, no action, nothing pretty to look at. Then the page loads, the browser springs to life, and you do something. Then your program stops, and as far as your code is concerned there’s nothing again. Then another event occurs, and you do something. In the first case with Redux the action that occurs is undefined, so it could be said that you didn’t actually do anything. But for subsequent events you do the doing. Maybe the user submitted a form and you create something on the server. Maybe the server sends a message over a socket and you assemble some data from it. Maybe you just pass along some value from an event to the next step. This is the realm of action creation and the action creator function, and whatever you do there’s a consequence, an artifact, and you send that along to the next step as an action. const change = (state, action) => state

Now something has happened, and we need to make some change to the data we were presenting to the user. This data is the state of your application. This is not to be confused with a model however, and change is not to be confused with mutation. State is a temporary thing that exists at a particular point in time, and it can’t be changed just like you can’t change the past. So given the previous state and some artifact of an event, we compute a new state for the application, and it is through creating new state that the illusion of change occurs. We call this behavior reduction and these functions reducers for the reason that state isn’t continuous and mutable, but instead a static aggregate of all the discrete actions that have occurred in our application up until this point in time. We take that aggregate, and pass it along to the next step as state. const show = (state) => dom

This state however is useless. It’s a set of values stored in memory and has no purpose other than to be shown to the user in some format. So now it’s time to create the interface of the application, and we do this by rendering the state with render functions. We can call these components, as they are called in React, but only in that they can be composed into a single function that takes state and returns a representation of what the page should look like given this particular state. wait.then(do)

There is no step 4…wait a bit and when something happens go back to step 1.

RIP MVC (for me anyway)

When you look at a ReactDux application as a composition of verbs ad infinitum instead of a discrete set of nouns, then I think the how and why inherent in the process of building applications with it becomes a bit more clear. When you’re done you’ve created two big composed functions (render and reduce), and a myriad of smaller functions (action creators) that allow your app to respond to events and do things in a fine grained way. Events occur, data flows (sometimes with a pause as the server does its thing), and the page is made anew over and over again.

So forget MVC and other noun based TLA’s when it comes to ReactDux, and try to organize your application around a few verbs instead. Hopefully you’ve been able to see what I’ve been trying to do here, I’ve been able to change your understanding, and now you can show others ReactDux in a new way.