#Real Time Trader Desktop with Mithril, Node.js and Socket.io

This is my second instalment of recreating an App that Christophe Coenraets originally designed, with Mithril my favorite framework. Here is the original blog post from @ccoenraets.

##The App

Like React, Mithril uses a virtual DOM. It is also very easy to create components. Mithril is pure and plain javascript, so no need for JSX or a transpiler.

• Use of CSS syntax for inline styling when static
• Use of getter/setter m.prop()
• [TBD] Comments on Span
• Use of m.startComputation() and m.endComputation() in

		feed.onChange(function(stock) {
			m.startComputation();
			stocks[stock.symbol] = stock;
			ctrl.stocks(stocks);
			ctrl.last(stock);
			m.endComputation();
		});

You can check the end-result here

##Inspecting Browser Repaints

In the Chrome Dev Tools, check Show paint rectangles and Show FPS meter to inspect the DOM updates and the frame rate.

##Installing the Socket.io Version

The version running in this page uses a mock push service. To install the full Socket.io implementation:

1.Clone this repository

2.Open a command prompt and navigate to the application directory

cd mithril-trader

3.Install the dependencies

npm install

4.Run the server

node server

5.Run the application. Open a browser and access the following URL:

http://localhost:3000

##Additional resources:

My other tutorial using Mithril: Mithril Employee Directory

My Sublime package for easy autocompletion of most Mithril methods in Sublime Text: Mithrilizer

Other tutorials on Mithril by Gilbert @mindeavor here and here

Polythene is a library by Arthur Clemens using Mithril Components

Two open-source non-trivial applications using Mithril in production:

• Lichobile with source code using Mithril here
• Flarum with source code using Mithril here

Here you can read on how Toby Zerner made the transition from Ember.js to Mithril

Further resources can be found on the Mithril wiki