I attended DinosaurJS last week — two full days of hobnobbing and talking shop with amazing JavaScript devs. What a whirlwind!
After every conference I attend I like to share a bit of what I learned with my team and the world. This time around, at Jeremy Foster’s talk, what stood out to me was a diagram that helped me better understand what an Observable is, and how I might use it.
If you don’t know much about observables, don’t worry. I hadn’t paid much attention to them either!
It’s definitely a pattern that is gaining more traction. I had heard of it being used in iOS programming and Angular, but I was never sure how it applied to the work I am doing with React/Redux.
During the talk, though, this graph is what helped me grasp where they fit more clearly.
In the diagram, scalar refers to a variable that holds a single value, while a vector contains multiple values. The Types associated with each are easy to understand in terms of synchronous program (e.g. String or Array).
What happens when you make the jump to asynchronous programming? (Which is what us JS devs really care about.) What Type do you use to represent a single async operation? Promises, of course.
But what if you want to subscribe to multiple async responses? Aha! Now, I’ve finally got a name – and more importantly a Type, to associate with a series of responses: Observable.
A common explanation of observables is that they let you to subscribe to streams of asynchronous events and manipulate that data. With it being a Type, that means that there are all sorts of methods associated with managing that Type. For example, filtering and merging your streams is easy peasy – and definitely worth exploring more.
For me, the visual just helped it click. Maybe it will help you too!
To learn even more about RxJS and observables, you can check out this github gist or these videos on egghead.io. On the React/Redux side, this library Redux Observable seems like a great starting point.