RxJS

Reactive programming, Observables, timeless patterns and new implementations

 

What is Reactive Programming?

"Reactive programming is programming with asynchronous data streams."

-- The introduction to Reactive Programming you've been missing by Andre Staltz

Demo 1

What is RxJS?

What is RxJS?

...is a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript

What is RxJS?

  • reactive programming
  • treating events as collections
  • manipulating sets of events with operators

"RxJS is LoDash or Underscore for async."

RxJS

  • latest version 5.0.3
  • aligned API with ES7 Observable proposal
  • open source, Microsoft, Netflix, Google

Promise vs Observable

Promises and Observables are built to solve problems around async

(to avoid "callback hell")

Async in web apps

  • DOM events
  • Animations
  • AJAX
  • WebSockets
  • Server Sent Events

Observables are cancellable

// on page init
const subscription = ApiService.getSomeData()
   .subscribe(
     function (x) {
       console.log('Success: %s', x);
     },
     function (err) {
       console.log('Error: %s', err);
     },
     function () {
       console.log('Completed!');
     }
   )

// on page leave
subscription.unsubscribe()

Where we use RxJS?

  • Angular - HttpService, FormControls, url params
  • UI - Typeahead, Http error handling/alerts
  • ngrx - redux-like state management
  • node - error handling, sms/slack notifications, analytics, etc.
  • "every time a customer successfully updates their vehicle, send the newly updated vehicle to segment"
  • "every time an API call fails, log it to sentry"

Resources

Damir Šehić

damir @jsgzb

@DyslexicDcuk

DyslexicDcuk

Made with Slides.com