Reactive Extensions for JavaScript
Download as PPTX, PDF•5 likes•2,107 views
The document discusses Reactive Extensions (Rx) for JavaScript, which provides libraries for composing asynchronous and event-based operations using observable collections. It compares Rx with LINQ in C# and demonstrates various use cases such as querying with observables and creating observable patterns. Additionally, it highlights the benefits of RxJS for handling events, asynchronous operations, and coordinating streams, while providing resources for further learning and community engagement.
![Factory GeneratorsRx.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);](https://image.slidesharecdn.com/rxjs-110907093615-phpapp01/85/Reactive-Extensions-for-JavaScript-13-320.jpg)
Reactive Extensions for JavaScript
- 1. Reactive Extensions for JavaScript@JimWooleyhttp://www.ThinqLinq.comConsultant
- 2. Reactive Framework“Rx is a library for composingasynchronousandevent-based operations using observable collections.”
- 3. Reactive Framework“RxJsis a library for composingasynchronousandevent-based operations using observable prototypes.”
- 4. Observable Collection - Common Uses
- 7. 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; });
- 8. Using Rx to query in Javascriptdemo
- 9. Rx Observable Pattern var obs = ...; // query? var sub = obs.Subscribe( onNext : v => DoSomething(v), onError : e => HandleError(e), onCompleted : () => HandleDone); sub.Dispose();
- 10. RxJs Observable Pattern var obs = ...; // query? var sub = obs.Subscribe( function(v) { DoSomething(v); }, function(e) { HandleError(e); }, function() { HandleDone(); }); sub.Dispose();
- 11. 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.Create86753098675309
- 12. RX.Observable.PrototypeGeneratorFlowQuerySelectLetWhereTakeSkipGroupByDoCatchFinallyOnErrorResumeNextFlowScanDistinctUntilChangedReplaySkipLastTakeLastSubscribeDematerializeAsObservsablePublishStartsWithMergeMergeObservableConcatZipCombineLatestSwitchSelectManyTakeWhileTakeUntilSkipUntilPruneTime TimeIntervalRemoveIntervalRemoveTimestampBufferWithTimeBufferWithCountThrottleSampleRepeatRetryTimeoutDelay
- 13. Factory GeneratorsRx.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);
- 16. SelectManyvarObservableY = ObservableX.SelectMany(function(x) { SomeGenerator(x); });OxfxfxfxOyOyOyOy
- 17. TakeUntiloXoYoX
- 18. Observable EventsFirst Class Objects
- 20. Disposable
- 21. Supports DI
- 25. Why RxJs?Reuse LINQ knowledge
- 29. Async time related operations
- 31. Web Sockets?
- 32. ???Further InformationRx Data Developer Center: http://msdn.microsoft.com/data/gg577609Reactive Extensions Team Blog: http://blogs.msdn.com/rxteamChannel9: http://channel9.msdn.com/Tags/RxMatt Podwysocki’s Blog:http://weblogs.asp.net/podwysocki/archive/tags/Reactive+Framework/default.aspx
- 33. Call to ActionGet the bitsShipped in Windows Phone 7 ROM
- 35. Download at MSDN Data Developer CenterJoin the Community (MSDN forums)http://social.msdn.microsoft.com/Forums/en-US/rx
- 37. Fill out your Surveysreminder