Hands-On RxJS for Web Development

In this video, we will learn about two types of Observables and the difference between them.

   •  Learn about cold and hot Observables

   •  Understand the benefits of Hot observables and how to convert cold observables to hot

   •  Find out when to use which type of observables

In this video, we will learn the main Subjects types for events multicasting.

   •  Learn about the main Subjects types

   •  Dive into each Subject type for more details

   •  Demo a practice code in codepen.io

Here we will learn what application state management is and its benefits.

   •  Describe the problem that application state management should solve

   •  Show how application state management system can solve it

   •  Describe application state management lib for ngRx-Store of Angular

In this video, we will find out how to create a component that emits data reactively and how to subscribe to its updates.

   •  Provide diagrams for vanilla JavaScript example in codepen.io and Angular demo project example

   •  Review the code solution in codepen.io and run it in a browser

   •  Review the code solution in an Angular demo project and run it in a browser

In this video we learn about two types of operators: Observable.prototype methods and pipe-able pure function. Reveal benefits of pipe-able operators like app bundle size reduce and easy custom operators creation

   •  Learn about two types of operators: Observable.prototype methods and pipe-able pure function

   •  Reveal benefits of pipe-able operators

   •  Create custom operators

In this video  we will learn how to modify emitted data and implement specific business logic.

   •  Learn about transforming emitted data with 'map' operator callback function

   •  Find out how to make Observable throw for some specific data so that onError handler will run instead of onNext handler

   •  Learn to avoid callback context issue

In this video we will learn how to filter out unneeded data with 'filter' operator.

   •  Learn how to use filter to omit the values we don't need in an output observable sequence

   •  Review the diagram how filter works

   •  Check how filter and map operators work in Rx Visualizer rxwiz.com

Here we will learn some methods on how to handle when Observable emits error

   •  Describe catchError callback params

   •  Learn main possible catchError use-cases

   •  Try catchError in a codepen

In this video we will find out how distinct operators can help use to filter out repetitive values to prevent unneeded subsribers handler runs

   •  Learn how distinctUntilChanged operator works to filter repetitive values

   •  Review other distinct operators

   •  Try distinct operators in a codepen

In this video we will learn how to make calculation based on previously emitted values

   •  Review why 'scan' operator is also called reactive analogue of Array.prototype.reduce method

   •  Review 'scan' use-case code example

   •  Try scan operators in a codepen by calculating arithmetic mean of emitted values

In this video we will learn how to group emitted values in different ways: by count, by time and by notifier events.

   •  Review what is buffering in RxJS

   •  Get deeper by reviewing all buffering operators

   •  Try buffering operators in a codepen

In this video, we learn about higher-order observables. We will review functions and operators that can work with such observables and find out why we need them.

   •  Learn what higher-order observable is. Learn about inner and outer observables

   •  Review first-order observables’ drawbacks and how higher-order observables can help

   •  Find out more about different types of higher-order observables behavior with diagrams. Take a look at their possible use cases

In this video, we will find out what observables switching is and learn the switching functions of Rx.JS.

   •  Review what switching is with a use case diagram

   •  Learn the main switching functions of Rx.JS and their differences

   •  Review the code example by implementing text search auto-suggestion widget

In this video, we will learn how to merge different inner Observables in one output Observable with sample practical use cases.

   •  Review what inner Observables merging is with a diagram

   •  Learn the main merge functions of Rx.JS and their differences

   •  Review the code example by implementing and grabbing paginated information from a backend

Here we will review another possible use case for mergeMap operator.

   •  Describe the task we need to solve: get information from a backend if it is not provided at once but in some time and from a different endpoint

   •  Review the solution algorithm with mergeMap operator usage step by step

   •  Review the actual code implementation in a codepen and Angular demo project

In this short video, we will find out new interesting possible uses for mergeAll operator and how to re-emit the produced array value as smaller chunks.

   •  Learn how to re-emit array value as separately emitted values with mergeAll operator

   •  Review mergeAll + bufferCount tandem for resending an emitted big array as chunks of smaller sizes

   •  Implement the proposed solution in a codepen

In this video, we will learn how to handle innerObservables one by one as and when it matters.

   •  Review concatenation operators in Rx.JS

   •  Review possible use cases for concatMap operators with a list items deletion example

   •  Implement the proposed solution in a codepen and Angular demo project

