Movatterモバイル変換


[0]ホーム

URL:


Naosuke Yokoe, profile picture
Uploaded byNaosuke Yokoe
964 views

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

Embed presentation

Download to read offline
PerlとJavaScriptと               AndroidとiOSと              のんのんばあとオレ                   @zentooo12年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 request12年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 JS                      UI Thread   red => JS Execution                                  blue => UI Events12年12月3日月曜日
Async HTTP Request               UI Thread                 red => JS Execution                                         blue => UI Events                     ← Async HTTP request with send();                     ← request finished, fire “onload”12年12月3日月曜日
Sync HTTP Request              UI Thread                 red => JS Execution                                        blue => UI Events                    ← Sync HTTP Request with send();                    ← request finished12年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 here                    UI Thread12年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 )              • NSOperationQueue12年12月3日月曜日
大体の流れ              • Event HandlerでUI Eventを受け取る              • 重い処理をbackground threadに移譲              • Main Threadに戻ってUIを更新12年12月3日月曜日
Execution model of                Android / iOS                                  red => Code on Main Thread                                  yellow => Code on Other Threads               Main Thread   Other Threads12年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 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日月曜日
JSと決定的に異なる点              • 明示的に処理するThreadを決められる              • そのため、他Threadでの処理は別に同               期的でも構わない              • Thread間のインタフェースは非同期12年12月3日月曜日
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日月曜日
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日月曜日
分かること          • Main Threadのblockを防ぐだけなら、全て              のI/Fが非同期である必要は全くない          • 適切にThreadの境界を跨ぐための仕組み              が必要12年12月3日月曜日
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日月曜日
“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-、. レ |              \.             ノレ'/         d͡) ./| _ノ  __ノ12年12月3日月曜日

Recommended

PDF
Em synchrony について
PPTX
Domino Query Language (DQL)
PDF
Flow.js
 
PDF
strace for Perl Mongers
PDF
XHR2 Wonder Land
 
PDF
ICT ERA + ABC 2012 Tohoku
PDF
AWSクラウドサービスツアー
PDF
Androidの通信周りのコーディングについて
PPTX
たのしいNode.js
PDF
Node.jsでブラウザメッセンジャー
PDF
これからの「async/await」の話をしよう
PPTX
C#の書き方
PDF
Project Loom - 限定継続と軽量スレッド -
PDF
C#次世代非同期処理概観 - Task vs Reactive Extensions
PPTX
モダン JavaScript における非同期処理 - Promise, async/await -
PDF
いまさら恥ずかしくてAsyncをawaitした
PDF
Node.js入門
PDF
async/await不要論
PPTX
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
PDF
セプテーニさんでのセミナー
PDF
東京Node学園#3 Domains & Isolates
PDF
Introduction pp.js
PDF
Web Worker +α - HTML5/JavaScript and Service Worker API
PPTX
C#の書き方
PPTX
Reactive Programming
PPTX
Web Workers
PDF
Windows 8時代のUXを支える非同期プログラミング
PDF
inside 2012新卒説明会

More Related Content

PDF
Em synchrony について
PPTX
Domino Query Language (DQL)
PDF
Flow.js
 
PDF
strace for Perl Mongers
PDF
XHR2 Wonder Land
 
PDF
ICT ERA + ABC 2012 Tohoku
PDF
AWSクラウドサービスツアー
PDF
Androidの通信周りのコーディングについて
Em synchrony について
Domino Query Language (DQL)
Flow.js
 
strace for Perl Mongers
XHR2 Wonder Land
 
ICT ERA + ABC 2012 Tohoku
AWSクラウドサービスツアー
Androidの通信周りのコーディングについて

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

PPTX
たのしいNode.js
PDF
Node.jsでブラウザメッセンジャー
PDF
これからの「async/await」の話をしよう
PPTX
C#の書き方
PDF
Project Loom - 限定継続と軽量スレッド -
PDF
C#次世代非同期処理概観 - Task vs Reactive Extensions
PPTX
モダン JavaScript における非同期処理 - Promise, async/await -
PDF
いまさら恥ずかしくてAsyncをawaitした
PDF
Node.js入門
PDF
async/await不要論
PPTX
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
PDF
セプテーニさんでのセミナー
PDF
東京Node学園#3 Domains & Isolates
PDF
Introduction pp.js
PDF
Web Worker +α - HTML5/JavaScript and Service Worker API
PPTX
C#の書き方
PPTX
Reactive Programming
PPTX
Web Workers
PDF
Windows 8時代のUXを支える非同期プログラミング
PDF
inside 2012新卒説明会
たのしいNode.js
Node.jsでブラウザメッセンジャー
これからの「async/await」の話をしよう
C#の書き方
Project Loom - 限定継続と軽量スレッド -
C#次世代非同期処理概観 - Task vs Reactive Extensions
モダン JavaScript における非同期処理 - Promise, async/await -
いまさら恥ずかしくてAsyncをawaitした
Node.js入門
async/await不要論
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
セプテーニさんでのセミナー
東京Node学園#3 Domains & Isolates
Introduction pp.js
Web Worker +α - HTML5/JavaScript and Service Worker API
C#の書き方
Reactive Programming
Web Workers
Windows 8時代のUXを支える非同期プログラミング
inside 2012新卒説明会

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

  • 1.
    PerlとJavaScriptと AndroidとiOSと のんのんばあとオレ @zentooo12年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 request12年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 ofJS UI Thread red => JS Execution blue => UI Events12年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 finished12年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 stillhere UI Thread12年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 ) • NSOperationQueue12年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 Threads12年12月3日月曜日
  • 21.
    Android (AsyncTask) classATask 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 callback12年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 callback12年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 callback12年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-、. レ |      \.             ノレ'/         d͡) ./| _ノ  __ノ12年12月3日月曜日

[8]ページ先頭

©2009-2025 Movatter.jp