Migrate to ReactJS

[msakuta]

Since there are fair amount of HTML elements that build up user interface, we should use components to organize them.

[msakuta]

It turned out that ReactJS is not very efficient in this kind of application, because the simulation state changes rapidly (at most 60fps). The state should be updated by recreating the whole component tree, which involves creating/deleting a lot of objects. Although React uses virtual DOM to keep actual DOM from being deleted, recreating the whole virtual DOM seems to be slower than updating only necessary parts of existing DOM. I profiled with Chrome's devtools, and ReactJS seems to make update 2x slower. My guess is that the browsers do this kind of optimization to keep DOM alive and reuse them as much as possible already, so rewriting (especially through innerHTML) is almost as fast as virtual DOM approach.

Of course, if we make all the states into React component state, the whole virtual DOM doesn't need to be recreated, instead they would propagate through properties, but the simulation state does not fit that style.

This is caused by the nature of ReactJS that every component needs to be immutable. If we use Vue.js instead we may not suffer from this problem.

[msakuta]

Benchmark: before ReactJS

Benchmark: after ReactJS