 Resources from Andre Staltz in 2024

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will learn to identify common mistakes with RxJS that usually make code harder to read and even introduce bugs. Most of these mistakes are related to Subject, subscribe, and subscriptions. We are going to see how to use only Observables and convenient operators made for solving those mistakes, such as fromEvent, takeUntil and switchMap. By the end of this course, you will have a more immediate intuition on what patterns are simple and safe in RxJS.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Save time avoiding common mistakes using RxJS

If you have used RxJS Observables, it is likely you have seen the flatMap or switchMap operators. They are very powerful operators that can be used in various situations, while being common for dealing with HTTP requests. These operators may look mysterious at first, but turn out to be simple flattening operations on higher order Observables. 

In this course you will learn what is a higher order Observable, when does it occur in real applications, and how to handle them with operators like switchMap. Throughout this course we will see real applications of these operations.

Start following this course if you have some understanding of RxJS, but want to gain advanced skills in the art of using operators.

If you're new to RxJS, we highly recommend the [Introduction to Reactive Programming using RxJS](https://egghead.io/courses/introduction-to-reactive-programming) to begin with, and then [RxJS Beyond the Basics: Operators in Depth](https://egghead.io/courses/rxjs-beyond-the-basics-operators-in-depth) to understand operators.

If you're an absolute beginner to the concept of Observable and async streams, we highly recommend starting with [Jafar Husain's excellent introduction](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop).

Use Higher Order Observables in RxJS Effectively

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.*** 

RxJS Subjects are a source of confusion for many people using RxJS. For many, the Subject is the obvious and only answer to every problem. Subjects are incredibly useful and necessary, but the key is to know when to use them for solving specific problems that you encounter.

In this course, we are going deep into RxJS Subjects and multicasting operators. You'll gain a solid understanding of when, where, and how to use these powerful tools.

If you are new to RxJS, or want a refresher please check out this course **[Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming)**.

RxJS Subjects and Multicasting Operators

Operators are the core building blocks for reacting to data in your JavaScript applications.

In this course you will learn what operators are, and then take a tour of the most useful operators that RxJS has to offer.

RxJS Beyond the Basics: Operators in Depth

***⚠️⚠️⚠️ This course uses an old version of RxJS and loads data using the jQuery library which is no longer fashionable. If you can look past that and understand that the principles André is demonstrating are timeless and useful, this course is a true gem. Otherwise, this is probably not for you! ⚠️⚠️⚠️***

*Reactive*

You've probably been hearing this word recently, and it's referring to the *Reactive Programming* paradigm. One of the biggest challenges people face when learning Reactive Programming is changing their way of thinking, and in this course, you are going to exercise your mind and learn to let go of that imperative and stateful mindset.

You will also learn how can practically apply these Reactive concepts using the RxJS library! 

If you are **brand new** to reactive programming, the course [Asynchronous Programming: The End of The Loop](https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop), will get you up to speed. 📚

Introduction to Reactive Programming Using RxJS 5

There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.

In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.

Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.

If you're new to RxJS, we highly recommend this [Async JS course from Jafar Husain](https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop) to get a solid intro to the concepts. From there, you can watch this [Introduction to Reactive Programming using RxJS](https://egghead.io/series/introduction-to-reactive-programming), and you will be prepared for this course!

RxJS Beyond the Basics: Creating Observables from scratch

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

This lesson introduces the concept of an Observable. We will see how similar it behaves to a function and what is the fundamental difference between them.

Return Multiple Values from Observables in RxJS 

Observables are almost like functions, but allow you to return many values. There is another concept in JavaScript (ES6), called Generator Functions, which do something very similar. 

In this lesson we will see what Observables and Generators have in common, and how they differ.

Push Values from Observables in RxJS

Whenever we are writing code, we need to remember that things may go wrong. If an error happens in a function, that error will be thrown. Errors can also happen in Observables. 

In this lesson we will see what the API is for throwing and catching Errors with Observables.

Throw Errors with RxJS Observables

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.

Render on the DOM with RxJS

This video gives an overview of the concepts of reactive programming we saw during this series, and explains how reactive programming can provide true separation of concerns.

An overview of RxJS reactive concepts

In this lesson we start building a small UI widget: suggestions box displaying users to follow in Github. We will learn how to perform network requests to a backend using RxJS Observables.

Use RxJS Async Requests and Responses

groupBy() is another RxJS operator to create higher order observables. In this lesson we will learn how groupBy works for routing source values into different groups according to a calculated key.

Split an RxJS Observable into Groups with groupBy

In this lesson we learn how to fetch new data whenever the refresh button is clicked. This lessons starts to give us a feeling of how is it to develop reactive applications in RxJS.

Send new requests from refresh clicks in RxJS

The use of RxJS Subjects is common, but not without problems. In this lesson we will see how they can be usually safely replaced with plain Observables.

Convert RxJS Subjects to Observables

In this lesson we will learn about potential problems that may arise when using Observable.create, a low-level function for creating Observables. In its place, we will use easier helper functions that create Observables in a safe manner.

Replace Observable.create with Observable creation helpers

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

The Observer object has the functions next() and error(). In this lesson we will see the other (and last) function available on observers, complete(), and its purpose.

Perform an Action on Completion with  RxJS Observables

Manually unsubscribing from subscriptions is safe, but tedious and error-prone. This lesson will teach us about the takeUntil operator and its utility to make unsubscribing automatic. 

Topics

Instructors

Content Type

André Staltz