1. PerlとJavaScriptと
AndroidとiOSと
のんのんばあとオレ
@zentooo
12年12月3日月曜日

2. 自己紹介
• Twitter id: @zentooo
• Working as Engineer at DeNA Co., Ltd
• Perl / JavaScript / ObjC / Scala / ...
12年12月3日月曜日

3. 経緯
• YAPC前夜祭に行く途中で、、、、
• @riywo 「JSってなんで非同期なの？」
• @punytan 「キモい」
12年12月3日月曜日

4. Sync
my $ua = LWP::UserAgent−>new;
my $response = $ua->get('http://search.cpan.org/');
# blocks until request end
if ($response->is_success) {
# do something ...
}
12年12月3日月曜日

5. Async
var req = new XMLHttpRequest();
req.onload = function() {
// do something...
};
req.open("GET", "http://example.com");
req.send();
// runs without waiting HTTP request
12年12月3日月曜日

6. Why Async?
• JSはブラウザのUI Thread上で動く
• JS実行中はブラウザが停まる
• 不用意に同期的なHTTP Requestを行う
と...
12年12月3日月曜日

7. Why Async?
• JSはブラウザのUI Thread上で動く
• JS実行中はブラウザが停まる
• 不用意に同期的なHTTP Requestを行う
と...
＿人人 人人＿
＞ 突然の死 ＜
￣Y^Y^Y^Y￣
12年12月3日月曜日

8. Execution model of JS
UI Thread red => JS Execution
blue => UI Events
12年12月3日月曜日

9. Async HTTP Request
UI Thread red => JS Execution
blue => UI Events
← Async HTTP request with send();
← request finished, fire “onload”
12年12月3日月曜日

10. Sync HTTP Request
UI Thread red => JS Execution
blue => UI Events
← Sync HTTP Request with send();
← request finished
12年12月3日月曜日

11. node.js
• アレです
• backendは違うが、実行モデルは同じ
12年12月3日月曜日

12. callback地獄
asyncCall(function(err, res) {
asyncCall(function(err, res) {
asyncCall(function(err, res) {
asyncCall(function(err, res) {
// ... and they lived happily ever after.
});
});
};
});
12年12月3日月曜日

13. Why callback地獄?
• シングルプロセス、シングルスレッド
• 全てのインタフェースが非同期
12年12月3日月曜日

14. Flow Control Libraries
• JSDeferred
• Async.js
• and so forth...
12年12月3日月曜日

15. We are still here
UI Thread
12年12月3日月曜日

16. Android and iOS
• UI周りはシングルスレッドモデル
• Main Thread以外からUIを更新すると死ぬ
• Thread自体は生成可能
• 生Threadは普通使わない
12年12月3日月曜日

17. Parallelism on Android
• 生Thread ( java.lang.Thread )
• Handler ( android.os.Handler )
• AsyncTask ( android.os.AsyncTask )
• AsyncTaskLoader
( android.content.AsyncTaskLoader )
12年12月3日月曜日

18. Parallelism on iOS
• 生Thread ( NSThread )
• GCD ( Grand Central Dispatch )
• NSOperationQueue
12年12月3日月曜日

19. 大体の流れ
• Event HandlerでUI Eventを受け取る
• 重い処理をbackground threadに移譲
• Main Threadに戻ってUIを更新
12年12月3日月曜日

20. Execution model of
Android / iOS
red => Code on Main Thread
yellow => Code on Other Threads
Main Thread Other Threads
12年12月3日月曜日

21. Android (AsyncTask)
class ATask extends AsyncTask<String,Void, Boolean> {
@Override
protected Boolean doInBackground(String... params) {
// run on background thread, do heavy tasks
}
@Override
protected void onPostExecute(Boolean result) {
// run on main thread, update UI
}
}
12年12月3日月曜日

22. iOS (GCD)
// main thread
dispatch_queue_t = dispatch_get_global_queue(...);
dispatch_async(queue, ^{
// run on background thread, do heavy tasks
dispatch_async(dispatch_get_main_queue(), ^{
// run on main thread, update UI
});
});
12年12月3日月曜日

23. JSと決定的に異なる点
• 明示的に処理するThreadを決められる
• そのため、他Threadでの処理は別に同
期的でも構わない
• Thread間のインタフェースは非同期
12年12月3日月曜日

24. Execution model of
Android / iOS (again)
red => Code on Main Thread
yellow => Code on Other Threads
blue => UI Events
Main Thread Other Threads
async call
← Sync HTTP req
← req finished
callback
12年12月3日月曜日

25. And more...
red => Code on Main Thread
yellow => Code on Other Threads
blue => UI Events
Main Thread Other Threads
async call
← Sync HTTP req
← Sync file read
← Sync DB read
← Sync HTTP req
callback
12年12月3日月曜日

26. 分かること
• Main Threadのblockを防ぐだけなら、全て
のI/Fが非同期である必要は全くない
• 適切にThreadの境界を跨ぐための仕組み
が必要
12年12月3日月曜日

27. JS future?
red => Code on Main Thread
yellow => Code on Other Threads
blue => UI Events
Main Thread Web Workers
async call
← Sync HTTP req
← Sync file read
← Sync DB read
←Heavy calculation
callback
12年12月3日月曜日

28. “Heavy” APIs
• synchronous XHR (supported)
• localStorage has only synchronous API
• synchronous WebSQL (Web Worker only)
• synchronous IndexedDB (Web Worker
only?)
12年12月3日月曜日

29. 落穂ひろい
• 他Threadだからって全て直列でやって
たら遅いよね、とか
• 特に、内部API経由でデータかき集める
ようなサーバとか...ゴニョゴニョ
12年12月3日月曜日

30. おわり
• ＿
＼ヽ, ,、
＿ `''|/ﾉ
＼｀ヽ、|
＼, V
`L,,_
|ヽ､) ,､
.| ヽYﾉ
/ r''ヽ、.|
/ ,.. -──- .、 `ｰ-ヽ|ヮ
.| , -'´ ＿＿ `ヽ、 `|
| ／ , -'"´ ｀`''-､ ＼ |
| / ／ ＼ ヽ |
ヽ, y' /` - 、 ,.. -'ﾍ ヽ. }ﾉ
ヽ,' / /｀,ゝ' ´ ヽ Y.
. i ,' { { ヽ `、
l ,ｲ─- ､.._ ヽ ,, _,.. -─:} !
. | r-i| ｰ=ェｪ:ゝ ,.∠ｨｪｪ=ｰ' |r ､. l
| {ﾄ｣l|. : | " ｀`: |!ﾄﾘ |
. │ ヽ､| ;.｣_ |'ソ !
. │ ヽ r──ｯ /ﾉ |
| lヽ ￣￣ / ｲ │
. ! 丶ヾヽ ~ , ' ﾉ │ !
ﾄ. ﾐ.ゝ ヽ.＿＿__.／ / l /
ヽ ヽ ｲ ,' / , ' ┼ヽ -|r-､. ﾚ |
＼. ノﾚ'／ ｄ͡) ./| _ﾉ __ﾉ
12年12月3日月曜日