React.js meetup #1 - connpassに参加して、Fluxアーキテクチャについて話してきました。

10分で実装するFlux - @azu

10分で実装するFlux というタイトルで発表してきました。

以前実装したmaterial-fluxをより小さくただのEventEmitterだけで実装したような内容になっています。

Fluxは図が複雑だったり、複雑そうな文章が出てきたりしますが、ミニマムな実装をするとやってることはよく見るようなものをある程度形式化しただけのように見えてきます。(Dispatcherが色々複雑な制御していますが)

そういうのを理解するために実際に作って見るとわかりやすいかもなーと思って10分で実装するFluxというスライドを書きました。

発表では触れなかったおまけでFluxライブラリの比較やよくある疑問とかもちょっと書いてました。

FluxのメンテナであるBill Fisherのreact-flux-fluent-2015 // Speaker Deckという発表が最近あったのでこちらも見てみるいいかもしれません。

mercury/mithril.js - @yosuke_furukawa

Mithrilのアプローチ
ローレベルのハックを持ってる
- startComputation
- // 複数の描画
- endComputation
- というような囲いを持ってるので、一回の描画で良くなる
vdom-thunkのアプローチ
- VDOMのtreeの探索範囲を限定することができる
- 探索範囲を限定することで更新コストを減らせる
まとめ
- Reactがやってることは設計と性能の共存
- さらに性能を上げることができる

kobitoの作った
テキストエディタ、プレビュー、記事一覧
問題
Fluxで画面遷移を表現できない
- Ardaを作った
- Contextって単位を作って、画面遷移をpush/popする
dangerouslySetInnerHtml
- 重たい
- iframeに突っ込む?
- 結局: Markdown -> React Elementに変換するコンパイラを書いた
- mizchi/md2react
- wooorm/mdastを使ってる
リストで移動中にプレビューを遅らせた
- 16ms以上毎回プレビューにかかると死ぬ
JSXの問題
- リストを書くのに.mapするのは難しい
- ReactElementを吐く関数をテンプレート(AltJSっぽい)
- インラインCSSが書きやすいようにした
React周辺のエコシステムの問題
- ポテンシャルがあるけどエコシステム的にまだ足りない
- なので色々作る必要があった

SPA+Ajaxでブログを作った
ググれない+タイトルがloadingになる
Javaでサーバサイドレンダリング
Java SEにはJavaScriptエンジンが入ってる
- Rhino
- Nashorn
サーバサイドのJavaからJavaScriptをevalして、Reactのサーバサイドレンダリングをする
コメント部分にサーバサイド固有の情報を入れる
- render(`/* {initial data} */)
- クライアント側でコメントとして無視される
- サーバサイドレンダリング時はデータが入る

React-wayに乗るのが重要なのでは
- 既存のDOMを扱うライブラリ扱いにくい
既存のツールは画像ベースが多くて扱いにくい
- Design in Browser
- ブラウザでデザインしちゃう人もいる
- => 最初からReact wayでComponentとして作ると良いのでは
コンポーネント志向 = UIデザインドリブン
- デザインを作るときにコンポーネントを考える
プロトタイピングツールの問題
- 実際の表示とは異なる…
PhotoshopのレイヤーをComponentへ
- Reactコンポーネント = レイヤー
- PhotoshopのレイヤーからReact Componentに吐き出すツールを書いた
まとめ
- サービスデザインは小さいところへのフォーカスがより重要になる
- Reactを使って小さいところ(Component)から作っていこう