react + flux
TRANSCRIPT
React + Flux@_yukikayuki
NDS in Niigate #8 JavaScript Day!
• @_yukikayuki / Kaneda Takayuki
• ウォーターセル株式会社
• フロントエンドエンジニア
皆さんフレームワーク何使ってますか?
jQuery
今でも現役
ホームページなら任せろ
シングルページアプリケーションは?
限りなくつらい
Backbone
バラバラの骨
高度な設計スキルと経験が無いと難しい
DOMとstateが混ざる
イベント地獄 class属性地獄
Marionette必須
AngularAngular
フルスタック 双方向バインディング
当時はすげーと言いながらコーディングしていた
コンポーネントがstateを持つのでつらい
複雑になるとつらい
皆の課題はstate管理
大体DOMとstateが混ざって爆発する
http://www.infoq.com/jp/news/2014/05/facebook-mvc-flux
まだstate管理で消耗してるの?
そんな人におすすめなのが React + Flux
React
Facebook謹製のUIライブラリ
特徴
• JUST THE UI
• VIRTUAL DOM
• DATA FLOW
JUST THE UI
• Componentを作るためのUIライブラリ
• MVCのV
• V以外の場所は何を使ってもいい
VIRTUAL DOM
<ul> <li>React</li> <li>Backbone</li> </ul>
↓
<ul> <li>React</li> <li>Marionette</li> </ul>
差分
<ul> <li>React</li> <li>Backbone</li> </ul>
↓
<ul> <li>React</li> <li>Marionette</li> </ul>
こんな時どんなアプローチをするか
頑張って差分のみ書き換える
シンプルに<ul>を毎回描画するコードを書きたい
むしろ全部再描画したい
初回描画された瞬間が一番きれい
, -――- 、 / ヽ | ノ ー | それってだめじゃね？ |(・） （・） | だってDOMすべて再描画って遅いじゃん | （ | ヽ Ｏ 人 ＞ー-― ́ ‾‾＼ ⊂ニニ‾‾‾ヽ / | くメ） _ノ | | | | | (／ | | / | | | | |/ /| | | | ﾄ / | | | ヽ＿_／ | | |
_,,;' '" '' ゛''" ゛' ';;,, （rヽ,;''"""''゛゛゛'';, ﾉｒ） ,;'゛ i ＿ 、＿ iヽ゛';, お前それVirtual DOMの前でも同じ事言えんの？ ,;'" ''| ヽ・〉 〈・ノ |ﾞ゛ `';, ,;'' "| ▼ |ﾞ゛ `';, ,;'' ヽ＿人＿ / ,;'_ ／ｼ、 ヽ⌒⌒ / ﾘ ＼ | "ｒ,, ｀"'''ﾞ́ ,,ﾐ゛ | | ﾘ、 ,ﾘ | | i ゛ｒ、ﾉ,,ｒ" i _| | ｀ー――----┴ ⌒́ ） （ヽ ＿＿＿＿＿＿ ,, ＿́） （_⌒ ＿＿＿＿＿＿ ,, ィ 丁 | | |
差分だけ変更する
- Backbone + Marionette
これをやってくれる
何がすごい
毎回新しいDOMをプッシュし続けられる
• △ 差分のみ更新で速い・すごい
• ◯ 雑にダイナミックに書ける
DATA FLOW
親から子へ一方通行
親のみステートフル this.state
子はステートレス this.props
その他に
• JSX
• ビルド
• リアルDOM
JSX
＿人人人人人人人人＿ ＞ JSの中にHTML ＜ ‾Y^Y^Y^Y^Y^Y^Y‾
JavaScript XML
import React from ‘react’; import ReactDom from ‘react-dom’; class Hello extends React.Component { render() { return (
<div> hello world </div>
); } } ReactDom.render( <Hello/>, document.getElemetById(‘root’) );
class Hello extends React.Component { render() { return (
<div> hello world </div>
); } }
これ
そのままだと実行できない
変換が必要
class Hello extends React.Component { render() { return React.createElement( "div", null, "hello world" ); } }
ただのメソッド呼び出しになった
createElementだけで頑張ることもできる
ビルド
Babel
ES6をES5へ変換するやつ JSXもサポート
webpack
静的ファイルを結合する奴
リアルDOM
まだDOM触ってるんですか？
そりゃ触りますよ
Read onlyで触るのが良い
return( <input type=“text” ref=“name”/> )
ReactDom.findDOMNode(this.refs.name);
Reactまとめ
• とても賢い
• 雑に使っても実用には問題ないくらい速い
• ステートレスな関数的使い方ができる
• Viewライブラリ
Flux
アーキテクチャ
オブザーバーパターンに名前をつけた
公式はリファレンスと少しの実装
様々なFlux実装• Fluxxor
• Flumox
• Reflux
• RxFlux
• その他多数
どれを使えば良いんだorz
Redux
メジャーリリースv4.0で終わりだ。代わりにReduxを使ってくれ。奴はやばい(いい意味で)
https://github.com/acdlite/flummox
React + Redux
https://facebook.github.io/flux/docs/overview.html#content
https://github.com/facebook/flux/tree/master/examples/flux-todomvc/
一方通行
Views
Reactが担当
ユーザのイベントに応じてActionを発行する
class Hello extends React.Component { render() { const {userActions} = this.props; return (
<div onClick={userActions.hello}> hello world </div>
); } }
これ
ここでAPIとの通信を行ったりする
Action
アプリケーションで何が起きたのかとそれに付随するデータ
export const HELLO = 'HELLO';export function hello() { return { type: HELLO };}
これ
Dispatcher
ActionをすべてのStoreへ配送する
フレームワークによって大体隠蔽されるのであまり意識し
ない
Store
アプリケーションのすべてのデータを保有する
例外あり
export default function hello(state = ‘’, action) { switch (action.type) { case HELLO: return 'hello'; default: return state; }}
これ
Storeを変更するにはActionを発行するしか無い
Actionを受け取り、自分と関係ある場合のみ更新
Views
stateを受け取り、レンダリング
1周おわり
Viewは自分を更新したい場合、Actionを投げて結果が帰ってくるのをじっと待つ
Fluxまとめ
• 一方通行なので動作が推測しやすい
• 各パーツが独立するのでテストしやすい
最後に
導入するメリット
• 複雑な状態を管理しやすくなる
• テストしやすい
まずはReact日本語チュートリアルから
おわり
今日覚えて帰るキーワード
• React
• Flux
• Redux
• ES6(ES2015)
• ウォーターセル
• 求人あります
• Babel
• webpack