歌舞伎座Tech Rx会

W H O
• name: Kaoru Shibasaki
• Twitter: @crexista

W H O
• name: Kaoru Shibasaki
• Twitter: @crexista
• Work at:

W H A T ’ S
• ブラウザのPushステートを使った非同期遷移
• FlashとJSでのExternalInterfaceを使った非同期通信
• 大量のAPI通信と配信サーバ等とのコネクション管理

非同期処理をどうやって
Rxでさばいてたかを話します

A G E N D A
1. Why.(なぜ使ったのか)
2. Problem.(注意点は何か)
3. How.(解決策)
4. まとめ

W H Y
1. EventListenerではダメなのか？
2. MVVMフレームワークは？
3. その他

Reason 1. EventListenerではダメな理由

_result1 = null;
_apiLoader.addEventListener(onLoad);
_apiLoader.load(url);
function onLoad(event){
_result1 = event.target.data;
}
一般的なEventListener例その1

_result1 = null;
_result2 = null;
_apiLoader.addEventListener(onLoad);
function onLoad(event){
_apiLoader.removeEvent(onLoad);
_apiLoader.addEventListener(onNext);
}
function onNext(event) {
_apiLoader.removeEvent(onNext);
}
APIを順番に2つ
リクエストする場合

_result1 = null;
_result2 = null;
_result3 = null;
_apiLoader1.addEventListener(onLoad1);
_apiLoader2.addEventListener(onLoad2);
_apiLoader1.load(url);
_apiLoader2.load(url);
function onLoad1(event){
_apiLoader.removeEvent(onLoad);
_apiLoader.addEventListener(onNext);
if (_result2 != null) onLast();
}
function onLoad2(event) {
_apiLoader.removeEvent(onNext);
if (_result1 != null) onLast();
}
function onLast() {
//_result1と_result2を使った処理・・・
}
APIを同時に2つリクエストして
その2つの結果から新たに処理

状態が増える
コールバック関数が値を返さないので

テストがしづらい

var resultSignal =
APILoader.load().map(onLoad).flatMap(nextLoad);
resultSignal.subscribe(onNext, onComplete, onError);
Rxだと・・・

var resultSignal =
APILoader.load().map(onLoad).flatMap(nextLoad);
resultSignal.subscribe(onNext, onComplete, onError);
Rxだと・・・
別クラスのstaticメソッドに出せる

テストがしやすい

var mockResult = Observable.returnValue(obj);
mock(apiLoader.load).returnValue(mockResult);
var testResult = APILoader.load().map().flatMap();
assertThat(testResult, isEqual(/*期待値*/));
Mockへに切り替えてのテスト

Reason 2. MVVMを採用しない理由

M V V M とは？
from wikiped

コードで書くと？

コード側V I E W 側
M V V M とは？
<tag value = “{uvm.name}">
<button click = "{uvm.updateAge}">
class UserViewModel
{
[Bindable]
private var _age
function updateAge
{
_age ++;
}
}

M V V M パターンの欠点
• 揮発性イベントの扱いが面倒
• ViewとVMの紐付けを動的に変更できない
• Viewロジックが複雑なものに向いてない

カスタマイズコストが高い

• 例) マウスオーバーしてから数秒間マウスアウトしなかった場合APIをリクエストする
mouseOver
.merge(mouseOut)
.throttle(LIMIT_MSEC)
.filter(checkEventType).subscribe(apiRequest)
Rxでのイベントカスタマイズの例

P R O B L E M
1. 組み込み非同期処理との組み合わせ
2. PULL型からPUSH型のStreamへの変換時
3. SubscribeとError処理

組み込み系との相性

var request = apiResult.flatMap(function(result)
{
var socket = new Socket();
var obs = Observable.fromEvent(“connect”, socket);
socket.connect();
return obs
})
.map(function(event):void
{
var socket = event.target;
//なんらかの処理
});

{
socket.connect();
return obs
})
{
});
組み込みクラス

{
socket.connect();
return obs
})
{
});
ここでconnectしたsocketは
requestをdisposeしても
消えない

{
socket.connect();
return obs
})
{
});
組み込み系の非同期処理はそのまま使えない！

カスタムシグナルを作る

socketRequest = Observable.create(function(observer)
{
var func = function(event)
{
observer.onNext(event.target);
observer.onComplete();
};
socket.addEventListener(“connect”,func);
socket.connect();
return function()
{
socket.removeEventListener(func);
if (!socket.connected) socket.close();
}
});

{
{
};
socket.connect();
return function()
{
}
});
接続完了時の
コールバック

{
{
};
socket.connect();
return function()
{
}
});
接続キャンセル時
コールバック

