Scaling

Making changes to your applications can often be a daunting task. Especially changing the UI. With the strategies and patterns explained in this WIKI you can move any component to any part of your UI as it does only depend on your tree and the event hub.

But lets take a look at the previous example, where we had our addTodo function. We have decided to trigger a notification whenever a todo is added successfully or an error occurs. This means that our "addTodo" event has two different jobs. Lets see how we would scale this.

main.js

var React = require('react');
var events = require('./events.js');
var App = require('./App.jsx');
var addTodo = require('./addTodo.js');
var notify = require('./notify.js');

// Since our addTodo function returns a promise we pass that
// to our notifier, setting a success and error message
events.on('addTodo', function (title) {
  notify(addTodo(title), {
    success: 'New todo added',
    error: 'Could not add new todo'
  });
});

React.render(<App/>, document.body);

The point of this example is to show how you think about scaling. Split up the logic and try at the best of your ability to give an overview of what happens when an event triggers. This makes your application code readable, as all intents to change state goes through this one file.