react + flux

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

https://html5experts.jp/hokaccha/13301/

その他に

• 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