observables - the why, what & how
TRANSCRIPT
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