ReactJS界隈の人に聞きたい、への返答

React.js界隈の人に聞きたい

mizchiさんの返答により一段落した感がありますが、自分もidコールされてたので自分の考えを返答しておきます、Qiitaに書くような事ではないのではてなブログを開設(はてなダイアリー:wordiの日記もあるけど長い事更新してないし今からならはてなブログの方が良い気がしたので)。

自分のブコメ

Backbone(&Marionette)に対するReactの利点は、構造に各Viewが縛られた構造変更時のView改築コストからの解放。SPAは必要なら。JSX嫌ならjadeを使うのも手。5年後React残ってるか知らんけど今だと有力候補、少なくともBackboneより良い


ここでは、自分のブクマの範囲である「何故React.jsを使うのか」と「Backbone.js(& Marionette.js)と比較してどうか」についてを掘り下げたいと思います。

jQueryではなくReact.jsを選定する基準について

サーバ・クライアントの計算・通信コスト等がありますが、ここでは開発時の筋の良さについて考えてみます。

jQueryを使うと現状態のDOMの取得・追加・更新が直感的に、かつ手軽に行えます、シンプルなページに何か小さな機能を加える、って程度ならjQueryがマッチするでしょう。

ただし、ここに状態を持ったデータが含まれると状況が変わってきます、jQueryが出来るのは現DOMに対しての差分の適用です、データ(MVCのMにあたる)をもとにDOM(MVCのVにあたる)に適用しようとする時、jQueryだけだと初回のDOM構築、途中の差分DOM更新とロジックが複雑化してくるでしょう、それを緩和する為にJsRenderやHandlebars、Jade等のテンプレートエンジンを使ってロジックから複雑さを排除し、Viewの冪等性を簡単に保障する仕組みが欲しくなるでしょう、jQueryの役目はここまでです。

jQueryでもFormへの入力内容やサーバからのレスポンス結果をデータとしてまとめ(例えば、モデルクラスに集約するとか)、適切にDOMを更新する仕組みは作れるでしょうが、それらをやってるのがBackbone.js(& Marionette.js)やReact.jsであり、それなら最初からBackbone.js(& Marionette.js)やReact.jsを使えって事になります。

Backbone.js(& Marionette.js)とReact.jsの比較

自分はBackbone.js(& Marionette.js)とReact.jsの両方で開発経験があり、その二つを比較した結果React.jsの方が開発しやすいと結論を出したのでReact.js推しです。

ちなみにどちらもデータの更新、Viewへの適用、View・サーバからのデータ取得のサイクル上ではほぼやってる事に大差はないです、Backbone.js(& Marionette.js)でも基底クラスの各Viewを用意して、

var AppBaseItemView = Backbone.Marionette.ItemView.extend({
  modelEvents: {
    'change': 'render',
  },
});
var AppBaseCompositeView = Backbone.Marionette.CompositeView.extend({ 略 });

これらを継承するようにすればthis.model.set()でrender()が発火したりと(ただし、配列等の参照型の場合はchangeイベントが発生しない為、明示的な発火が必要ですが)React.jsのsetStateとほぼ似たような使用感に近づける事が出来ます。

Backbone.js(& Marionette.js)で辛いのはレイアウト変更の時です、上記コードでも少し使ってますが、ViewにはItemView・CollectionView・CompositeView・LayoutViewがあり、レイアウトにより適切に使い分ける必要があります。

CompositeViewから直属のItemViewが無くなる、とかであればCollectionViewへの格下げや、ItemViewをnullにするとかでいいのですが、CompositeViewのItemViewもCollectionにしたい、って時には改めてLayoutViewを設け、Regionを用意し、CollectionViewを2つぶら下げる、というめんどくさい手順を踏む必要があります。

力技でぶら下げる事も出来ますが、そうすると冗長なコードが発生するし、意味不明な挙動が発生する要因にもなりかねるのであまりやりたくありません、最終的にBackbone.js(& Marionette.js)辛い、ってなります、React.jsではそういった煩わしさがありません。

まとめ

というわけで、そのページが状態を持ち始めた辺りからjQueryではなくReact.jsを使うってのが自分の意見です、ちなみにdomの改変コストについても質問されましたが、自分はロジック上で無駄な事はしていないか?、までは気にしますが、そこまで調査をしたわけではないので改変コストの分岐点はよく分かってないです、数十個くらいになるとvirtual domの方が速いんだろうなあ、とは思っていますが。

一応、React.jsを使う前にもベンチをとったりしてるので、その時のページを載せておきます。

ReactでshouldComponentUpdateを使ったチューニングの効果と注意どころ - Qiita