PerlとJavaScriptと               AndroidとiOSと              のんのんばあとオレ                   @zentooo12年12月3日月曜日
自己紹介              • Twitter id: @zentooo              • Working as Engineer at DeNA Co., Ltd              • Perl / JavaScr...
経緯              • YAPC前夜祭に行く途中で、、、、              • @riywo 「JSってなんで非同期なの?」              • @punytan 「キモい」12年12月3日月曜日
Sync       my $ua = LWP::UserAgent−>new;       my $response = $ua->get(http://search.cpan.org/);       # blocks until requ...
Async       var req = new XMLHttpRequest();       req.onload = function() {           // do something...       };       re...
Why Async?              • JSはブラウザのUI Thread上で動く              • JS実行中はブラウザが停まる              • 不用意に同期的なHTTP Requestを行う      ...
Why Async?              • JSはブラウザのUI Thread上で動く              • JS実行中はブラウザが停まる              • 不用意に同期的なHTTP Requestを行う      ...
Execution model of JS                      UI Thread   red => JS Execution                                  blue => UI Eve...
Async HTTP Request               UI Thread                 red => JS Execution                                         blu...
Sync HTTP Request              UI Thread                 red => JS Execution                                        blue =...
node.js              • アレです              • backendは違うが、実行モデルは同じ12年12月3日月曜日
callback地獄       asyncCall(function(err, res) {           asyncCall(function(err, res) {              asyncCall(function(e...
Why callback地獄?              • シングルプロセス、シングルスレッド              • 全てのインタフェースが非同期12年12月3日月曜日
Flow Control Libraries              • JSDeferred              • Async.js              • and so forth...12年12月3日月曜日
We are still here                    UI Thread12年12月3日月曜日
Android and iOS              • UI周りはシングルスレッドモデル              • Main Thread以外からUIを更新すると死ぬ              • Thread自体は生成可能     ...
Parallelism on Android              • 生Thread ( java.lang.Thread )              • Handler ( android.os.Handler )          ...
Parallelism on iOS              • 生Thread ( NSThread )              • GCD ( Grand Central Dispatch )              • NSOper...
大体の流れ              • Event HandlerでUI Eventを受け取る              • 重い処理をbackground threadに移譲              • Main Threadに戻ってUI...
Execution model of                Android / iOS                                  red => Code on Main Thread               ...
Android (AsyncTask) class ATask extends AsyncTask<String,Void, Boolean> {    @Override    protected Boolean doInBackground...
iOS (GCD)     // main thread     dispatch_queue_t = dispatch_get_global_queue(...);     dispatch_async(queue, ^{         /...
JSと決定的に異なる点              • 明示的に処理するThreadを決められる              • そのため、他Threadでの処理は別に同               期的でも構わない              • ...
Execution model of              Android / iOS (again)                                                red => Code on Main T...
And more...                                              red => Code on Main Thread                                       ...
分かること          • Main Threadのblockを防ぐだけなら、全て              のI/Fが非同期である必要は全くない          • 適切にThreadの境界を跨ぐための仕組み             ...
JS future?                                             red => Code on Main Thread                                         ...
“Heavy” APIs              • synchronous XHR (supported)              • localStorage has only synchronous API              ...
落穂ひろい              • 他Threadだからって全て直列でやって               たら遅いよね、とか              • 特に、内部API経由でデータかき集める               ようなサーバと...
おわり              •       _           \ヽ, ,、         _  `|/ノ         \`ヽ、|          \, V             `L,,_             |ヽ、)...
Upcoming SlideShare
Loading in...5
×

PerlとJavaScriptとAndroidとiOSとのんのんバアとオレ

865

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
865
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

PerlとJavaScriptとAndroidとiOSとのんのんバアとオレ

  1. 1. PerlとJavaScriptと AndroidとiOSと のんのんばあとオレ @zentooo12年12月3日月曜日
  2. 2. 自己紹介 • Twitter id: @zentooo • Working as Engineer at DeNA Co., Ltd • Perl / JavaScript / ObjC / Scala / ...12年12月3日月曜日
  3. 3. 経緯 • YAPC前夜祭に行く途中で、、、、 • @riywo 「JSってなんで非同期なの?」 • @punytan 「キモい」12年12月3日月曜日
  4. 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. 5. Async var req = new XMLHttpRequest(); req.onload = function() { // do something... }; req.open("GET", "http://example.com"); req.send(); // runs without waiting HTTP request12年12月3日月曜日
  6. 6. Why Async? • JSはブラウザのUI Thread上で動く • JS実行中はブラウザが停まる • 不用意に同期的なHTTP Requestを行う と...12年12月3日月曜日
  7. 7. Why Async? • JSはブラウザのUI Thread上で動く • JS実行中はブラウザが停まる • 不用意に同期的なHTTP Requestを行う と... _人人 人人_ > 突然の死 <  ̄Y^Y^Y^Y ̄12年12月3日月曜日
  8. 8. Execution model of JS UI Thread red => JS Execution blue => UI Events12年12月3日月曜日
  9. 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. 10. Sync HTTP Request UI Thread red => JS Execution blue => UI Events ← Sync HTTP Request with send(); ← request finished12年12月3日月曜日
  11. 11. node.js • アレです • backendは違うが、実行モデルは同じ12年12月3日月曜日
  12. 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. 13. Why callback地獄? • シングルプロセス、シングルスレッド • 全てのインタフェースが非同期12年12月3日月曜日
  14. 14. Flow Control Libraries • JSDeferred • Async.js • and so forth...12年12月3日月曜日
  15. 15. We are still here UI Thread12年12月3日月曜日
  16. 16. Android and iOS • UI周りはシングルスレッドモデル • Main Thread以外からUIを更新すると死ぬ • Thread自体は生成可能 • 生Threadは普通使わない12年12月3日月曜日
  17. 17. Parallelism on Android • 生Thread ( java.lang.Thread ) • Handler ( android.os.Handler ) • AsyncTask ( android.os.AsyncTask ) • AsyncTaskLoader ( android.content.AsyncTaskLoader )12年12月3日月曜日
  18. 18. Parallelism on iOS • 生Thread ( NSThread ) • GCD ( Grand Central Dispatch ) • NSOperationQueue12年12月3日月曜日
  19. 19. 大体の流れ • Event HandlerでUI Eventを受け取る • 重い処理をbackground threadに移譲 • Main Threadに戻ってUIを更新12年12月3日月曜日
  20. 20. Execution model of Android / iOS red => Code on Main Thread yellow => Code on Other Threads Main Thread Other Threads12年12月3日月曜日
  21. 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. 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. 23. JSと決定的に異なる点 • 明示的に処理するThreadを決められる • そのため、他Threadでの処理は別に同 期的でも構わない • Thread間のインタフェースは非同期12年12月3日月曜日
  24. 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 callback12年12月3日月曜日
  25. 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 callback12年12月3日月曜日
  26. 26. 分かること • Main Threadのblockを防ぐだけなら、全て のI/Fが非同期である必要は全くない • 適切にThreadの境界を跨ぐための仕組み が必要12年12月3日月曜日
  27. 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 callback12年12月3日月曜日
  28. 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. 29. 落穂ひろい • 他Threadだからって全て直列でやって たら遅いよね、とか • 特に、内部API経由でデータかき集める ようなサーバとか...ゴニョゴニョ12年12月3日月曜日
  30. 30. おわり •  _   \ヽ, ,、 _  `|/ノ \`ヽ、|  \, V     `L,,_     |ヽ、)                ,、    .|                   ヽYノ    /                     rヽ、.|   /        ,.. -──- .、    `ー-ヽ|ヮ  .|      , -´   __     `ヽ、  `|   |    / , -"´       ``-、  \  |   |   / /             \ ヽ |   ヽ,  y   /` - 、    ,.. -ヘ   ヽ. }ノ    ヽ,     /   /`,ゝ ´     ヽ   Y. .    i    ,     { {        ヽ   `、     l    ,イ─- 、.._ ヽ ,, _,.. -─:}   ! .    |  r-i| ー=ェェ:ゝ ,.∠ィェェ=ー |r 、.  l    |  {ト」l|.      : | "    ``: |!トリ  | .  │  ヽ、|      ;.」_      |ソ    ! .  │     ヽ     r──ッ    /ノ    |     |      lヽ    ̄ ̄     / イ    │ .    !    丶ヾヽ    ~   ,  ノ │   !     ト.    ミ.ゝ ヽ.____./  /  l   /     ヽ  ヽ           イ , / ,        ┼ヽ  -|r-、. レ |      \.             ノレ/         d͡) ./| _ノ  __ノ12年12月3日月曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×