Flux Backbone Todos Example

Nov 25, 2014 BackboneFluxReactReactjsTodotodoMVC

This didactic Todo app was written to illustrate the Flux DSV (Dispatch Store View) design pattern.

Live Demo

Version 1.1.0 (30 November 2014), persist Todos to LocalStorage.
Version 1.0.0 (14 November 2014).

This post is a copy of the Github project README.

Flux is a design pattern for building scaleable applications using a Unidirectional Data Flow (it is not a Web development framework), the Flux library implements a Dispatcher which works well with the Flux design pattern.

The Todo app is implemented using Flux, Backbone and React.

Architecture and Implementation

The Flux/React combination results in a highly decoupled declarative application structure. Here is the actual code:

var dispatcher = new Flux.Dispatcher();
var todoStore = new TodoStore([], {dispatcher: dispatcher});
  
React.render(
    <div>
      <h3>Todos</h3>
      <TodoFormComponent store={todoStore} />
      <TodoListComponent store={todoStore} />
      <p>
      Want a second fully synchronized list? Just declare another list component: no code required,
      no events to wire up!
      </p>
      <TodoListComponent store={todoStore} />
    </div>,
    document.getElementById('app')
);

Just declare the Dispatcher, Store and View and you’re done. The Flux unidirectional Dispatcher->Store->View dependencies are obvious.

Displaying a second fully synchronized Todo list is a bit nonsensical but it graphically illustrates the power of the Flux architecture – try doing this in any other framework.

Data flow

Data flows unidirectionally in a circular path Dispatcher->Store->View->Dispatcher-> …:

The Store

Backbone is used to implement a pub/sub data store for the Todos list with Backbone Models and Collections (Backbone is not used as a development framework). Backbone unburdens the app from having to implement a pub/sub event emitter for the store (as well as providing a rich model/collection API).

Storing the component state in a mutative Backbone store instead of using an immutable component State object means we need to use the React forceUpdate API which could have performance implications for complex React UIs. See this excellent discussion explains the issue and, if necessary, strategies to resolve it. React does a great job of DOM update optimization so I would stick with the simplicity of using forceUpdate until confronted with a real use-case to the contrary.

TodoStore collection and TodoItem models are passed a Flux dispatcher when they are instantiated. TodoItem models are instantiated by the Backbone Collection add method which passes the dispatcher option to the TodoItem model’s initialize function.

Building and Running

The app is developed and built in a node/npm environment. To install and run:

  1. Make sure you have node and npm installed.

  2. Clone the Github repo:

    git clone https://github.com/srackham/flux-backbone-todo.git
    
  3. Install npm dependencies:

    cd flux-backbone-todo
    npm install
    
  4. Build the app app/bundle.js bundle (although JQuery is not required by Backbone I had to include it to satisfy webpack which thought it was a dependency):

    webpack
    
  5. Start the app in a server:

    npm start
    
  6. Open your Web browser at http://localhost:8888/.

Lessons learnt

« Previous Next »