PerlとJavaScriptとAndroidとiOSと

のんのんばあとオレ@zentooo

12年12月3日月曜日

自己紹介

• Twitter id: @zentooo

• Working as Engineer at DeNA Co., Ltd

• Perl / JavaScript / ObjC / Scala / ...

12年12月3日月曜日

経緯

• YAPC前夜祭に行く途中で、、、、

• @riywo 「JSってなんで非同期なの？」

• @punytan 「キモい」

12年12月3日月曜日

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日月曜日

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日月曜日

Why Async?

• JSはブラウザのUI Thread上で動く

• JS実行中はブラウザが停まる

• 不用意に同期的なHTTP Requestを行うと...

12年12月3日月曜日

Why Async?

• JSはブラウザのUI Thread上で動く

• JS実行中はブラウザが停まる

• 不用意に同期的なHTTP Requestを行うと...

＿人人 人人＿＞ 突然の死 ＜‾Y^Y^Y^Y‾

12年12月3日月曜日

Execution model of JSUI Thread red => JS Execution

blue => UI Events

12年12月3日月曜日

Async HTTP RequestUI Thread red => JS Execution

blue => UI Events

← Async HTTP request with send();

← request finished, fire “onload”

12年12月3日月曜日

Sync HTTP RequestUI Thread red => JS Execution

blue => UI Events

← Sync HTTP Request with send();

← request finished

12年12月3日月曜日

node.js

• アレです

• backendは違うが、実行モデルは同じ

12年12月3日月曜日

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日月曜日

Why callback地獄?

• シングルプロセス、シングルスレッド

• 全てのインタフェースが非同期

12年12月3日月曜日

Flow Control Libraries

• JSDeferred

• Async.js

• and so forth...

12年12月3日月曜日

We are still hereUI Thread

12年12月3日月曜日

Android and iOS

• UI周りはシングルスレッドモデル

• Main Thread以外からUIを更新すると死ぬ

• Thread自体は生成可能

• 生Threadは普通使わない

12年12月3日月曜日

Parallelism on Android

• 生Thread ( java.lang.Thread )

• Handler ( android.os.Handler )

• AsyncTask ( android.os.AsyncTask )

• AsyncTaskLoader ( android.content.AsyncTaskLoader )

12年12月3日月曜日

Parallelism on iOS

• 生Thread ( NSThread )

• GCD ( Grand Central Dispatch )

• NSOperationQueue

12年12月3日月曜日

大体の流れ

• Event HandlerでUI Eventを受け取る

• 重い処理をbackground threadに移譲

• Main Threadに戻ってUIを更新

12年12月3日月曜日

Execution model of Android / iOS

Main Thread

red => Code on Main Threadyellow => Code on Other Threads

Other Threads

12年12月3日月曜日

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日月曜日

iOS (GCD)

// main threaddispatch_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日月曜日

JSと決定的に異なる点

• 明示的に処理するThreadを決められる

• そのため、他Threadでの処理は別に同期的でも構わない

• Thread間のインタフェースは非同期

12年12月3日月曜日

Execution model of Android / iOS (again)

Main Thread

red => Code on Main Threadyellow => Code on Other Threadsblue => UI Events

Other Threads

← Sync HTTP req

← req finished

async call

callback

12年12月3日月曜日

And more...

Main Thread

red => Code on Main Threadyellow => Code on Other Threadsblue => UI Events

Other Threads

← Sync HTTP req

async call

callback

← Sync file read← Sync DB read← Sync HTTP req

12年12月3日月曜日

分かること

• Main Threadのblockを防ぐだけなら、全てのI/Fが非同期である必要は全くない

• 適切にThreadの境界を跨ぐための仕組みが必要

12年12月3日月曜日

JS future?

Main Thread

red => Code on Main Threadyellow => Code on Other Threadsblue => UI Events

Web Workers

← Sync HTTP req

async call

callback

← Sync file read← Sync DB read←Heavy calculation

12年12月3日月曜日

“Heavy” APIs

• synchronous XHR (supported)

• localStorage has only synchronous API

• synchronous WebSQL (Web Worker only)

• synchronous IndexedDB (Web Worker only?)

12年12月3日月曜日

落穂ひろい

• 他Threadだからって全て直列でやってたら遅いよね、とか

• 特に、内部API経由でデータかき集めるようなサーバとか...ゴニョゴニョ

12年12月3日月曜日

おわり• 　 ＿

　 ＼ヽ,　,、＿　　`''|/ﾉ＼｀ヽ、|　＼, V　 　 `L,,_　　　 |ヽ､)　　　　　　　　　　　　　　　　,､　　　.|　　　　　　　　　　　　　　　　　　 ヽYﾉ　　 / 　 　 　 　 　 　　　　　　　　　 r''ヽ、.|　 /　　　　　 　 ,..　-──-　.、　 　 `ｰ-ヽ|ヮ　.|　　　　　 , -'´　　 ＿＿ 　 　 `ヽ、　　`|

　 |　　　　／　, -'"´ 　 　 　 ｀`''-､　 ＼　 |　 |　　　/　／　　　　　　　　　　 　 ＼　ヽ |

　 ヽ,　　y'　　　/` - 、　　　 ,.. -'ﾍ 　 ヽ. }ﾉ　　　ヽ,' 　 　 /　　　/｀,ゝ' ´ 　 　 ヽ 　 Y..　　　 i　　　 ,' 　 　 {　{　　　　　 　 ヽ 　 `、　　　 l　 　 ,ｲ─- ､.._　ヽ　,,　_,.. -─:}　　　!

.　 　 |　　r-i|　ｰ=ェｪ:ゝ　,.∠ｨｪｪ=ｰ' |r ､.　 l　　　|　　{ﾄ｣l|.　　　　　 : | "　 　 ｀`: |!ﾄﾘ　　|.　　│　　ヽ､|　　　　　 ;.｣_　　　　　 |'ソ　 　 !.　　│　　 　 ヽ 　 　 r──ｯ　　　 /ﾉ　　　　|　 　 |　　　 　 lヽ　　　‾‾ 　 　 / ｲ　　　　│.　 　 !　　　 丶ヾヽ　　　 ~　　　, '　ﾉ　│　　 !　　　 ﾄ.　　　　ﾐ.ゝ ヽ.＿＿__.／　　/　 l　　 /

　　　　ヽ　　ヽ　　　　　　　　　　　ｲ　,' / , '　　　　　　　┼ヽ　 -|r-､.　ﾚ　|　　　　　＼.　　　　　　　　　　　　　ノﾚ'／　　　　　　 　 ｄ⌒)　./|　_ﾉ　 __ﾉ

12年12月3日月曜日