In this video, we will learn how to combine a few different Observable streams with combineLatest and zip functions and withLatestFrom.

   •  Review the possible ways of Observable combinations in Rx.JS. Learn how to implement these scenarios with zip, combineLatest, and withLatestFrom functions

   •  Review possible use case diagrams and respective code samples for zip, combineLatest and withLatestFrom

   •  Combine all functions’ use cases in one solution. Implement the proposed solution in a codepen and Angular demo project

In this lesson, we will review forkJoin, an analog of Promise.all but in the Rx.JS world.

   •  Review forkJoin function syntax and the respective code sample

   •  Review the deleteAll functionality diagram for all list items removal by using forkJoin if the backend has some deletion limitations

   •  Implement a diagram solution in a codepen and Angular demo project

In this video, we learn how to implement retry logic for observables that failed on the first try.

   •  Learn the difference between retry and repeat operators

   •  Learn how retry operator works and which params it has

   •  Demo a practice example in codepen.io using HTTP ajax calls

We will find out how to make repetitive actions with Rx.JS repeat operator using the HTTP request example.

   •  Learn how the repeat operator works and which params it has

   •  Review how to easily implement paginated data preload using the repeat operator

   •  Demo a practice example in codepen.io and Angular demo project

In this video, we will learn how to make retry and repeat logic more intelligent.

   •  Learn how the ‘retryWhen’ operator works and which params it has. Review typical code samples for ‘retryWhen’ usage.

   •  Understand how ‘repeatWhen’ operator works and which params it has. Review typical code samples for ‘repeatWhen’ usage.

   •  Demo a practice example in codepen.io.

In this video, we learn why it is so important not to forget about observables that we don’t need any more.

   •  Understand by example how forgetting to unsubscribe can cause lack of memory and CPU high-load issues

   •  Review Vanilla JS and Angular code

   •  Demo a practice example in codepen.io and Angular demo project.

If you complete the Observable sequence, all observers will be unsubscribed automatically. In this video, we will find out how to make observables complete according to our needs.

   •  Learn first and take operators with examples

   •  Explore takeUntil and takeWhile operators with examples.

   •  Demo a practice example in codepen.io and Angular demo project.

In this video, we will review the main RxJS anti-patterns and find out how to avoid them.

   •  Explore ‘Nested subscriptions’ and ‘Multiple subscriptions with same handler’ anti-patterns and their possible alternatives

   •  Understand why using custom operators is good for the code

   •  Find out how to deal with ‘repetitive observable usage of same observable in a template’ in Angular projects

Learn what schedulers are and why it is crucial to know them for tricky Rx.JS cases.

   •  Recall event loop, macrotasks, macrotasks queue, microtasks, and stack overflow in a browser

   •  Explore synchronous schedulers: null scheduler and queueScheduler. Find out how they differ. Review such async schedulers: asapScheduler, AsyncScheduler. Learn about VirtualTimeScheduler and TestScheduler.

   •  Apply these schedulers in practical cases with factory function arguments, observeOn, and subscribeOn

In this video, you will learn different methods of coding unit tests for observables.

   •  Review the difference between writing unit tests for sync and async code in jasmine framework

   •  Review the jasmine done callback for testing async code and introduce virtualTimeScheduler for quick testing of async Rx.JS code that takes some time to run. Understand what Marble testing is and how to implement such tests with TestScheduler

   •  Explore additional possibilities for Rx.JS async-code unit testing in Angular projects: fakeAsync for testing observables and using BehaviorSubject for mocking ngrxStore.

We will learn how sharing cold observable values for multiple subscribers can prevent unneeded resource usage and prevent extra network requests.

   •  Review a typical use case by making a backend network request example to explain when using multicasting can be appropriate.

   •  Learn how to use Rx.JS Subject to share a cold observable run for many subscribers

   •  Understand how operators allow us to implement multicasting in a few lines of code

We will learn some debugging tips that can help us find out why observables emit wrong values or emit at a wrong time.

   •  Review a simple logging example and tap operators

   •  Dig deeper with timestamp, materialize, and dematerialize operators. Review the rxjs-spy debugging library

   •  Switch to the Angular project and review using async pipe for Observables monitoring