React

Facebookが作成した、データバインディングができるUIライブラリ（フレームワークではない）。

ポリシー

  1. Just the UI
  2. Virtual DOM
  3. Data Flow

JUST THE UI

React自体は、UI-Componentを作るためだけに存在する。MVCのViewの部分のみを担当する。従ってReactはフレームワークではなく、UIライブラリである。ほかのフレームワークに差し込んで利用することも可能。

  • React公式のフレームワークは、flux
  • Backboneなどでも利用可能

VIRTUAL DOM

JSで表現できる仮想的なDOMを持つ（ブラウザのDOMとは別に）。Reactの最も特徴的な機能のひとつ。バインドされたデータが更新されたとき、Reactはまず仮想DOMを変更し、仮想DOMの変更があった時だけブラウザDOMを書き換える。差分のみを更新するため描画コストが非常に小さくなるのが妙味。これによって圧倒的なパフォーマンスを実現している。

  • Virtual DOMの概念を強力に応用すると、ブラウザを使わずともDOMを表現できる。例えばVirtual DOMをHTMLテキストに書きだせば、それを使ってサーバサイドレンダリングが出来る
  • さらに面白いのは、これをCanvasに書きだしたり、スマホのネイティヴUIに書きだしたりできるライブラリがあること（react-canvas@flipboard, React-Native@Facebook, react-blessed for CUI）
  • 私としては、これをハードウェアに書き出すことだって出来ると考えている。RasPiなどを使って、そのうちやるつもり。Arduinoのfirmata向けにはすでにあるみたい（react-hardware）

DATA FLOW

Reactは単一方向のデータフローを持つ。このためデータの波及が非常に推測しやすい。ReactはComponentの親子関係が明確で、子が親のデータを書き換えることはない（やりたい場合はメッセージングで親を書き換える）。

  • これを忠実に守るための仕組みが、flux