現在のプロジェクトではVueを使っています。他のフレームワークを調査した結果のメモです。
#用語とか一般的な話とか
##用語
- データ 情報を表現したもの
- Model 加工したいデータ
- ViewModel 描画したいデータ
- DOM ブラウザが解釈する表示データ
- Event 外界から入力されたデータ
##一般的な話
情報処理の本質はデータを他のデータに変換することです。
フロント、バック、ゲーム、なんであろうがそこは変わりません。
フロントにおいて、プログラムは、
Event+Model -> DOM
の変換を行うものです。
ですが、この問題は一気に解くには大きすぎます。よって中間データを導入します。
Event+Model -> Model+ViewModel -> ViewModel+DOM -> DOM
これが情報を処理するという観点から見た、フロントの構造です。
#フレームワーク俯瞰
React.js
React.jsはViewModelからDOMへの単方向の変換を行うためのフレームワークです。
DOMから情報を読み込まないようにデザインされているため、必然的にDOM構築に必要な情報を 全て書き出してDOMに適用する 必要があります。ですが、これを真面目にやったらDOMのレイアウト再計算がゴリゴリ走ってえらいことになります。
これを解決するのがVirtual DOMになります。
また、ViewModelの分割は、Componentという単位です。これがツリー構造を成します。
構造を俯瞰すると、
Event+Model -> Model+ViewModel(Component Tree) -> ViewModel+DOM(Virtual DOM) -> DOM
です。
Cycle.js
Cycle.jsはEvent+ModelからViewModel+DOMへの変換を直感的に書けるようにデザインされたフレームワークです。
ViewModel+DOMはReact.jsと同じVirtual DOMです。 ViewModelの分割はプログラマの責務 です。いくらでもつないだり分割したり分岐したりできます。ここはRxJSの機能です。
構造は以下です。
Event+Model(Sources) ->
Model+ViewModel0 -> Model+ViewModel1 ... -> Model+ViewModelN
-> ViewModel+DOM(Virtual DOM、Sinksに含まれる)+Model(Sinks)
Polymer
PolymerはWebComponentsの上に乗っかった、Component志向のフレームワークです。
React.jsやCycle.jsとは趣が違い、ModelとViewModelの分割を強くフレームワークが規定します。
変わりに、Componentは更新に必要な全データにアクセスできる（るように分割し）ます。
Component0
Event+PartialModel0+ViewModel0 <-> DOM
Component1
Event+PartialModel1+ViewModel1 <-> DOM
...
ComponentN
Event+PartialModelN+ViewModelN <-> DOM
番外 jQuery
jQueryはEvent+Modelを直感的にDOMへ変換するためのライブラリです。Modelが複雑なSPAではむちゃくちゃになりますというかやめてください死んでします
#結局何が欲しいのか
Cycle.jsからPolymer Driverが使えれば最強じゃないでしょうか。
##理由
###Cycle.jsは副作用を全てドライバに丸投げする
設計上そうなっています。ドライバが出揃わないと厳しいです。
現状のDOMドライバは、現実問題に対する解としてはプリミティブすぎます。
###PolymerはModelがバラバラになる
ViewModelに引きずられて、解決したい問題を表現するModelがバラバラになります。それを嫌ってModelを分割しないと、今度は解くべき問題が大きすぎて苦しいです。
###ともに使えれば解決
Cycle.jsに足りないのはDriverを書くためのフレームワークです。
Polymerに足りないのはModelからViewModelへ変換するための分かりやすい仕組みです。
ここで両者の利害が一致しました。高いシナジーが生み出されそうです。
時間があれば作りたいです！！
React.jsは……？
いくつかの問題点が指摘されています。
- JSXという特殊構文
- 既存のフレームワークに対する親和性の低さ
- テンプレート不在による、デザイナ・コーダとの連携の難しさ
- etc...
この辺り全てはReact.jsが プラットフォームを志向しているため 起こります。
このせいで、React.jsのエコシステムから飛び出すのが難しいのです。
この欠点は利点でもあるので、利点と思えるのでしたら使ったら良いかと思います。