Recommended
More Related Content
What's hot
What's hot (17)
Similar to Intoroduction to React.js
Similar to Intoroduction to React.js (20)
More from Yuto Matsukubo
Intoroduction to React.js
- 4. • コンポーネントという概念を持ち込むことで設 計を改善する • Virtual DOM採用による設計と速度の両立 • JSフレームワークで問題になりがちなSEOに対 応できる
- 5. 採用事例 • Facebook • Instagram • Yahoo • Atom Editor(React導入後にVanillaJSで書きな おした) • Airbnb
- 7. • React Component • JSX • Virtual DOM • Server-Side Rendering • Flux
- 9. jQuery どこのDOM? $('#target').click(function() { $('#output').html(function(i, val) { return val*1+1 }); }); DOMが状態を 持ってしまっている
- 10. React.jsvar Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({count: this.state.count + 1}); }, render() { return ( <div> <div>count:{this.state.count}</div> <button onClick={this.onClick}>click!</button> </div> ); } }); DOMの情報もJSで持つ DOMに対する操作
- 11. • DOMとロジックの距離を近づけることでコード がリーダブルになる • 実DOMの状態に影響されないのでテスタブルに なる • Facebook曰く技術の分離でなく責務で分離した らこうなるらしい
- 12. var Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({count: this.state.count + 1}); }, render() { return ( <div> <div>count:{this.state.count}</div> <button onClick={this.onClick}>click!</button> </div> ); } }); なんかHTMLっぽいのがまざってるんですけど… ちょっとまて
- 13. JSX
- 14. • JSの中に HTMLっぽいもの を組み込める • 事前にコンパイルする必要あり • 素のJSで書くよりコードが直感的になる
- 15. <div className="foo"> <div className="bar"> Hello {this.props.name} </div> </div> React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) ) JSX JS
- 16. • こういったコンポーネントの考え方で設計手法 が確立できた • ただし設計のためだけにパフォーマンスを犠牲 にできない • 設計と速度の両立が必要
- 17. Virtual DOM
- 18. • JSオブジェクトでDOMを内部で再現する • データに変更があった場合、Diffを計算し実際の DOMを部分更新する • Reactを使う側は特に意識する必要は 基本的 に ない • Virtual DOM自体は概念なので実装が色々ある
- 19. いろんなVirtual DOM実装 • facebook/react • Matt-Esch/virtual-dom • dekujs/deku • omcljs/om • Elm
- 20. Virtual DOMがあることで なにが嬉しいの • jQueryのように自前でDOMに対してパッチを当てなく ていい • ユーザは期待するDOMの結果だけを定義すればいい • しかもいい感じに速い • 毎回新しくDOMを作って上書きすればコードとDOM の状態に乖離がなくなる • ↑これってサーバサイドっぽくね?
- 25. • ユーザからリクエストを受けた最初のレンダリン グのみサーバサイドで行う • クライアントでDOMを作り始めないので体感速度 が上がる • リクエストしたタイミングでレンダリングが終わっ ている、ということはクローラーが認識できる • つまりSEOに対応できる！
- 26. 他言語対応もありまぁす • reactjs/react-python • reactjs/react-php-v8js • reactjs/React.NET • yanns/play-react • reactjs/react-rails
- 27. 他言語対応もありまぁす • reactjs/react-python • reactjs/react-php-v8js • reactjs/React.NET • yanns/play-react • reactjs/react-rails おっ
- 28. React with Rails
- 29. • react-railsを使ってRailsにReactを組み込む • Scaffoldで生成されるようなアプリを再現する • CRUD • ルーティング
- 31. 外部のReact Components • Reactable • TableをReactComponentとして実現できる • JSオブジェクトを渡すだけでテーブルを表示 • ソート機能などもあり • react-router • React.jsでルーティングを実現する
- 32. React Componentsの探し方 • React Components • http://react-components.com/ • React Rocks • http://react.rocks/
- 34. Reactのつらみ
- 36. コード量比較(当社比) jQuery $('#target').click(function() { $('#output').html(function(i, val) { return val*1+1 }); }); var Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({count: this.state.count + 1}); }, render() { return ( <div> <div>count:{this.state.count}</div> <button onClick={this.onClick}>click!</button> </div> ); } }); React.js
- 37. コード量比較(当社比) jQuery $('#target').click(function() { $('#output').html(function(i, val) { return val*1+1 }); }); var Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({count: this.state.count + 1}); }, render() { return ( <div> <div>count:{this.state.count}</div> <button onClick={this.onClick}>click!</button> </div> ); } }); React.js ＿人人人人＿ ＞ ６倍 ＜ ￣Y^Y^Y￣
- 40. Flux
- 41. Fluxとは • アーキテクチャの名前 • 言ってしまえばObserverパターン • データフローを一方向にすることで複雑性を排 除する
- 43. 引用: https://facebook.github.io/flux/docs/overview.html • ユーザからのアクションやサーバからのレスポン スを受ける • 構築したデータをDispacherに渡す • WebAPIとやりとりするのもここ
- 44. 引用: https://facebook.github.io/flux/docs/overview.html • Actionからデータと配送先が渡されるので順次 配信する(大体の場合Store) • 実装上はEventEmitterで良い • facebook/fluxはこの部分のみ提供する
- 45. 引用: https://facebook.github.io/flux/docs/overview.html • モデルみたいなもの • Dispacherから渡されたデータを保持する • Dispacherからデータが渡されたらイベントを 発行する
- 46. 引用: https://facebook.github.io/flux/docs/overview.html • Storeを監視してデータが変更されたらViewに 反映する • React.jsが担うのはここ • ユーザからのアクションをActionに通知する
- 47. 引用: https://facebook.github.io/flux/docs/overview.html • データフローを一方向にすることで設計をシン プルにする • Fluxの功績はこのパターンに名前を付けたこと
- 49. いろんなFlux実装 • facebook/flux • yahoo/fluxible • martyjs/marty • kenwheeler/mcfly • deloreanjs/delorean
- 51. まとめ • Reactは速度と設計を両立させるViewのライブ ラリ • 生産性を上げるためのものではないし、コード 量は増える • React単体では扱いにくい。Fluxを併用しよう
- 52. 参考文献 • ReactとFluxのこと • https://speakerdeck.com/geta6/reacttofluxfalsekoto • 一人React.js Advent Calendar 2014 • http://qiita.com/advent-calendar/2014/reactjs • Introduction To React • https://speakerdeck.com/hokaccha/introduction-to-react