Hands-On RxJS for Web Development
- 5.5 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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
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
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.
• 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
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 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
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.
- 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.