The Observable stream is a very scary subject (pun intended) in the frontend universe. Many developers have heard of them, and about how awesome they are, but get totally overwhelmed swimming in the sea of RxJS operators. I recommend that new developers set the RxJS aside for a moment and focus on the basic observable stream. From there, we can pick up a few basic patterns which makes building reactive things so much easier.
With that goal in mind, I created a fun, simple infographic that illustrates these patterns in a way that doesn’t require you to be a mad genius to understand.
You can download the full-sized infographic at http://bit.ly/observable-cheat-sheet.
I really hope that you find the infographic helpful. Be sure to drop me a line below if you have any questions or comments. #highFive
Well done Lukas. Love the visuals; learned something now with the
.scan( ...). Cool stuff!Thank you for this good cheat sheet.
It says under merge that it’s a good idea to break your initial streams into smaller chucks so that you can compose them together later. Could someone explain what this means?
Hi, Clay — what this means is that you can have smaller streams that do a smaller unit of work such as capture a click event and map it to a value. This allows us to then compose them back together using something like
Observable.mergeorObservable.combineLatestto produce a single stream that we consume in our application. The idea is that you identify where the streams functionally diverge and then abstract them into stand-alone “mini-streams” that come back together at the common point. It is really all about composition. Hope that helps!Awesome! Idk if I would necessarily call this a “cheat sheet”, but it’s definitely a good back-to-basics refresher comic for using Rxjs!
Thanks for a cool graphics!
Sorry for being a nerd, but I found https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/which-instance.md more useful (created for RxJs 4, covers 90% of RxJs 5 as well).
Cool stuff! I’ve always forgotten to use mapping. Your picture ?2 illustrates why I should use it))