Reduxってこういう形のMVPか。矢印は誰が誰を知っているか
こうやって考えてるとReactの立ち位置について頭の中が整理されてくるな。
ReactではMVVMは成立しない。なぜならReactがデータバインディング機能を持っていないから(VとVMの関係はフレームワークが吸収することで成立する)。その代わりにこのようにMVC/MVPによってModelとの連携を構築することになっている。
逆にデータバインディングを提供しているフレームワークといえばVue, Svelte。これらはテンプレートを基にHTMLを生成する。テンプレートが静的なのでバインディング機能が成立する。だからストア機能をフレームワーク自体が持ち、それにバインディングするようにViewを書く、つまりMVVMの構造を実現している。
一方Reactはテンプレートを捨てることで、ifやloopといった制御構造をプレーンなJSに落とし込むことに成功した。JSなのでテンプレートの機能に制限されることなくHTMLを生成することができる。
SolidはReactを置き換えるような見た目をしながら、性質はSvelte側にあるのが面白いところ。見た目は同じだが、考えるべきアーキテクチャは若干変形させる必要がある。なぜならSolidはテンプレートベースだから……
Solidのさらにベースとなる dom-expressions https://github.com/ryansolid/dom-expressions
mobx-jsx、求めていたものだ!! https://github.com/ryansolid/mobx-jsx