Sample todo app implementing socket.io with React & Flux

There are already a lot of tutorials online on react & flux, so will keep this short and simple. Screenshot of the end result

> _`Todo1` & `Todo2` are added using the text field, whereas The [`Date.now()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now) items are added by socket.io. These are being emitted from the [`server.js`](https://github.com/amritb/socketio_todo/blob/master/server.js) file every 5 seconds._

Installation

git clone git@github.com:amritb/socketio_todo.git
cd socketio_todo
npm install

I have used webpack as it's very simple to use coming from an node.js background (Webpack lets you write modular frontend code just like we do in node.js using require() calls). The frontend is seperate from backend server.js code for simplicity. Hence you will find two package.json files, one in the root and another inside frontend directory.

To build the frontend js files

cd frontend
npm install
npm run build

npm will run webpack to generate plain javascript. It will create a build.js file in the frontend/public directory.

To run the app, first run the server (it will run it using nodemon - and keeps watching your files)

cd ..
npm start

This node server will serve the frontend static files index.html and build.js. You can now access the app from http://localhost:8080

Explanation

React is pretty simple to learn. Its just the view of MVC. You create components and attach necessery actions (e.g. add_item, remove_item, etc.). The components know which action to trigger when something chnages. The react components have no connection to the store. All the interactions happens via actions-dispatcher.

The actions will require the dispatcher and dispatch events. Dispatcher has nothing much going on, it just sits in between.

The store does a lot of heavy lifting. It holds the data and its operations. It has a AppDispatcher.register which checks the actions and routes them. It also emits a change event so that the componets can re-render with new data.

Basically this is how the flow goes Component -> Action -> Dispatcher -> Store -> Component.

Now, the components are not the only ones who can trigger an action. It can be anything, like a server event received via WebSockets.

Our socketio.js file does exactly that. Whenever it receives a massage, it triggers the relevant action.