Erik Meijer Wes Dyer Jeffrey van Gogh Bart de Smet Matthew Podwysocki

Size: px

Start display at page:

Download "Erik Meijer Wes Dyer Jeffrey van Gogh Bart de Smet Matthew Podwysocki"

Laurel Wilkerson
6 years ago
Views:

1 Volta Quo Vadis?

2 Erik Meijer Wes Dyer Jeffrey van Gogh Bart de Smet Matthew Podwysocki

3 What? Fundamentally change the way you think about coordinating and orchestrating asynchronous and event-based programming

4 Why? Because the essence of Cloud, Web, Mobile is asynchronous computations

5 How? By showing that asynchronous and event-based computations are just push-based collections

6 And you have the chance to win some $$$

7 Environment 1 2 Program 2 Reactive Environment in control Interactive Program in control 1

8 A concrete collection of poker coins observable collection interface implements enumerable collection interface

9 Enumerable collections interface IEnumerable<out T> IEnumerator<T> GetEnumerator() } interface IEnumerator<out T>: IDisposable bool MoveNext() T Current get; } // throws Exception }

10 Enumerable collection of chips 1 GetEnumerator() MoveNext() 2 Consumer pulls successive elements from The collection Current 3 true/false

11 Observable collection of chips 1 Subscribe 2 OnNext Producer pushes successive elements from The collection OnCompleted() 3

12 Duality in Math and Engineering!(p q) == (!p)&&(!q)!(p&&q) == (!p) (!q)

Duality in Math and Engineering 1/R = 1/R 1 + +1/R

13 Duality in Math and Engineering 1/R = 1/R /R n R = R 1 + +R n 1/C = 1/C /C n C = C 1 + +C n

14 Duality in Math and Engineering

15 Dualize Enumerable collections interface IEnumerable<out T> IEnumerator<T> GetEnumerator() } interface IObservable<out T> IDisposable Subscribe(IObserver<T> o) }

16 Dualize Enumerable collections interface IEnumerator<out T> bool MoveNext() // throws Exception T Current get; } } interface IObserver<in T> void OnCompleted(bool done) T OnNext set; } void OnError(Exception e) }

17 Observable collections interface IObservable<out T> IDisposable Subscribe(IObserver<T> o) } interface IObserver<in T> void OnDone(bool done) T OnNext set; } void OnError(Exception e) }

18 Observable collections interface IObservable<out T> IDisposable Subscribe(IObserver<T> o) } interface IObserver<in T> void OnCompleted() void OnNext(T value) void OnError(Exception e) }

19 Iterator intimately related Subject Observer

20 Java Iterable & Iterator Observable/Observer interface Iterable<T> Iterator<T> iterator() class Observable void addobserver(observer o); } } void deleteobserver(observer o); void deleteobservers(); int countobservers(); void notifyobservers(); void notifyobservers(object arg); void setchanged(); void clearchanged(); boolean haschanged(); interface Iterator<T> T next() // throws NoSuchElementException public interface Observer void update(observable o, Object arg); } boolean hasnext() void remove() }

21 IEnumerable/IEnumerator prototypical interface for interactive collections and interactive programs IObservable/IObserver prototypical interface for observable collections and reactive, asynchronous & event-based programs

22 Buy enumerable collections get observable collections for free! Both collection interfaces support the LINQ Standard Query Operators

23 Samples Drag and Drop Dictionary Suggest (AJAX programming using LINQ queries) Clock (MVC programming using LINQ queries) Twitter on Bing maps Animation

25 Dictionary Suggest in C# Combines event stream from UI with async call across network Html Format(this string[] entries) } [RunAtOrigin()] IObservable<string[]> Suggest (this Dictionary dict, string prefix, int count) } var inputvalues = from i in Input.GetKeyUp() select i.value; var q = from s in inputvalues from r in Dictionary.Suggest(s, 10) select r.format(); q.subscribe(html => output.innerhtml = html; });

26 r ra ray r ray ra

27 Preemption operator (Esterelle) var q = from s in inputvalues from r in Dictionary.Suggest(s, 10) select r.format(); var q = inputvalues.throttle(500). Publish(_inputValues => from s in _inputvalues from r in Dictionary.Suggest(s, 10).TakeUntil(_inputValues) select r.format());

28 In JavaScript var input = document.getelementbyid("input"); var results = document.getelementbyid("results"); var changed = Rx.Observable.FromHtmlEvent(input, "keyup").select(function() return input.value }).Where(function(value) return value!= ""; });

