Download to read offline
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Intoroduction to React.js
- 1.
- 2.
- 3.
- 4. • コンポーネントという概念を持ち込むことで設 計を改善する • VirtualDOM採用による設計と速度の両立 • JSフレームワークで問題になりがちなSEOに対 応できる
- 5. 採用事例 • Facebook • Instagram •Yahoo • Atom Editor(React導入後にVanillaJSで書きな おした) • Airbnb
- 6.
- 7. • React Component •JSX • Virtual DOM • Server-Side Rendering • Flux
- 8.
- 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.
- 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.
- 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 の状態に乖離がなくなる • ↑これってサーバサイドっぽくね?
- 21.
- 22.
- 23.
- 24.
- 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.
- 29.
- 30.
- 31. 外部のReact Components • Reactable •TableをReactComponentとして実現できる • JSオブジェクトを渡すだけでテーブルを表示 • ソート機能などもあり • react-router • React.jsでルーティングを実現する
- 32. React Componentsの探し方 • ReactComponents • http://react-components.com/ • React Rocks • http://react.rocks/
- 33.
- 34.
- 35.
- 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￣
- 38.
- 39.
- 40.
- 41. Fluxとは • アーキテクチャの名前 • 言ってしまえばObserverパターン •データフローを一方向にすることで複雑性を排 除する
- 42.
- 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の功績はこのパターンに名前を付けたこと
- 48.
- 49. いろんなFlux実装 • facebook/flux • yahoo/fluxible •martyjs/marty • kenwheeler/mcfly • deloreanjs/delorean
- 50.
- 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