The Evolution of Async-Programming (SD 2.0, JavaScript)
Transcript of The Evolution of Async-Programming (SD 2.0, JavaScript)
![Page 1: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/1.jpg)
The Evolution ofAsync Programming
ZhaoJie @ SNDANov, 2010
![Page 2: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/2.jpg)
About Me
• 赵劼 / 老赵 / Jeffrey Zhao / 赵姐夫
• 日写代码三百行,不辞长做程序员• Blog: http://blog.zhaojie.me/
• Twitter: @jeffz_cn
• F#, Scala, JavaScript, Python, .NET, mono...
• Java (as the language) hater
![Page 3: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/3.jpg)
Agenda
• Why & How
• Callback-based
• Iterator-based
• Library-based
• Language-based
• The future
![Page 4: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/4.jpg)
Why?
Because the essence ofCloud, Web, Mobile
is asynchronous computations
![Page 5: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/5.jpg)
How?
By providing powerful language features / programming model /
libraries
![Page 6: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/6.jpg)
Callback-based
![Page 7: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/7.jpg)
Async means Callback
• In .NET• Begin/End
• Event-based
• JavaScript• XMLHttpRequest
• DOM events
![Page 8: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/8.jpg)
Normalized Async Task
var xxxAsync = function(arg0, arg2, ...) { return { start: function(callback) { ... var result = ... callback(result); } }}
![Page 9: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/9.jpg)
E.g. sleepAsync
var sleepAsync = function(ms) { return { start: function(callback) { window.setTimeout(callback, ms); } };}
![Page 10: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/10.jpg)
E.g. receiveAsyncXMLHttpRequest.prototype.receiveAsync = function() { var _this = this; return { start: function(callback) { _this.onreadystatechange = function() { if (this.readyState == 4) { callback(_this.responseText); } }
_this.send(); } };}
![Page 11: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/11.jpg)
E.g. moveAsyncvar moveAsync = function(e, start, end, duration) { return { start: function(callback) { var t = 0; var loop = function() { if (t < duration) { t += 50; e.style.left = start.x + (end.x - start.x) * t / duration; e.style.top = start.y + (end.y - start.y) * t / duration; sleepAsync(50).start(loop); // composite with sleepAsync } else { if (callback) callback(); } } loop(); } };}
![Page 12: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/12.jpg)
“Deal cards” in 4 different ways
![Page 13: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/13.jpg)
Demo 1
Callback-based
![Page 14: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/14.jpg)
![Page 15: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/15.jpg)
Code Locality is Broken
• Used to expressing algorithms linearly
• Async requires logical division of algorithms• No if / using / while / for ...
• Very difficult to• Combine multiple asynchronous operations
• Deal with exceptions and cancellation
![Page 16: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/16.jpg)
Iterator-based
![Page 17: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/17.jpg)
“yield” for Iterators
function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2;
}
![Page 18: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/18.jpg)
“yield” for Iterators
function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2;
}
var it = numbers();
![Page 19: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/19.jpg)
“yield” for Iterators
function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2;
}
var n0 = it.next();
var it = numbers();
![Page 20: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/20.jpg)
“yield” for Iterators
function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2;
}
var n0 = it.next();
var n1 = it.push(10);
var it = numbers();
![Page 21: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/21.jpg)
“yield” for Iterators
function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2;
}
var n0 = it.next();
var n1 = it.push(10);
var n2 = it.push(20);
var it = numbers();
![Page 22: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/22.jpg)
“yield” for Iterators
function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2;
}
var n0 = it.next();
var n1 = it.push(10);
var n2 = it.push(20);
it.push(30);
var it = numbers();
![Page 23: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/23.jpg)
Demo 2
Iterator-based
![Page 24: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/24.jpg)
“yield” for Async
• Programming features in modern languages
• Coming with new programming patterns
• Keep code locality• Support most constructions: if / using / while / for ...
• The primitives for Fibers - lightweight computation units
![Page 25: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/25.jpg)
Library-based / Reactive Framework
![Page 26: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/26.jpg)
Reactive Framework
Fundamentally change the way you think about coordinating and
orchestrating asynchronous and event-based programming
![Page 27: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/27.jpg)
How
By showing that asynchronous and event-base computations are just
push-based collections
![Page 28: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/28.jpg)
Environment
Program
Interactive Reactive
![Page 29: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/29.jpg)
Enumerable Collections
interface IEnumerable<out T> { IEnumerator<T> GetEnumerator();}
interface IEnumerator<out T> { bool MoveNext(); T Current { get; }}
![Page 30: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/30.jpg)
Dualize
![Page 31: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/31.jpg)
Observable Collections
interface IObservable<out T> { IDisposable Subscribe(IObserver<T> o)}
interface IObserver<in T> { void OnCompleted(); void OnNext(T item); void OnError(Exception ex);}
![Page 32: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/32.jpg)
IEnumerable & IEnumerator are prototypical interfaces for interactive collections and interactive programs.
IObservable & IObserver are prototypical interfaces for observable collections and reactive, asynchronous & event-based programs.
![Page 33: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/33.jpg)
LINQ to Observable
If you are writingLINQ or declarative codein an interactive program...
![Page 34: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/34.jpg)
LINQ to Observable
If you are writingLINQ or declarative codein an interactive program...
You already know how to use it!
![Page 35: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/35.jpg)
LINQ
... the principle we go by is, don't expect to see a particular concurrency model put into C# because there're many different concurrency model ... it's more about finding things are common to to all kinds of concurrency ...
- Anders Hejlsberg
![Page 36: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/36.jpg)
LINQ
... the principle we go by is, don't expect to see a particular concurrency model put into C# because there're many different concurrency model ... it's more about finding things are common to to all kinds of concurrency ...
- Anders Hejlsberg
![Page 37: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/37.jpg)
Rx in JavaScript
• A full featured port for JavaScript• Easy-to-use conversions from existing DOM,
XmlHttpRequest, etc
• In a download size of less than 7kb (gzipped)
• Bindings for various libraries / frameworks• jQuery
• MooTools
• Dojo
• ...
![Page 38: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/38.jpg)
Time Flies like an Arrowvar container = $("#container");var mouseMove = container.toObservable("mousemove");
for (var i = 0; i < text.length; i++) { (function(i) { var ele = $("<span/>").text(text.charAt(i)); ele.css({position: "absolute"}).appendTo(container);
mouseMove.Delay(i * 100).Subscribe(function (ev) { ele.css({ left: ev.clientX + i * 20 + 15 + "px", top: ev.clientY + "px" }); });
})(i);
![Page 39: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/39.jpg)
Wikipedia Lookupvar textBox = $("#searchInput");var searcher = textBox .toObservable("keyup") .Throttle(500) .Select(function(_) { return textBox.val(); }) .Select(function(term) { return queryWikipedia(term); }) .Switch();
searcher.Subscribe( function(data) { var results = $("#results"); results.empty(); $.each(data, function(_, value) { results.append($("<li/>").text(value)); }); }, function(error) { $("#error").html(error); });
![Page 40: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/40.jpg)
Demo 4
Library-based /Reactive Framework
![Page 41: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/41.jpg)
Benefits of Rx
• Easy to composite and coordinate async operations
• Express the algorithm in functional ways• Helper method: For / While / If / Try / Switch...
• Easy to be unit tested
• ...
![Page 42: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/42.jpg)
Rx & Language Features
• Features in C# that Rx uses• Extension method
• Lambda expression & closure
• Type inference
• LINQ query expression
• Rx has been implemented in ...• C# & VB
• JavaScript
• F#
![Page 43: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/43.jpg)
Portability
• Rx can be easily ported to various languages• Scala
• Ruby
• Python
• modern languages with basic functional features
• Almost impossible to implement Rx in Java• Cannot extend a type without breaking code
• Missing enough functional features
![Page 44: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/44.jpg)
Rx Resources
• Matthew Podwysocki• http://codebetter.com/blogs/matthew.podwysocki/
• Reactive Framework on MSDN DevLabs• http://msdn.microsoft.com/en-us/devlabs/
ee794896.aspx
• Tomáš Petříček• http://tomasp.net/
![Page 45: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/45.jpg)
Language-based
![Page 46: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/46.jpg)
F#
• Language by Don Syme, MS Research
• Strongly statically typed language
• Functional language with OO ability
• For industry and education• Open source (Apache 2.0)
• Cross-platform supported by Microsoft
![Page 47: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/47.jpg)
Concurrency Challenges
• Shared State - Immutability
• Code Locality - async { ... }
• I/O Parallelism - async { ... }
• Scaling to Multi-Machine - Agents with async { ... }
![Page 48: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/48.jpg)
What’s async { ... }
... the principle we go by is, don't expect to see a particular concurrency model put into C# because there're many different concurrency model ... it's more about finding things are common to to all kinds of concurrency ...
- Anders Hejlsberg
![Page 49: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/49.jpg)
Async Workflow
async { let! res = <async work> ...}
![Page 50: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/50.jpg)
Async Workflow
async { let! res = <async work> ...}
React!
![Page 51: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/51.jpg)
Async Workflow
async { let! res = <async work> ...}
React!
an HTTP Responsean UI Event
a Timer Callbacka Query Response
a Web Servcie Responsea Disk I/O Completion
an Agent Message
![Page 52: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/52.jpg)
How async { ... } Worksasync { let! img = AsyncRead "http://..." printfn "loaded!" do! AsyncWrite img @"c:\..." printfn "saved!" }
![Page 53: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/53.jpg)
How async { ... } Worksasync { let! img = AsyncRead "http://..." printfn "loaded!" do! AsyncWrite img @"c:\..." printfn "saved!" }
async.Delay(fun -> async.Bind(AsyncRead "http://...", (fun img -> printfn "loaded!" async.Bind(AsyncWrite img @"c:\...", (fun () -> printfn "saved!" async.Return())))))
=
![Page 54: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/54.jpg)
F# Async Workflow• Library, not a language feature• Based on Computation Expressions in F#
• Support all kinds of language constructions• Error handling: try...catch
• Loop: while / for (like “foreach” in C#)
• Others: if / use (like “using” in C#), etc.
• Easy to• Combine multiple asynchronous operations
• Deal with exceptions and cancellation
![Page 55: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/55.jpg)
F# Resourceshttp://fsharp.net
Programming F# Expert F# 2.0 Real World FP
![Page 56: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/56.jpg)
Comparison
• F# Async Workflow• Elegant, simple, easy to use
• Can only be used at server-side (WebSharper come to rescure?)
• Reactive Framework• Can be used at both server-side and client-side.
• New async model brings learning cost.
![Page 57: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/57.jpg)
Can we use“Async Workflow”
in JavaScript?
![Page 58: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/58.jpg)
Demo 5
Jscex & Jscex.Async
![Page 59: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/59.jpg)
The Future / C# vNext
![Page 60: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/60.jpg)
async Task<XElement> GetRssAsync(string url) { var client = new WebClient(); var task = client.DownloadStringTaskAsync(url); var text = await task; var xml = XElement.Parse(text); return xml;}
Source
![Page 61: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/61.jpg)
Task<XElement> GetRssAsync(string url) { var $builder = AsyncMethodBuilder<XElement>.Create(); var $state = 0; TaskAwaiter<string> $a1; Action $resume = delegate { try { if ($state == 1) goto L1; var client = new WebClient(); var task = client.DownloadStringTaskAsync(url); $state = 1; $a1 = task.GetAwaiter(); if ($a1.BeginAwait($resume)) return; L1: var text = $a1.EndAwait(); var xml = XElement.Parse(text); $builder.SetResult(xml); } catch (Exception $ex) { $builder.SetException($ex); } }; $resume(); return $builder.Task;}
Compiled
![Page 62: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/62.jpg)
Conclusion
• Async Programming is difficult
• New programming language / feature / library / model can help
• JavaScript is incredible.
![Page 63: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/63.jpg)
Q & A
![Page 64: The Evolution of Async-Programming (SD 2.0, JavaScript)](https://reader033.fdocuments.in/reader033/viewer/2022042714/554eba87b4c905977e8b555c/html5/thumbnails/64.jpg)
Thanks