The Evolution of Async-Programming (SD 2.0, JavaScript)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 3,829 views

 

Statistics

Views

Total Views
3,829
Views on SlideShare
2,957
Embed Views
872

Actions

Likes
2
Downloads
25
Comments
0

16 Embeds 872

http://blog.zhaojie.me 809
http://cosy13.rssing.com 17
http://cournand14.yanaru.com 10
http://www.itfeed.cn 6
http://cosy13.okeedo.com 6
http://www.oofeeds.com 6
http://reader.youdao.com 4
http://xianguo.com 4
file:// 2
http://64.120.204.88 2
http://www.zhuaxia.com 1
http://zhuaxia.com 1
http://translate.googleusercontent.com 1
http://twitter.com 1
http://cournand14.rssing.com 1
http://static.slidesharecdn.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. The Evolution ofAsync Programming ZhaoJie @ SNDA Nov, 2010
  • 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. Agenda• Why & How• Callback-based• Iterator-based• Library-based• Language-based• The future
  • 4. Why? Because the essence of Cloud, Web, Mobileis asynchronous computations
  • 5. How? By providing powerful languagefeatures / programming model / libraries
  • 6. Callback-based
  • 7. Async means Callback• In .NET • Begin/End • Event-based• JavaScript • XMLHttpRequest • DOM events
  • 8. Normalized Async Taskvar xxxAsync = function(arg0, arg2, ...) { return { start: function(callback) { ... var result = ... callback(result); } }}
  • 9. E.g. sleepAsyncvar sleepAsync = function(ms) { return { start: function(callback) { window.setTimeout(callback, ms); } };}
  • 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. 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. “Deal cards” in 4 different ways
  • 13. Demo 1Callback-based
  • 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. Iterator-based
  • 16. “yield” for Iterators function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  • 17. “yield” for Iteratorsvar it = numbers(); function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  • 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. “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. “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. “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. Demo 2Iterator-based
  • 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. Library-based /Reactive Framework
  • 25. Reactive Framework Fundamentally change the way you think about coordinating and orchestrating asynchronous and event-based programming
  • 26. HowBy showing that asynchronous and event-base computations are just push-based collections
  • 27. Interactive Reactive Environment Program
  • 28. Enumerable Collections interface IEnumerable<out T> { IEnumerator<T> GetEnumerator(); } interface IEnumerator<out T> { bool MoveNext(); T Current { get; } }
  • 29. Dualize
  • 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. IEnumerable & IEnumerator are prototypicalinterfaces for interactive collections andinteractive programs.IObservable & IObserver are prototypicalinterfaces for observable collections andreactive, asynchronous & event-based programs.
  • 32. LINQ to Observable If you are writing LINQ or declarative code in an interactive program...
  • 33. LINQ to Observable If you are writing LINQ or declarative code in an interactive program... You already know how to use it!
  • 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. 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. 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. 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. 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. Demo 4 Library-based /Reactive Framework
  • 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. 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. 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. 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. Language-based
  • 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. Concurrency Challenges• Shared State - Immutability• Code Locality - async { ... }• I/O Parallelism - async { ... }• Scaling to Multi-Machine - Agents with async { ... }
  • 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. Async Workflowasync {   let! res = <async work> ... }
  • 49. Async Workflow React!async {   let! res = <async work> ... }
  • 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. How async { ... } Works async { let! img = AsyncRead "http://..." printfn "loaded!" do! AsyncWrite img @"c:..." printfn "saved!" }
  • 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. 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. F# Resources http://fsharp.netProgramming F# Expert F# 2.0 Real World FP
  • 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. Can we use“Async Workflow” in JavaScript?
  • 57. Demo 5Jscex & Jscex.Async
  • 58. The Future / C# vNext
  • 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. 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. Conclusion• Async Programming is difficult• New programming language / feature / library / model can help• JavaScript is incredible.
  • 62. Q &A
  • 63. Thanks