![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (16)
Similar to Intoroduction to React.js (20)
More from Yuto Matsukubo (10)
Recently uploaded (11)
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を内部で再現する ? データに変更があった場合、Di?を計算し実際の 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を組み込む ? Sca?oldで生成されるようなアプリを再現する ? 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. 搁别补肠迟のつらみ
- 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/?ux/docs/overview.html ? ユーザからのアクションやサーバからのレスポン スを受ける ? 構築したデータをDispacherに渡す ? WebAPIとやりとりするのもここ
- 44. 引用: https://facebook.github.io/?ux/docs/overview.html ? Actionからデータと配送先が渡されるので順次 配信する(大体の場合Store) ? 実装上はEventEmitterで良い ? facebook/?uxはこの部分のみ提供する
- 45. 引用: https://facebook.github.io/?ux/docs/overview.html ? モデルみたいなもの ? Dispacherから渡されたデータを保持する ? Dispacherからデータが渡されたらイベントを 発行する
- 46. 引用: https://facebook.github.io/?ux/docs/overview.html ? Storeを監視してデータが変更されたらViewに 反映する ? React.jsが担うのはここ ? ユーザからのアクションをActionに通知する
- 47. 引用: https://facebook.github.io/?ux/docs/overview.html ? データフローを一方向にすることで設計をシン プルにする ? 贵濒耻虫の功绩はこのパターンに名前を付けたこと
- 49. いろんなFlux実装 ? facebook/?ux ? yahoo/?uxible ? martyjs/marty ? kenwheeler/mc?y ? deloreanjs/delorean
- 51. まとめ ? Reactは速度と設計を両立させるViewのライブ ラリ ? 生産性を上げるためのものではないし、コード 量は増える ? 搁别补肠迟単体では扱いにくい。贵濒耻虫を併用しよう
- 52. 参考文献 ? ReactとFluxのこと ? https://speakerdeck.com/geta6/reactto?uxfalsekoto ? 一人React.js Advent Calendar 2014 ? http://qiita.com/advent-calendar/2014/reactjs ? Introduction To React ? https://speakerdeck.com/hokaccha/introduction-to-react