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