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