Reactive programming pattern seems to get more and more trusted by developers for building large-scale Web applications. Applications built with this pattern make use of frameworks, libraries or architecture styles that eventually will force you to intensively use RxJS and its operators. It’s kind of difficult to start using ngrx/store if you haven’t already being familiar with RxJS operators. This is why I thought it would be nice to create a playground project where we could gather as many RxJS operators examples as possible, using Angular. This will help you to visually understand the exact behavior of an RxJS operator.
The Playground
The previous gif image is actually the home screen of the project, making use of RxJS operators in order to flip individual div elements.
let counter = 0;
const interval$ = Observable.interval(100).take(13 * 5).map(i => i % 13);
const indexSubject: Subject<number> = new BehaviorSubject(counter);
interval$.withLatestFrom(indexSubject)
.subscribe(([i, j]) => {
this.phrases[j][i].highlighted = true;
if (i === 12) {
counter++;
indexSubject.next(counter);
}
});
The project is built with Angular 4, Angular Material 2 and has currently examples for the most commonly used RxJS operators, such as merge, scan, reduce or combineLatest. I will be adding more in the future and you are welcomed to contribute as well. You will find that each example has 3 tabs, one to show what an operator can do, another that has an iframe with the operator’s documentation and a third one to show the most important code lines used for the example.
I have deployed the app on Microsoft Azure. Make sure you clone or fork the repository and get the latest changes being committed every time.
In case you find my blog’s content interesting, register your email to receive notifications of new posts and follow chsakell’s Blog on its Facebook or Twitter accounts.
| .NET Web Application Development by Chris S. | |||
|
|
||
