Learn RxJS by examples
RxJS is a javascript library that brings the concept of “reactive programming” to the web, a quite powerful idea of transforming, composing, and querying streams of data, from simple arrays, and events to complex data like websockets. Learning how to work with it is not the easiest part, but when I did it I started using it in almost every project, and of course I love it.
The first project in which I used it was a small website with some animations and transitions between pages triggered by user’s input ( and other things like onTransitionEnd, onVideoEnd ) — seemed like a perfect match for RxJS. And since finding real examples and projects wasn’t the easiest job during my learning process, I have decided to extract few cases from the project and posted them at codepen.
If you are not familiar with RxJS at all, I would recommend to check out egghead.io courses, they are pretty good.
Click on Codepen examples and checkout the code and comments for details.
Case 1: Choosing direction
The home page is kind of intro where a user has to choice to go to the left ( past ) or to the right ( future ) and based on mouse position I need to make small CSS transition.
When I work with RxJS and streams I always ask myself 2 questions: What I want for output and what I have for input, in that case, my output needs to be one of 3 states “NOW” (default position), “PAST” and “FUTURE”, and my input is mouse position.
Case 2: Slider example
After the user selected his direction there is page with slider, creating one with RxJS is really straightforward
What I want: Index of the currently shown slide. What I have: user click on next or previous button, mouseWheel event, or press left/right key ( keyDown event )
Case 3: Video Player
I also had to create custom video player which triggers next slide ( from previous example ) when video ends. For that case will just show replay button at the end.
What I want: current video time and when the video end. What I have: onEnd event and time update event.
I hope these examples are useful to some of you. I was struggling to find real cases of RxJS when I tried to learn it an year ago.
