@hokaccha
アジェンダ
- React.js
- Virtual DOM
- JSX
- Server Side Rendering
- Flux
- Flow
React.js
A JavaScript library for building user interfaces | React
事例
- FB
- Yahoo
- Atom
React.jsの特徴
- ステートレスなコンポーネント設計
- VirtualDOM
- JSXシンタックス
いままでだと
- 状態がDOMにしかない
- 拡張しづらい
- 管理しづらい
- テストしづらい
backboneだと
- Viewはコンポーネントに分けて
データやロジックはModelに持とう
変更の適用を手で書くつらさ
- イベント地獄
- 薄いフレームワーク(自由度の高さは利点だけど、そのぶん実装がつらくなる)
Angular Vue
- 表示はすべてViewModelにもとに構築しよう
- データが変わったら勝手に表示も変われ
UIが変わったらデーtあも勝手に変われ
コンポーネントごとに状態を持つつらさ
- アプリケーションが複雑になるとつらい
React
(いろいろな問題点をどうやってReactで解決するのか)
- データが変わったら表示も勝手に変われ
Stateless Component
TODO LIST
- ステートは持っていたほうが自由度が高い
- でもステートを持つと大規模開発になるとつらい
状態を持たせないことである程度管理しやすくなる
テスト可能
- メンテナンス可能
- 再利用可能
Statefull Stateless
- 一番上の親のみに状態をもたせる(親からもらったデータをもとにレンダリングする)
親のデータを更新して、子に反映させる
データを元にViewを構築
- ユーザーのアクション
サーバーサイドと同じ考え方。でも速度とのジレンマが存在する。親からデータを再構築するから遅い。
→VirtualDOM
- JavaScriptのオブジェクトとしてDOMのような構造
- データに変更があるとどの部分を変更しないといけないか計算
- 必要な部分だけ実際のDOMに適用する
React.jsって早いんでしょ？
半分正しい。
- データの変更→更新分だけDOMに反映
- データの変更→DOMツリーごとまるごと更新
- データの変更→差分計算→更新分だけDOMを更新
変更があったら書き換えるけどDOMには反映しない。
ベンチマークを取ると、Reactが一番早い。(それがうまみ)
Reactは設計と速度が両立できる。(簡単に設計できるのに早い)
Virtual DOM実装
Matt-Esch/virtual-dom · GitHub
JSX
JSX - a faster, safer, easier JavaScript
独自シンタックス
変換ツール
- react-tools
- babel
シンタックスシュガー実装するためだけにオレオレ実装を追加すると面倒。
- ES6も一緒に変換するので変換コストはない
- エディタの設定すれば恩恵が受けられる。
Server Side Rendering
- JSを解釈できない
- マシンから読めない
検索エンジンからJSって読めないよね。SEO的につらい。
BromBone | SEO for your AngularJS, EmberJS, or BackboneJS website.
こういうのを使うのもいいけどちょっとオーバースペックぽい
初期表示だけサーバーでやる→クライアントとサーバでコードが重複する問題
Rendr→からReactへの乗り換え
Server Side Rendering
サーバークライアントでコードを共通化できる
豆
Flux
Flux | Application Architecture for Building User Interfaces
考え方なので実装はさまざま、
Flux実装
Flow
静的なチェッカー
Flow, a new static type checker for JavaScript | Engineering Blog | Facebook Code | Facebook
JSXもサポート
コンパイル
まとめ
- React
- Flux(設計手法)
- Flow(Lintツール)
Scalableなのが嬉しい
小規模なものを素早く作るためのツールではない(AngularはAPIを通してごにょごにょだが、Reactは結構実装が面倒だが、そのめんどくささ(制約)を超えた嬉しさがある)
技術選択は適切に(backbone.jsやangular.jsが適している場合もあるしjQueryが適している場合もあるので、その場にあった技術を適切に使うことが肝要。jQueryで30分で出来ることが変なフレームワークを使ったら1日かかったってなると結構つらい)
