RxJS - Mastering Observables, Subjects and Operators
3.7 (137 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.
581 students enrolled

RxJS - Mastering Observables, Subjects and Operators

Learn to leverage observables and asynchronous data streams in this first-class course on RxJS!
3.7 (137 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.
581 students enrolled
Created by Daniel Stern
Last updated 1/2018
English
English [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1 hour 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
  • Create an RxJS Observable
  • Subscribe to observables with observers
  • Create and subscribe to RxJS subjects
  • Understand and use RxJS Behavior Subjects
  • Implement RxJS Replay Subjects
  • Use Static and Instance Operators (RxJS)
Course content
Expand all 13 lectures 57:55
+ Introduction
3 lectures 08:04

Contents

1. Introduction to RxJS

2. Observables

3. Subjects
    – Behavior Subjects
    – Replay Subjects

4. Operators
    – Instance Operators
    – Static Operators

5. Schedulers

Preview 01:28

What is RxJs?

• A library for dealing with streams of data

    – Provides a myriad of tools for doing this, namely –
    observables, subjects and operators

• Incoming data is represented by observables

    – Server-generated, i.e., new notification
    – Client generated, i.e., geolocation data

• Operators can be used on resulting streams of data


When RxJS is Needed:

• You have an external event source
(like a back end written by someone else)

• Your application is long-living and has to do many complex things

• You will routinely be pushed new data and have to deal with it
(i.e., your user has received a new instant message)


When RxJS is Not Needed

• You have all the data you’ll be working with as soon as the page loads

• Calls to outside APIs are rare

• The application is limited in scope and all use cases can already be solved by existing tools


Preview 03:27

RxJS Observable Playground

• Simple web application where you can work with RxJS

• Simplified, low overhead

• We will be referring to it throughout this course

• Have it open on your computer before proceeding

Preview 03:09
+ RxJS Observables
2 lectures 15:46

What is an Observable?

• A special function which returns many values

• Returns values at its own pace

• Can return values asynchronously or synchronously

• Can finish by entering a complete or error state

• Starts to execute when an observer subscribes to it

Observers

• A function that reacts to data pushed by an observable

• Takes the form of a simple callback

• Can optionally define handlers for complete and error events

• Rule of thumb: an observer is (usually) just a function

Preview 05:48

• Create an observable that pushes a list of user names to subscribers

• Create an observer that subscribes to our observable

• Create an observable which represents clicking on a UI button

Observables and Observers - Demo
09:58
+ RxJS Subjects
4 lectures 18:15

What are Subjects?

• Like observables, but don’t start automatically when subscribed to

• Sort of like a combination of observable and observer

• Can have multiple subscribers

• Can have multiple sources of data

• Metaphor: A town square where the king’s messenger (the subject) is making a series of proclamations to anyone who is around to hear it (the subscribers).
* Applies to the default kind of subject, and also implies you are limiting who can access the subject’s next() function

Observables vs. Subjects
Observables

• Starts to execute as soon as anything subscribes to it

• Impossible for more than one function to listen to it

• Subscribing to it multiple times sets in motion multiple chains of events

• Giving – springs into action to accommodate subscribers

Subjects

• There’s nothing to execute

• Something else decides what data it will push and passes it to the subject by calling next

• Selfish - not really concerned with its subscribers, it just does its own thing



Preview 03:23

• Create a subject and add a subscriber

    – Note how no action automatically begins on subscribe

• Push data with next, note how subscriber can receive data

• Add multiple subscribers and verify that multiple observers can subscribe to a single subject

Preview 03:41

Behavior Subjects

• All the features of a Subject, but also…

    – Remembers the last thing that was pushed

    – When a new subscriber appears, they’re automatically pushed the more recent thing

• Combination of many RxJS features in one, convenient package

• Often used as a utility knife event source, i.e., rx-ng (Angular 2)

• Metaphor: A king’s messenger delivering proclamations to a town square, but he staples the more recent one he makes to the wall in the same spot.

Behavior Subject Demo

• Create a behavior subject and subscribe to it

• Push some data from the subject using next()

• Add more subscribers

    – Note how the new subscribers are apprised of the latest thing that was sent

Behavior Subjects / Behavior Subject Demo
06:27

• Work like behavior subjects, but where behavior subject rebroadcasts the one most recent event, replay subjects rebroadcast several of the

most recent events

• Useful if new subscribers need to “catch up”

• Useful if only the last X events are interesting, i.e., a message board displaying new activity from newest to oldest

Replay Subjects / Replay Subject Demo
04:44
+ RxJS Operators
2 lectures 09:33

What are Operators?

• Convenient tools for transforming data incoming from observables and for creating new observables

• Two varieties…

    – Instance operators for transforming or aggregating data (map, pluck, sum)

    – Static operators for making new observables (create, interval, fromArray)

Instance Operators

• Instance operators consume data from an observable stream, but never modifies the observable in question

• If you’ve ever used built-in array operators like .map or .filter, you already understand instance operators

Instance Operators Demo

• Create an observable which outputs a regular stream of numeric data

• Try various instance operators to see how the data is transformed

    – Note that instance operators never change the original observable

Introduction, Instance Operators & Instance Operators Demo
06:17

Static Operators

• Usually found as a property of Rx.Observable, i.e., create

• Generally return a new, specialized observable instance

• All convenience tools  (nothing you couldn’t implement yourself at the expense of lots of time and effort)

Static Operators Demo

• Create observables using static operators

• Note…

    – Each static operator produces an observable with different properties

    – Each invocation of a static operator returns a new observable

Static Operators & Static Operators Demo
03:16
+ RxJS Schedulers
1 lecture 02:11

• Schedulers define an execution context for observables

• The most common use case is taking the outputs of an observable that are a mix of synchronous and asynchronous, and making them all async so they’re easier to deal with (so they work like promises)

• Schedulers are not created but available as properties of Rx.Scheduler

• Not something you will need to use too often

RxJS Schedulers
02:11
+ Conclusion
1 lecture 04:06

Executive Summary

• RxJS is a tool that makes unpredictable streams of incoming data

less hard to deal with

• It replaces callbacks and promises, both of which are pretty annoying

• It only has a few key features (observables, subjects) but many side-attractions that are useful but can make it seem more complex than it is

• RxJS results in more complexity in a small, simple project, but much less complexity in a large, interconnected projects


Challenge Task

• Create a TodoMVC application (a todo list)

• Manage all events through observables

• Manage the state through a BehaviorSubject

• examples: https://github.com/danielstern/TodoMVC

Executive Summary / Challenge Task / Special Offers
04:06

Do you have what it takes to be a real top-class observables master?

Observe THIS With Cold Indifference!
7 questions
Requirements
  • Basic Knowledge of JavaScript
  • Any PC or Mac Workstation
Description

With almost 20K stars on GitHub, Reactive X for Javascipt (or RxJS) is one of the web's hottest and fastest-growing libraries.

If you've come to this page, you're probably aware that a large percentage of Angular applications use RxJS under the hood. BUT, for most of your life, maybe even up until this very moment, you probably thought RxJS was confusing.. hard even! How wrong you were!

In this course, I teach you that RxJS isn't hard! By the end of it, you'll be using RxJS like a pro!

In this course, you'll learn RxJS by...

  • Observing informative and carefully prepared slides
  • Hearing every concept explained in base terms by the code whisperer
  • Coding along in five separate demo clips (all the necessary tools to code along at home are provided!)
  • Working with the exclusive RxJS Playground provided to users of this course

There's no doubt that the following topics, all of which are covered, will make you more valuable to any agile Angular team:

  • RxJS Observables and Observers
  • RxJS Subjects, Behavior Subjects (An Angular Favorite!) and Replay Subjects
  • RxJS Operators
  • Advantages and Disadvantages of Reactive X

In fact, I'm so confident in this course, I'm going to GUARANTEE all of the following statements - if you feel any don't match up with YOUR reality, get a 100% refund via Udemy's refund policy, no questions asked!

  • You WILL feel more confident in job interviews involving Angular or RxJS
  • You WILL integrate more quickly and effectively into teams using this techology
  • You WILL feel more confident around async code in general and be more capable of differentiating the advantages and disadvantages of promises, enumerators, etc
  • You WILL learn and have fun!

What more can I say? Can anyone offer ANYTHING better than a 100%, no questions asked, money back guarantee?

Take advantage of the special price listed and sign up TODAY!!

- the Code Whisperer

Who this course is for:
  • Developers seeking jobs in the Angular field
  • Web architect who need to know in detail about promises, observables, etc.
  • Junior developers wishing to improve their skills
  • Independent developer who want to learn a good technology for larger projects