Your SlideShare is downloading. ×
0
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
React.js + Flux
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

React.js + Flux

10,327

Published on

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

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

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

No Downloads
Views
Total Views
10,327
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
29
Comments
0
Likes
44
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×