observables - the why, what & how

Observablesthe why, what and how…

Filip Bruun Bech-LarsenFrontend Manager at IMPACT@filipbech

Filip

WE ARE HIRING IN CPH !!!

Who knows observables

already?

Why• Can make your code easier to write and read

• Helps you handle asynchronous events

• Handles multiple values

• Array + Promise => FP over time

Thinking reactively• A stream of form-submits => ajax responds

=> succesmessages

• A stream of mousedowns => stream of mousemoves => instructions to DOM (drag-drop)

• A stream of basket-clicks => ajax responds => new basket states

Whats so cool about it

• Clean code with fewer exceptions (its a stream)

• Combining observables

• Cancellation

• They are lazy (by default)

• They can be shared

and operators

• but don’t worry about those for now

• (the 40+ operators are why people think observables are hard)

How

• Might be standard (not the operators) someday

• Today: RxJS (we use v5 beta)

How to use an observable

How to use an observable

subscribe is like a forEach of then’s…

Where do they come from

• Rx.Observable.create()

• Rx.Subject()

• Rx.Observable.from()• Rx.Observable.of()• Rx.Observable.interval()

lets write some code

create interval observable with diff techniques

Things to (possibly) cover

• Map => switch, merge, concat

• Other operators

• Catching errors

• Sharing is caring

Angular 1.x• Use it when you want to be notified - basketupdate$

• Classic observable use cases (n values over n amount of time) - searchword$ (where its more of an implementation detail than a feature)

• $Ohttp (wraps $http in an observable - supports cancellation) https://gist.github.com/filipbech/98160440663c4f64e6f5fab08c97dc79

• Start with Rx.Subject()’s if you are used to deferred’s

• Remember to unsubscribe in $onDestroy or on the $destroy-event

Thank you for your attention

any questions?

@filipbech