Hands-On RxJS for Web Development
4.5 (10 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
119 students enrolled

Hands-On RxJS for Web Development

Harness the power of RxJS by solving real-life web tasks with Reactive programming; use Observables to code less
4.5 (10 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
119 students enrolled
Created by Packt Publishing
Last updated 1/2019
English
English [Auto-generated]
Current price: $86.99 Original price: $124.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Work with the modern Reactive Extension event-based programming approach in JS
  • Use real-world examples of development practices to solve issues with less code
  • Easily implement retry on error or repeat logic for your HTTP request-ordering problems with RxJS
  • Handle HTTP requests with a few lines of code
  • Create scalable app architectures and organize convenient inter-component data flows
  • Build easily-updatable web components and combine the latest ZIP operators
  • Implement RxJS solutions in the popular modern Angular framework
  • Use RxJS patterns and anti-patterns to improve your code maintainability
Course content
Expand all 35 lectures 05:17:19
+ Dive into the RxJS Environment
5 lectures 20:10

This video provides an overview of the entire course.

Preview 08:55

In this video, we introduce the reactive programming paradigm and describe its benefits.

   •  Learn about declarative over imperative programming

   •  Understand the Observer patterns scalability feature

   •  Discover the main Observables benefits over promises

Explore RxJS – What and Why?
04:47

In this video, we will find out how to install Node.js on a student’s computer.

   •  Find out the specifics of Node.js

   •  Download the Node.js package and install it

   •  Check whether the installation was successful with specific commands

Node.js Installation
02:40

Here, we clone our Angular demo project and start it.

   •  Git-clone the Angular demo project from the specified repo URL

   •  Install project dependencies

   •  Start the project in a terminal and open it in a browser

Angular Demo Project Starter
02:01

Here, we will create Rx.JS playground on a codepen.io.

   •  Register on codepen.io

   •  Create an empty codepen and add specific libraries OR fork existing Rx.JS-ready codepen by the provided URL

   •  Check whether it works with one simple code example

Forking RxJS Playground on JSFiddle
01:47
+ Implementing Observables to Reduce Code Complexities
5 lectures 40:48

In this video, we learn more about Observables and how they work, and review the main Observables fabric functions.

   •  Learn about Observable data types

   •  Learn the main fabric functions to create Observables

   •  Try fabric functions in codepen.io and rxviz.com

Preview 15:52

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

Hands-On Cold and Hot Observables
06:47

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

Subjects – Emit Your Own Data to Multiple Subscribers
05:00

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

Observables in Application State Management (ngRxStore)
04:23

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

Benefits of Reactive Updating Components View on Data Change
08:46
+ Working with Operators for Stream Data Processing
7 lectures 36:37

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

Working with Pipe-able Operators to Decrease App Bundle Size?
03:59

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

Modifying Data with ‘map’
04:15

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

Filtering Data with ‘filter’
02:00

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

Handle Errors As Usual Data – with ‘catchError’
04:51

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

Preventing Unneeded Recalculations with ‘distinctUntilChanged’
07:01

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

Operate All Emitted Values with ‘scan’
03:01

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

Data Manipulation with ‘buffer’
11:30
+ Combining Streams with Operators
8 lectures 01:32:32

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

Using Flattening Operators
05:59

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

Switch to the Latest Observable Data with switchMap to Prevent Race-Conditions
12:14

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

Interleave Application Events with mergeMap and mergeAll
21:09

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

Fetching Delayed API-Call Results with mergeMap and Subjects
08:02

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

Practicing Processing Data Chunks with mergeAll and bufferCount
05:16

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

Practicing CRUD Operations with concatMap
11:04

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

Using zip and combineLatest for Component State-Switching
22:02

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

Fixing Backend Drawbacks with forkJoin: Rx Analog of Promise.all
06:46
+ Practicing the Retry Logic
3 lectures 32:50

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

Redo Errored Http Requests with ‘retry’ Operator with One Line of Code!
06:03

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

Make Repetitive Http Calls with the ‘repeat’Operator
09:09

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.

Take Advantage of retryWhen & repeatWhen Operators for Complicated Repeat Logic
17:38
+ Practicing the Unsubscribe Policy
2 lectures 17:52

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.

Why Unsubscribe? Prevent Memory Leaks with the Correct Unsubscribe Policy
09:12

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.

Practicing first, skip, take, takeUntil, and takeWhile Operators
08:40
+ Fixing Anti-Patterns and Practicing Unit Tests
5 lectures 01:16:30

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

Fixing RxJS Anti-Patterns to Improve Code Maintainability
05:07

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

Control the Timing Strategy of Event Emissions with Schedulers
20:15

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.

Unit Tests for Observable Streams: Rx.BehaviorSubject and Rx.Marbles Techniques
26:40

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

Using Multicast Operators to Prevent Requesting Same Data Again forEach Observer
11:15

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

Debugging Tips
13:13
Requirements
  • Knowledge of JavaScript required
Description

Web application code can get  tangled up, which makes it hard to test and maintain. Also, asynchronous  computations and HTTP requests have to be properly managed. However,  with RxJS 6 you can unify, filter, and transform these streams with  ease. By introducing RxJS 6 into your code, you can build clean and  fault-tolerant web applications.

This course shows you how to handle work tasks and issues with RxJS 6.  It helps you develop the skills you need to create Reactive applications  with RxJS 6. With this course, you'll enter the Reactive world by using  Angular and vanilla JS. You will learn to execute asynchronous event  handling techniques using RxJS 6.

By the end of the course, you'll be saving precious development time by  using RxJS 6. You'll scale your own applications effectively, and use  Angular framework that relies on RxJS 6. 

About the Author :

Oleksandr Poshtaruk is a  frontend developer and a part-time Angular and RxJS mentor on  codementor .io. He has worked on commercial projects using Angular 2/4  and RxJS for the past 3½ years. He has over 17 years' experience in the  commercial IT industry as a system engineer and developer. He is a Stack  Overflow activist with 1000+ score points for Angular and RxJS. He  holds down a senior front-end developer position in tonicforhealth. He is also a conference speaker at JS-fwdays-2018 on RxJS solutions. 

Who this course is for:
  • The ideal target users for this video would be JavaScript developers who want to create Scalable javascript application by using Reactive functional programming techniques witjh RxJS.
  • This course offers a quick way to become familiar with Reactive Programming concepts and start using them in real-life tasks with the RxJS library. The course is focused on using RxJS for Reactive web UI in vanilla JS and Angular apps.