0
The Evolution ofAsync Programming    ZhaoJie @ SNDA       Nov, 2010
About Me•       /        / Jeffrey Zhao /•• Blog: http://blog.zhaojie.me/• Twitter: @jeffz_cn• F#, Scala, JavaScript, Pyth...
Agenda• Why & How• Callback-based• Iterator-based• Library-based• Language-based• The future
Why?   Because the essence of      Cloud, Web, Mobileis asynchronous computations
How? By providing powerful languagefeatures / programming model /             libraries
Callback-based
Async means Callback• In .NET  •   Begin/End  •   Event-based• JavaScript  •   XMLHttpRequest  •   DOM events
Normalized Async Taskvar xxxAsync = function(arg0, arg2, ...) {    return {        start: function(callback) {            ...
E.g. sleepAsyncvar sleepAsync = function(ms) {    return {        start: function(callback) {             window.setTimeou...
E.g. receiveAsyncXMLHttpRequest.prototype.receiveAsync = function() {    var _this = this;    return {        start: funct...
E.g. moveAsyncvar moveAsync = function(e, start, end, duration) {  return {    start: function(callback) {      var t = 0;...
“Deal cards” in 4 different ways
Demo 1Callback-based
Code Locality is Broken• Used to expressing algorithms linearly• Async requires logical division of algorithms  •   No if ...
Iterator-based
“yield” for Iterators    function numbers() {        var s0 = yield 0;    	        var s1 = yield 1;    	        var s2 = ...
“yield” for Iteratorsvar it = numbers();                      function numbers() {                          var s0 = yield...
“yield” for Iteratorsvar it = numbers();                      function numbers() {var n0 = it.next();                     ...
“yield” for Iteratorsvar it = numbers();                        function numbers() {var n0 = it.next();                   ...
“yield” for Iteratorsvar it = numbers();                        function numbers() {var n0 = it.next();                   ...
“yield” for Iteratorsvar it = numbers();                        function numbers() {var n0 = it.next();                   ...
Demo 2Iterator-based
“yield” for Async• Programming features in modern languages• Coming with new programming patterns• Keep code locality  •  ...
Library-based /Reactive Framework
Reactive Framework Fundamentally change the way you   think about coordinating and  orchestrating asynchronous and     eve...
HowBy showing that asynchronous and event-base computations are just      push-based collections
Interactive                 Reactive              Environment               Program
Enumerable Collections interface IEnumerable<out T> {     IEnumerator<T> GetEnumerator(); } interface IEnumerator<out T> {...
Dualize
Observable Collectionsinterface IObservable<out T> {    IDisposable Subscribe(IObserver<T> o)}interface IObserver<in T> { ...
IEnumerable & IEnumerator are prototypicalinterfaces for interactive collections andinteractive programs.IObservable & IOb...
LINQ to Observable        If you are writing    LINQ or declarative code   in an interactive program...
LINQ to Observable         If you are writing     LINQ or declarative code    in an interactive program...  You already kn...
LINQ... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many differ...
LINQ... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many differ...
Rx in JavaScript• A full featured port for JavaScript  •   Easy-to-use conversions from existing DOM,      XmlHttpRequest,...
Time Flies like an Arrowvar container = $("#container");var mouseMove = container.toObservable("mousemove");for (var i = 0...
Wikipedia Lookupvar textBox = $("#searchInput");var searcher = textBox    .toObservable("keyup")    .Throttle(500)    .Sel...
Demo 4  Library-based /Reactive Framework
Benefits of Rx• Easy to composite and coordinate async  operations• Express the algorithm in functional ways  •   Helper me...
Rx & Language Features• Features in C# that Rx uses •   Extension method •   Lambda expression & closure •   Type inferenc...
Portability• Rx can be easily ported to various languages  •   Scala  •   Ruby  •   Python  •   modern languages with basi...
Rx Resources• Matthew Podwysocki •   http://codebetter.com/blogs/matthew.podwysocki/• Reactive Framework on MSDN DevLabs •...
Language-based
F#• Language by Don Syme, MS Research• Strongly statically typed language• Functional language with OO ability• For indust...
Concurrency Challenges• Shared State - Immutability• Code Locality - async { ... }• I/O Parallelism - async { ... }• Scali...
What’s async { ... }... the principle we go by is, dont expect to seea particular concurrency model put into C#because the...
Async Workflowasync { 	    let! res = <async work>    ...	}
Async Workflow            React!async { 	    let! res = <async work>    ...	}
Async Workflow              React!async { 	    let! res = <async work>    ...	}        an HTTP Response            an UI Ev...
How async { ... } Works   async {       let! img = AsyncRead "http://..."       printfn "loaded!"       do! AsyncWrite img...
How async { ... } Works       async {           let! img = AsyncRead "http://..."           printfn "loaded!"           do...
F# Async Workflow• Library, not a language feature  •   Based on Computation Expressions in F#• Support all kinds of langua...
F# Resources                 http://fsharp.netProgramming F#     Expert F# 2.0     Real World FP
Comparison• F# Async Workflow •   Elegant, simple, easy to use •   Can only be used at server-side (WebSharper come to     ...
Can we use“Async Workflow”  in JavaScript?
Demo 5Jscex & Jscex.Async
The Future / C# vNext
Sourceasync Task<XElement> GetRssAsync(string url) {    var client = new WebClient();    var task = client.DownloadStringT...
CompiledTask<XElement> GetRssAsync(string url) {    var $builder = AsyncMethodBuilder<XElement>.Create();    var $state = ...
Conclusion• Async Programming is difficult• New programming language / feature /  library / model can help• JavaScript is i...
Q &A
Thanks
The Evolution of Async-Programming (SD 2.0, JavaScript)
Upcoming SlideShare
Loading in...5
×

The Evolution of Async-Programming (SD 2.0, JavaScript)

3,266

Published on

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

No Downloads
Views
Total Views
3,266
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "The Evolution of Async-Programming (SD 2.0, JavaScript)"

  1. 1. The Evolution ofAsync Programming ZhaoJie @ SNDA Nov, 2010
  2. 2. About Me• / / Jeffrey Zhao /•• Blog: http://blog.zhaojie.me/• Twitter: @jeffz_cn• F#, Scala, JavaScript, Python, .NET, mono...• Java (as the language) hater
  3. 3. Agenda• Why & How• Callback-based• Iterator-based• Library-based• Language-based• The future
  4. 4. Why? Because the essence of Cloud, Web, Mobileis asynchronous computations
  5. 5. How? By providing powerful languagefeatures / programming model / libraries
  6. 6. Callback-based
  7. 7. Async means Callback• In .NET • Begin/End • Event-based• JavaScript • XMLHttpRequest • DOM events
  8. 8. Normalized Async Taskvar xxxAsync = function(arg0, arg2, ...) { return { start: function(callback) { ... var result = ... callback(result); } }}
  9. 9. E.g. sleepAsyncvar sleepAsync = function(ms) { return { start: function(callback) { window.setTimeout(callback, ms); } };}
  10. 10. 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(); } };}
  11. 11. 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(); } };}
  12. 12. “Deal cards” in 4 different ways
  13. 13. Demo 1Callback-based
  14. 14. 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
  15. 15. Iterator-based
  16. 16. “yield” for Iterators function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  17. 17. “yield” for Iteratorsvar it = numbers(); function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  18. 18. “yield” for Iteratorsvar it = numbers(); function numbers() {var n0 = it.next(); var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  19. 19. “yield” for Iteratorsvar it = numbers(); function numbers() {var n0 = it.next(); var s0 = yield 0; var n1 = it.push(10); var s1 = yield 1; var s2 = yield 2; }
  20. 20. “yield” for Iteratorsvar it = numbers(); function numbers() {var n0 = it.next(); var s0 = yield 0; var n1 = it.push(10); var s1 = yield 1; var n2 = it.push(20); var s2 = yield 2; }
  21. 21. “yield” for Iteratorsvar it = numbers(); function numbers() {var n0 = it.next(); var s0 = yield 0; var n1 = it.push(10); var s1 = yield 1; var n2 = it.push(20); var s2 = yield 2;it.push(30); }
  22. 22. Demo 2Iterator-based
  23. 23. “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
  24. 24. Library-based /Reactive Framework
  25. 25. Reactive Framework Fundamentally change the way you think about coordinating and orchestrating asynchronous and event-based programming
  26. 26. HowBy showing that asynchronous and event-base computations are just push-based collections
  27. 27. Interactive Reactive Environment Program
  28. 28. Enumerable Collections interface IEnumerable<out T> { IEnumerator<T> GetEnumerator(); } interface IEnumerator<out T> { bool MoveNext(); T Current { get; } }
  29. 29. Dualize
  30. 30. Observable Collectionsinterface IObservable<out T> { IDisposable Subscribe(IObserver<T> o)}interface IObserver<in T> { void OnCompleted(); void OnNext(T item); void OnError(Exception ex);}
  31. 31. IEnumerable & IEnumerator are prototypicalinterfaces for interactive collections andinteractive programs.IObservable & IObserver are prototypicalinterfaces for observable collections andreactive, asynchronous & event-based programs.
  32. 32. LINQ to Observable If you are writing LINQ or declarative code in an interactive program...
  33. 33. LINQ to Observable If you are writing LINQ or declarative code in an interactive program... You already know how to use it!
  34. 34. LINQ... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many different concurrencymodel ... its more about finding things arecommon to to all kinds of concurrency ... - Anders Hejlsberg
  35. 35. LINQ... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many different concurrencymodel ... its more about finding things arecommon to to all kinds of concurrency ... - Anders Hejlsberg
  36. 36. 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 • ...
  37. 37. 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);
  38. 38. 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); });
  39. 39. Demo 4 Library-based /Reactive Framework
  40. 40. 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• ...
  41. 41. 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#
  42. 42. 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
  43. 43. 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/
  44. 44. Language-based
  45. 45. 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
  46. 46. Concurrency Challenges• Shared State - Immutability• Code Locality - async { ... }• I/O Parallelism - async { ... }• Scaling to Multi-Machine - Agents with async { ... }
  47. 47. What’s async { ... }... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many different concurrencymodel ... its more about finding things arecommon to to all kinds of concurrency ... - Anders Hejlsberg
  48. 48. Async Workflowasync {   let! res = <async work> ... }
  49. 49. Async Workflow React!async {   let! res = <async work> ... }
  50. 50. Async Workflow React!async {   let! res = <async work> ... } an HTTP Response an UI Event a Timer Callback a Query Response a Web Servcie Response a Disk I/O Completion an Agent Message
  51. 51. How async { ... } Works async { let! img = AsyncRead "http://..." printfn "loaded!" do! AsyncWrite img @"c:..." printfn "saved!" }
  52. 52. How async { ... } Works async { 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())))))
  53. 53. 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
  54. 54. F# Resources http://fsharp.netProgramming F# Expert F# 2.0 Real World FP
  55. 55. 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.
  56. 56. Can we use“Async Workflow” in JavaScript?
  57. 57. Demo 5Jscex & Jscex.Async
  58. 58. The Future / C# vNext
  59. 59. Sourceasync 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;}
  60. 60. CompiledTask<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;}
  61. 61. Conclusion• Async Programming is difficult• New programming language / feature / library / model can help• JavaScript is incredible.
  62. 62. Q &A
  63. 63. Thanks
  1. A particular slide catching your eye?

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

×