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