Reactive Extensions for JavaScript

25
Slalom Confidential Reactive Extensions for JavaScript @JimWooley http://www.ThinqLinq.com Consultant

Transcript of Reactive Extensions for JavaScript

Page 1: Reactive Extensions for JavaScript

1 Slalom ConfidentialSlalom Confidential

Reactive Extensions for JavaScript

@JimWooleyhttp://www.ThinqLinq.com

Consultant

Page 2: Reactive Extensions for JavaScript

2 Slalom Confidential

Reactive Framework

“Rx is a library for composing asynchronous andevent-based operations using

observable collections.”

Page 3: Reactive Extensions for JavaScript

3 Slalom Confidential

Reactive Framework

“RxJs is a library for composing asynchronous andevent-based operations using

observable prototypes.”

Page 4: Reactive Extensions for JavaScript

4 Slalom Confidential

Observable Collection - Common Uses

Page 5: Reactive Extensions for JavaScript

5 Slalom Confidential

Flavors of Rx

Page 6: Reactive Extensions for JavaScript

6 Slalom Confidential

IEnumerator vs. IObserver

public interface IEnumerator{

object Current { get; }bool MoveNext();void Reset();

}

public interface IObserver<T>

void OnCompleted

void OnError Exception exception

void OnNext value

Page 7: Reactive Extensions for JavaScript

7 Slalom Confidential

LINQ for Javascript?

C# Query Syntaxvar query = from c in Customers

where c.City == "Chattanooga“select c.Name;

C# Lambda Syntaxvar query = Customers

.Where(c => c.City == "Chattanooga")

.Select(c => c.Name);

JavaScriptvar query = Customers

.Where(function (c) { return c.City === “Chattanooga” ; })

.Select(function (c) { return c.Name; });

Page 8: Reactive Extensions for JavaScript

8 Slalom Confidential

USING RX TO QUERY IN JAVASCRIPTdemo

Page 9: Reactive Extensions for JavaScript

9 Slalom Confidential

Rx Observable Pattern

var obs = ...;

// query?

var sub = obs.Subscribe(onNext : v => DoSomething(v),onError : e => HandleError(e),onCompleted : () => HandleDone);

sub.Dispose();

Page 10: Reactive Extensions for JavaScript

10 Slalom Confidential

RxJs Observable Pattern

var obs = ...;

// query?

var sub = obs.Subscribe(function(v) { DoSomething(v); },function(e) { HandleError(e); },function() { HandleDone(); });

sub.Dispose();

Page 11: Reactive Extensions for JavaScript

11 Slalom Confidential

var geo = Rx.Observable.Create(function (observer) { var watchId = navigator.geolocation.watchPosition(

function (pos) { observer.OnNext(pos.coords); },function (err) { observer.OnError(err); }

);

return function () {navigator.geolocation.clearWatch(watchId);

};});

var d = geo.Subscribe(function(pos) { alert(pos); });

d.Dispose();

Observable.Create

8675309

8675309

Page 12: Reactive Extensions for JavaScript

12 Slalom Confidential

Time

RX.Observable.Prototype

Query Flow Generator

SelectLet

Where

TakeSkip

GroupBy

StartsWithMerge

MergeObservableConcat

ZipCombineLatest

Switch

SelectManyTakeWhileTakeUntilSkipUntil

Prune

FlowScan

DistinctUntilChangedReplay

SkipLastTakeLast

DoCatchFinally

OnErrorResumeNext

TimeIntervalRemoveInterval

RemoveTimestampBufferWithTimeBufferWithCount

Throttle

SampleRepeatRetry

TimeoutDelay

SubscribeDematerializeAsObservsable

Publish

Page 13: Reactive Extensions for JavaScript

13 Slalom Confidential

Factory Generators

Rx.Observable.Range(0,5);Rx.Observable.Return(“This is a single value”);Rx.Observable.FromArray(*“a”, “b”, “c”+);Rx.Observable.Timer(1000,2000);Rx.Observable.Create(function(subscriber) { return function() { unsub() }});Rx.Observable.FromDOMEvent(Document.GetElementById(“image”),

“mousemove”);Rx.Observable.FromJQuery($(“div,, span”), “click”);$(“div, span”).ToObservable(“click”);Rx.Obsevable.XmlHttpRequest(url);

Page 14: Reactive Extensions for JavaScript

14 Slalom Confidential

DEMOGenerating Observables

Page 15: Reactive Extensions for JavaScript

15 Slalom Confidential

Combining streams

SelectMany

Merge

Zip Amb

CombineLatest

TakeUntil

TakeWhile Combine

Switch

StartWith

Concat

SkipWhile

Page 16: Reactive Extensions for JavaScript

16 Slalom Confidential

SelectMany

Ox

fx fx fx

Oy

Oy

Oy

Oy

var ObservableY = ObservableX.SelectMany(function(x) { SomeGenerator(x); });

Page 17: Reactive Extensions for JavaScript

17 Slalom Confidential

TakeUntil

oX

oY

oX

Page 18: Reactive Extensions for JavaScript

18 Slalom Confidential

Observable Events

First Class Objects Standardize event model Disposable Supports DI Mockable

Page 19: Reactive Extensions for JavaScript

19 Slalom Confidential

COMPOSING WITH EVENTSdemo

Page 20: Reactive Extensions for JavaScript

20 Slalom Confidential

Asynchronous Service Requests

Page 21: Reactive Extensions for JavaScript

21 Slalom Confidential

ASYNCHRONOUS SERVICESdemo

Page 22: Reactive Extensions for JavaScript

22 Slalom Confidential

Why RxJs?

Reuse LINQ knowledge Coordination of events/streams Standardized events State machine management Async time related operations Gesture Detection Web Sockets? ???

Page 23: Reactive Extensions for JavaScript

23 Slalom Confidential

Further Information

Rx Data Developer Center: http://msdn.microsoft.com/data/gg577609

Reactive Extensions Team Blog: http://blogs.msdn.com/rxteam

Channel9: http://channel9.msdn.com/Tags/Rx

Matt Podwysocki’s Blog:http://weblogs.asp.net/podwysocki/archive/tags/Reactive+Framework/default.aspx

Page 24: Reactive Extensions for JavaScript

24 Slalom Confidential

Call to Action

Get the bits• Shipped in Windows Phone 7 ROM• Install with NuGet• Download at MSDN Data Developer Center

Join the Community (MSDN forums)http://social.msdn.microsoft.com/Forums/en-US/rx

Page 25: Reactive Extensions for JavaScript

25 Slalom Confidential

Jim Wooley@jimwooley

http://www.ThinqLinq.com