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

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

on

  • 3,791 views

 

Statistics

Views

Total Views
3,791
Views on SlideShare
2,923
Embed Views
868

Actions

Likes
2
Downloads
25
Comments
0

16 Embeds 868

http://blog.zhaojie.me 805
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) The Evolution of Async-Programming (SD 2.0, JavaScript) Presentation Transcript

  • The Evolution ofAsync Programming ZhaoJie @ SNDA Nov, 2010
  • About Me• / / Jeffrey Zhao /•• Blog: http://blog.zhaojie.me/• Twitter: @jeffz_cn• F#, Scala, JavaScript, Python, .NET, mono...• Java (as the language) hater
  • Agenda• Why & How• Callback-based• Iterator-based• Library-based• Language-based• The future View slide
  • Why? Because the essence of Cloud, Web, Mobileis asynchronous computations View slide
  • 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) { ... var result = ... callback(result); } }}
  • E.g. sleepAsyncvar sleepAsync = function(ms) { return { start: function(callback) { window.setTimeout(callback, ms); } };}
  • 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(); } };}
  • 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(); } };}
  • “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 / using / while / for ...• Very difficult to • Combine multiple asynchronous operations • Deal with exceptions and cancellation
  • Iterator-based
  • “yield” for Iterators function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  • “yield” for Iteratorsvar it = numbers(); function numbers() { var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  • “yield” for Iteratorsvar it = numbers(); function numbers() {var n0 = it.next(); var s0 = yield 0; var s1 = yield 1; var s2 = yield 2; }
  • “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; }
  • “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; }
  • “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); }
  • Demo 2Iterator-based
  • “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
  • Library-based /Reactive Framework
  • Reactive Framework Fundamentally change the way you think about coordinating and orchestrating asynchronous and event-based programming
  • 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> { bool MoveNext(); T Current { get; } }
  • Dualize
  • Observable Collectionsinterface IObservable<out T> { IDisposable Subscribe(IObserver<T> o)}interface IObserver<in T> { void OnCompleted(); void OnNext(T item); void OnError(Exception ex);}
  • IEnumerable & IEnumerator are prototypicalinterfaces for interactive collections andinteractive programs.IObservable & IObserver are prototypicalinterfaces for observable collections andreactive, asynchronous & event-based programs.
  • 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 know how to use it!
  • 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
  • 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
  • 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 • ...
  • 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);
  • 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); });
  • Demo 4 Library-based /Reactive Framework
  • 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• ...
  • 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#
  • 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
  • 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/
  • Language-based
  • 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
  • Concurrency Challenges• Shared State - Immutability• Code Locality - async { ... }• I/O Parallelism - async { ... }• Scaling to Multi-Machine - Agents with async { ... }
  • 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
  • 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 Event a Timer Callback a Query Response a Web Servcie Response a Disk I/O Completion an Agent Message
  • How async { ... } Works async { let! img = AsyncRead "http://..." printfn "loaded!" do! AsyncWrite img @"c:..." printfn "saved!" }
  • 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())))))
  • 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
  • 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 rescure?)• Reactive Framework • Can be used at both server-side and client-side. • New async model brings learning cost.
  • 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.DownloadStringTaskAsync(url); var text = await task; var xml = XElement.Parse(text); return xml;}
  • 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;}
  • Conclusion• Async Programming is difficult• New programming language / feature / library / model can help• JavaScript is incredible.
  • Q &A
  • Thanks