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

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

10. 値は動的に決定される！
そう、Reactiveならね。
参考：こんなのまとめました。
Webフロントエンドでリアクティブプログラミング

11. React with JSX

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);
http://facebook.github.io/react/#helloExample

13. 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

14. Why JSX?
JSXじゃなくても React APIでDOMを作成できる。
var link = React.DOM.a({
href: 'http://facebook.github.io/react'
}, 'React');
• DOM構造が視覚的に分かりやすい。
• デザイナに優しい。
• MXML や XAML 使ってる人に馴染みがある。
JSXを使うことをオススメする3つの理由

15. Reactive on React

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

17. 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

18. Virtual DOM
時間の都合で省略

19. Flux
Application Architecture
http://facebook.github.io/react/docs/flux-overview.html

20. MVC DOSEN’T SCALE
今年の Facebook Developer Conference
のセッションで物議を醸した
reddit ですごいコメント付いた

21. Traditional MVC
Hacker Way: Rethinking Web App Development at Facebook

22. Complex System
× ModelとViewが相互に参照
× Controllerのルーティングが複雑

23. ならば FLUX だ！
○ ViewにReact
○ 単方向のデータフロー
○ Dispatcherでイベントの順序を管理

24. Flux...
• FacebookのMVCは僕の知ってるMVCとは別物
• 元のMVCの例が悪すぎる！
• 今どきのMV＊ Frameworkは大体イベントドリブ
ンだと思うけど。
• MQみたいなことできるのは嬉しいかも。
参考: Flux TodoMVC

25. まとめ

26. 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)

27. Flux まとめ
(ﾟ ﾟ)ｲﾗﾈ

28. Appendix - Tools
• エディタのJSXサポート
• vim-jsx
• sublime-react
• web-mode.el
• Atom React.js support
• Debugger
• React Dev Tools
• その他便利ツール
• Complementary-Tools