Learn RxJS by examples
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.