{
return socketRequest;
})
{
});

HOTとCOLDの話ではないです
(近いけど)

• PULL型のStream
• 非同期でリクエストし、値が取れたら完了
• 例) APIリクエストとか
• PUSH型のStream
• 一度subscribeすると永続的に値が来るStream
• 例) UIとか、メールとか
P U L L 型 → P U S H 型

A P I リクエストの結果をもって
P U S H 通知サーバに接続した例

apiResult.flatMap(function(result)
{
})
.flatMap(function(socket)
{
return socket.onData;
}).do(function(data)
{
//描画処理
});
1. APIへのリクエスト結果

{
})
{
{
//描画処理
});
2. Socketサーバへの
リクエスト

{
})
{
{
//描画処理
});
3. socketサーバからの
PUSH通知

{
})
{
{
//描画処理
});

{
})
{
{
//描画処理
});
赤字のonDataは
上書きされたが
connectionが
closeされるわけではない

{
})
{
return socket.onData.takeUntil(apiResult);
{
//描画処理
}); takeUntilを使って
apiResultが完了したら
onDataを止める

1. SubscribeはaddEventListenerとだいたい同じ
2. Subscribeしまくる == eventListener書きまくり
3. eventの結果どこで何が起きるかわからなくなる！
Subscribeについて

悪い例
var request =
APILoader.load(urlA).subscribe(function(result)
{
APILoader.load(result).subscribe(function()
{
//なんかの処理
});
})
ここの処理はキャンセル
できない

回避策
var innerReq;
var request =
{
innerReq =APILoader.load(result).subscribe(function()
{
});
})
if (innerReq) innerReq.dispose();
request.dispose();

回避策
var innerReq;
var request =
{
innerReq =APILoader.load(result).subscribe(function()
{
});
})
if (innerReq) innerReq.dispose();
request.dispose();
できるといえばできるが
テストが面倒に・・

良い例
APILoader.load(urlA).flatMap(function(result)
{
return APILoader.load(result);
}).subscribe(function()
{
});

• 変な書き方をするとメモリリークの原因に
• というか、フラグが増えて管理が大変に
• (副作用を起こすものなので当たり前といえば当たり前だが)
Subscribeについて

• Rxではエラーが起きるとsubscribeが切れる
• subscribeのonErrorを書き忘れるとハマル
• なのできちんとonErrorかcatchErrorしましょう
Errorについて

• Error処理忘れるな & Subscribeをあまり書くな
• なのできちんとonErrorかcatchErrorしましょう
SubscribeとErrorについて

でも人間なので忘れるよね
SubscribeとErrorについて

フレームワーク
作りました

フレームワークの方針
• 薄くつくる
• (現状の)レイヤードアーキテクチャに合わせる
• 開発者はsubscribeを「基本」書かない
• Error処理を書き忘れても最終的にcatchするように

映像の再生や切断と
いったアプリとして
の挙動を決める層
アプリとしての挙動を
決める際に必要となる
ビジネスロジック
A P P L I C A T I O N と
U I のつなぎ込みをす
る層

フレームワークの方針
• Presenter層でApplicationとUIのつなぎ込む
• 開発者はつなぎ込みだけフレームワークに従う
• あとは好きに書いてくれ

function start():Array
{
return [
[UI.onPlay.map(VideoModule.play), errorHandler],
[MessageModule.comment.map(UI.addComment)],
];
}
フレームワークでの実装例
UIとApplicationをつなぐ
Signal

{
return [
];
}
このSignalの監視中のエラーの
ハンドラー

{
return [
];
}
Error処理を変更する必要がない場合は
そのまま

function run():Array
{
var arr = presenter.start();
for (var signals in arr)
{
var signal = signals[0];
var errorHandle = (signals.length==2)?
signals[1]:defaultHandle
signal.catchError(errorHandle)
.subscribe(onNext, onComplete, onError);
}
}
フレームワーク内部での処理
エラーのキャッチ漏れ防止機構

まとめ
• 基本クラスを覚える
• Observable, Subject, Dispose, subscribeあたり
• Operatorとしては以下を覚えておくと楽
• map, flatMap, filter, zip, merge, do, return, take, takeUntil

まとめ
• Subscribeの扱いはルールを決めるべし
• SubscribeをなくせばSignalの流れを掴みやすくなる

–
H T T P S : / / G I S T . G I T H U B . C O M / S T A L T Z / 8 6 8 E 7 E 9 B C 2 A 7 B 8 C
1 F 7 5 4
“Everything is a stream”

歌舞伎座Tech Rx会

More Related Content

What's hot

Viewers also liked

Similar to 歌舞伎座Tech Rx会

歌舞伎座Tech Rx会