29 Switch instead of Query Syntax changed.throttle(250).select(function(what) return query(what); }).Switch().Select(function(results) return formatashtml(results); }).Subscribe(function(html) results.innerhtml = html; }, function(error) results.innerhtml = ">error retrieving results<"; });

30 Twitter on BingMaps

31 JQuery Binding jquery.fn.toobservable = function(eventtype, eventdata) return Rx.Observable.FromJQuery(this, eventtype, eventdata); } Rx.Observable.FromJQueryEvent(someJQueryObject, mousemove ) somejqueryobject.toobservable( mousemove ) Array.prototype.toObservable = function() return Rx.Observable.FromArray(this); };

32 Same pattern as dictionary suggest Rx.Observable.Interval(10000).Select(function() return searchtwitter("#mix10"); }).Switch().Select(function(result) return JSON.parse(result.responseText); }).SelectMany(function(data) return data.results.toobservable(); }).Where(function(data) return data.geo!= null; }).Subscribe( function(data) var lat = data.geo.coordinates[0]; var lon = data.geo.coordinates[1]; addpushpin(map, data.id, data.created_at, lat, lon, data.profile_image_url, data.from_user, data.text); }, function(error) alert(error); }); });

33 Drag & Drop On Windows Phone 7 dx dy

34 The code var W = control to be dragged ; var mousedowns = from md in W.GetMouseDown() select true; var mouseups = from mu in W.GetMouseUp() select false; var mouseclicks = mousedowns.merge(mouseups); var mousemoves = from mm in W.GetMouseMove() select new mm.x, mm.y }; var mousediffs = from diff in mousemoves.skip(1).zip(mousemoves) select new dx = diff.first.x diff.second.x, dy = diff.first.y diff.second.y }; var mousedrag = from leftdown in mouseclicks from delta in mousediffs where leftdown select delta; mousedrag.subscribe(delta => move W by delta });

35 Side-Effects var mousediffs = from diff in mousemoves.skip(1).zip(mousemoves) select new dx = diff.first.x diff.second.x, dy = diff.first.y diff.second.y }; var mousediffs = mousemoves.let(_mousemoves => from diff in _mousemoves.skip(1).zip(_mousemoves) select new dx = diff.first.x diff.second.x, dy = diff.first.y diff.second.y });

36 IObserver MVC IObservable Model View

37 function startclock() var timemodel = gettime(); var analogview = getanalogclock(); } timemodel.subscribe(analogview);

38 The Model function gettime() return Rx.Observable.Interval(100).Select(function() var date = new Date(); var result = hours : date.gethours(), minutes : date.getminutes(), seconds : date.getseconds(), }; return result; }); }

39 The View function getanalogclock() var hour = document.getelementbyid("hour"); var minute = document.getelementbyid("minute"); var second = document.getelementbyid("second"); } var clock= new Rx.Observer( function(now) hour.src = "hour" + Math.floor(now.hours*5 % 60 - now.minutes/12) + ".png"; status = hour.src; minute.src = "minute" + now.minutes + ".png"; second.src = "second" + now.seconds + ".png"; }); return clock;

40 Animations

41 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" > <head> <title>rx for JavaScript Rocks!</title> <script src="rx.js" type="text/javascript"></script> <script type="text/javascript"> function tester() var mousemove = Rx.Observable.FromHtmlEvent(document, "mousemove"); var text = "time flies like an arrow"; var container = document.getelementbyid("container"); for (var i = 0; i < text.length; i++) (function(i) var s = document.createelement("span"); s.innerhtml = text.charat(i); s.style.position = "absolute"; container.appendchild(s); } } </script> </head> mousemove.delay(i * 100).Subscribe(function(mouseEvent) s.style.top = mouseevent.clienty + "px"; s.style.left = mouseevent.clientx + i * "px"; }); })(i); <body onload="tester()" style="font-family: Consolas, monospace; overflow: hidden"> <div id="container"></div> </body> </html>

43 Follow Us On Twitter #RxNET #RxJS (#Rx is filled with a lot of prescription garbage not related to our library :))

44 Download

45 Questions & Comments

46 Hack the system I prefer IObservable/IObserver I prefer Ienumerable/IEnumerator

Rx: Curing your Asynchronous Programming Blues Bart J.F. De Smet

Rx: Curing your Asynchronous Programming Blues Bart J.F. De Smet Microso' Corpora,on bartde@microso'.com Why Should I Care? GPS RSS feeds Stock,ckers Social media Server management Mission Statement Too