Search code examples
model-view-controllerreactjsflux

MVC vs. Flux ? Bidirectional vs. Unidirectional?

Looking at the following diagram (which explains MVC), I see unidirectional data flow.

So why do we consider MVC to have bidirectional data flow while justifying Flux ?

MVC Pattern

Solution

  • Because in Javascript frameworks the MVC does not work the way you depicted. The UI generally communicates bi-directionally with the model, as in:

    1. User types into View input
    2. MVC framework binds onchange() to update a model.
    3. Ajax request brings in new model data.
    4. MVC framework updates View input's value to match model.

    In Flux architecture, the UI would only fire an independent action with type and associated data to a dispatcher which would then update the model the same way any background ajax method would update the model.

    Reference: http://www.thesoftwaresimpleton.com/blog/2013/03/23/client-side-mvc/

    "Client Side MVC is completely different than Server Side MVC"

    "We are setting up a two way communication between two objects..."

    "In short we are wiring together the value of the firstName property of the Person object to the value property of the input."

    http://guides.emberjs.com/v1.10.0/object-model/bindings/

    bindings in Ember.js can be used with any object, not just between views and models.