TodoMVC Meteor React with router, animations,..

I like the Meteor Blaze and Polymer libraries to manage the UI but when I’ve to deal with nested components I still didn’t find a way that satisfy me. React from Facebook is another alternative solution which works fine in Meteor and the official documentation already provide a pattern to deal with animations, components communication and native UI.

TLDR; TodoMVC in Meteor + React (source|live) inspired by TodoMVC in React (source)

Every time I see a new shiny web technology I ask to myself:

• How to deal with routing? Often a Single Page Application need different views with different requirements.
• How is possible to build isolated compoments and how do they communicate?

Another important topic is how to deal with data and states and where to make it persistent.

In realtime SPA, the data change for many different reason:

• Is this data available to the current URL path ?
• Is this data visible or filtered to the current view?
• Is this data allowed to the current user ?
• is this data displayed in a show view or on and edit view ?

Some decisions must to be taken client side, some others server side or both.

With TodoMVC is easy to get the big picture on common patterns, I’ve ported the TodoMVC React example to React + Meteor using grigio:babel, grove:react, meteorhacks:flow-router and here are the differences:

Persistance model level. Meteor with Minimongo/Mongo
Data Subscriptions. Can be managed at router level or component level. server-side visibility.
Routing. A router managed outside the componts.
<TodoApp/>The React component which manages a list of <TodoItem/>the persistance and client-side visibility.
<TodoItem/>The React component which manages the different rapresentation (show/edit).

If you want to know more, please have a look at the code :)