React.js + Flux

15,992 views

Published on

天下一クライアントサイドJS MV*フレームワーク武道会でのLT資料

0 Comments
52 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,992
On SlideShare
0
From Embeds
0
Number of Embeds
6,621
Actions
Shares
0
Downloads
34
Comments
0
Likes
52
Embeds 0
No embeds

No notes for slide

React.js + Flux

  1. 1. MVCはもう古い !? React + Flux 2014. 07. 11 天下一クライアントサイドJS MV*フレームワーク武道会 @dsuket
  2. 2. About me @dsuket Works フリーランスエンジニア 開発、技術支援、執筆、講演、etc Community AITC運営委員, CCエバンジェリスト
 Japan Sencha UG Organizer @dsuket dsuket コラムはじめました
  3. 3. A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES React http://facebook.github.io/react/index.html
  4. 4. React Overview 2013年6月 FacebookがオープンソースにしたJavaScript ライブラリ。Instagramのサイトで使われている。 JUST THE UI VIRTUAL DOM DATA FLOW 他の技術に依存しないため、単なる ビューとして簡単に組み込める。 超高性能の仮想DOMを使用し、 サーバーで描画することも可能。 片方向のReactiveデータフローで従来 の定型文を軽減する。
  5. 5. Reactive?
  6. 6.  コンピュータ用語におけるリアクティブプロ グラミングとは、変更を伝播させるデータフロー 指向のプログラミングパラダイムを指します。  それは静的ないし動的なデータフローを容 易に表現できることを意味します。背後にある 実行モデルが、変更をデータフローへ自動的に 伝播させるということです。 ” http://en.wikipedia.org/wiki/Reactive_programming Reactive Programming
  7. 7. var a = 1; var b = a + 1; a = 10; console.log(b); Example Reactive 何が表示される? 2 に決まってんだろjk
  8. 8. > 11 var a = 1; var b = a + 1; a = 10; console.log(b); Example Reactive
  9. 9. 値は動的に決定される! そう、Reactiveならね。 参考:こんなのまとめました。 Webフロントエンドでリアクティブプログラミング
  10. 10. React with JSX
  11. 11. Hello Example /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ! React.renderComponent(<HelloMessage name="John" />, mountNode); http://facebook.github.io/react/#helloExample
  12. 12. Hello Example /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ! React.renderComponent(<HelloMessage name="John" />, mountNode); JSX !! JSX: JavaScript XML syntax transform DeNA JSX JavaScript 中に XML を埋め込む。 http://facebook.github.io/react/#helloExample
  13. 13. Why JSX? JSXじゃなくても React APIでDOMを作成できる。 var link = React.DOM.a({ href: 'http://facebook.github.io/react' }, 'React'); • DOM構造が視覚的に分かりやすい。 • デザイナに優しい。 • MXML や XAML 使ってる人に馴染みがある。 JSXを使うことをオススメする3つの理由
  14. 14. Reactive on React
  15. 15. Timer Example /** @jsx React.DOM */ var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); React.renderComponent(<Timer />, mountNode); http://facebook.github.io/react/#timerExample
  16. 16. Timer Example /** @jsx React.DOM */ var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); React.renderComponent(<Timer />, mountNode); http://facebook.github.io/react/#timerExample Using Stateful
  17. 17. Virtual DOM 時間の都合で省略
  18. 18. Flux Application Architecture http://facebook.github.io/react/docs/flux-overview.html
  19. 19. MVC DOSEN’T SCALE 今年の Facebook Developer Conference
 のセッションで物議を醸した reddit ですごいコメント付いた
  20. 20. Traditional MVC Hacker Way: Rethinking Web App Development at Facebook
  21. 21. Complex System × ModelとViewが相互に参照 × Controllerのルーティングが複雑
  22. 22. ならば FLUX だ! ○ ViewにReact ○ 単方向のデータフロー ○ Dispatcherでイベントの順序を管理
  23. 23. Flux... • FacebookのMVCは僕の知ってるMVCとは別物 • 元のMVCの例が悪すぎる! • 今どきのMV* Frameworkは大体イベントドリブ ンだと思うけど。 • MQみたいなことできるのは嬉しいかも。 参考: Flux TodoMVC
  24. 24. まとめ
  25. 25. React(JSX) まとめ • JSONのほうが構造は分かりやすくない? • デザイナフレンドリでかけるデザイナさんほしい • とはいえ、文字列連結するよりタイプが減る。 • Angularのdirectiveみたいな感じ。 • Polymerとの比較も面白い see: - React vs Angular - Facebook's React vs AngularJS: A Closer Look - Pros and Cons of Facebook's React vs. Web Components (Polymer)
  26. 26. Flux まとめ (゚ ゚)イラネ
  27. 27. Appendix - Tools • エディタのJSXサポート • vim-jsx • sublime-react • web-mode.el • Atom React.js support • Debugger • React Dev Tools • その他便利ツール • Complementary-Tools

×