Volt Volta Quo Quo Vadi Vadis? s? Erik Meijer Wes Dyer - - PowerPoint PPT Presentation

Volt Volta Quo Quo Vadi Vadis? s?

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

Fu Fundam damentally entally ch chan ange ge th the way e way yo you th think ink ab abou

• ut

t co coor

• rdin

dinating ating an and d

• r
• rch

chestrating estrating as asyn ynchrono chronous us an and d eve event nt-based based pro rogramming ramming

What? hat?

Be Beca cause use th the e es esse senc nce e of

• f Clo

loud, d, Web Web, , Mo Mobi bile le is is as asyn ynchrono chronous us co comp mputation utations s

Why? hy?

By By sho showing wing th that at as asyn ynchrono chronous us an and d eve event-based based co comp mputation utations s ar are e ju just st push sh-based based co colle llect ctions ions

How? w?

An And d yo you ha u have ve th the e ch chan ance ce to to win win so some me $$ $$$

Rea eactiv ctive Interact teractiv ive

Program in control Environment in control Progr gram am Envir vironment

• nment

1 2 1 2

A co A conc ncrete rete co collection lection of

• f po

poke ker r co coins ns

enumerable collection interface

• bservable

collection interface

implements

Enumerable collections

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

Enu numera merable ble co colle llection ction of ch f chips ips

GetEnumerator()

1 2

MoveNext() Current

3

Consumer pu pull lls successive elements from The collection

true/false

Ob Obse servabl rvable e co colle llection ction of ch f chips ps

Producer pu pushe hes successive elements from The collection

Subscribe

1 2

OnCompleted() OnNext

3

!(p||q) == (!p)&&(!q) !(p&&q) == (!p)||(!q)

Dua uality lity in n Mat ath h an and Eng ngineer ineering ing

Dua uality lity in n Mat ath h an and Eng ngineering ineering

R = R1+…+Rn 1/R = 1/R1+…+1/Rn 1/C = 1/C1+…+1/Cn C = C1+…+Cn

Dua uality lity in n Mat ath h an and Eng ngineering ineering

Dualize Enumerable collections

interface IEnumerable<out T> { IEnumerator<T> GetEnumerator() } interface IObservable<out T> { IDisposable Subscribe(IObserver<T> o) }

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) }

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) }

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) }

Iterator Subject Observer

intimately related

interface Iterable<T> { Iterator<T> iterator() } interface Iterator<T> { T next() // throws NoSuchElementException boolean hasNext() void remove() }

Ja Java a It Iterable rable & It & Itera erator tor Ob Observ ervable able/Observer /Observer

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(); } public interface Observer { void update(Observable o, Object arg); }

IEnume umerab rable/ le/IEn IEnume umerat rator

• r

pro roto toty typical pical inte terf rface ace for r inte teractiv ractive e colle lectio ctions ns and inte teractiv ractive e pro rogra rams ms IObserv servable able/IOb /IObserv server er pro roto toty typical pical inte terf rface ace for r

• b
• bse

serv rvable able co colle lections ctions an and d re reactiv tive, e, asynch nchro ronou nous s & & ev even ent-ba based sed pro rogra rams ms

Bu Buy y en enumera umerable ble co coll llection ections ge get t ob

• bserva

servable ble co coll llections ections for

• r fre

ree! e! Bo Both th co collection llection in inte terfaces rfaces su supp pport

• rt th

the e LI LINQ NQ St Standar andard d Qu Quer ery y Oper perators ators

Sa Samp mples les

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

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; });

Di Dict ctionary

• nary Sug

Suggest gest in n C# C#

Combines event stream from UI with async call across network

r ra r ray ray ra ⊑ ⊒

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());

Pree eemp mption tion ope perator ator (Este stere relle) lle)

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 != ""; });

In In Ja JavaS aScript cript

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 = "&gt;error retrieving results&lt;"; });

Sw Switch itch ins nste tead ad of Que f Query ry Sy Synt ntax ax

Twitte itter r on Bi n Bing ngMa Maps ps

jQuery.fn.ToObservable = function(eventType, eventData) { return Rx.Observable .FromJQuery(this, eventType, eventData); } Array.prototype.toObservable = function() { return Rx.Observable.FromArray(this); }; Rx.Observable.FromJQueryEvent(someJQueryObject, “mousemove”)  someJQueryObject.ToObservable(“mousemove”)

JQ JQue uery ry Bindi nding ng

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); }); });

Sa Same pa patter tern n as as di dictionary ctionary sug ugge gest st

dX dY

Drag ag & Dr Drop p On On Wind ndow

• ws

s Phone hone 7

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 … });

The e code e …

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 };

Si Side de-Effects Effects

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 });

Model del View ew

IObserver IObservable

MVC MVC

function startClock() { var timeModel = getTime(); var analogView = getAnalogClock(); timeModel.Subscribe(analogView); }

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; }); }

Th The Mod e Model el

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; }

Th The View e View

Ani Animations mations

Follow Us On Twitter

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

Download

Questions & Comments

emeijer@microsoft.com

Hack the system

I pr prefe fer r IObservab vable/I le/IOb Observe erver I pr prefe fer r Ie Ienume merab rable le/I /IEnume Enumerato rator