Who Should Take This Course and Why?

Let’s start with the target audience and the learning outcomes of this course.

Hello! If you’ve picked up this course, you’ve probably spent some time developing websites. Whether you’re an old hand at slinging JavaScript or a newcomer to the frontend world, this course has something for you.

The goal of the course

The list of requirements for frontend work keeps increasing. You now need to build websites that load quickly on shaky connections, render perfectly on mobile devices, and respond with lightning speed to user input. All of these tasks require dealing with a high number of events from disparate sources, be it your Customer Relationship Management(CRM), late-breaking news, or just a chat room.

The topic of this course, observables, is a new way of thinking about managing these events, even when they may occur sometime in the future. Observables are a neat concept, but what’s important is that you can keep things straight in your head, allowing you to build bigger, faster, and less-buggy applications for your users.

It’s important to ask, with such a big claim as “simplifying frontend development,” what exactly is simplified? While RxJS (short for “Reactive eXtensions to JavaScript”) brings simplicity to many areas, this course focuses on two areas:

  • Asynchronous calls and control flow
  • State management

Asynchronous calls and control flow

JavaScript’s async-first design has been both a blessing and a curse. While the event loop allows us to fire off AJAX calls with ease, keeping track of them all can be quite the chore. A single AJAX request can be modeled as a promise, but more than one suddenly means there’s a cacophony of items to manually track (and even cancel) as the user progresses through our app.

One of the most notorious examples, the typeahead, will be covered in Advanced Async. You’ll learn how to delegate both the calls and control flow to RxJS, allowing you to focus on the rest of your application.

State management

On the other hand, managing an application’s state has been the bane of programmers since RAM was invented, leading to the oft-quoted advice to “turn it off and on again,” resetting the computer’s state. JavaScript makes this worse by defaulting to a global, mutable state. In recent years, the JavaScript community has started to build some impressive solutions to this problem.

RxJS compartmentalizes your eventing flows, encapsulating each action in a single function. Building on top of this, RxJS also provides many helper operators that keep an internal state, allowing you to outsource your state worries to the library.

In addition to these operators, you’ll learn about NgRx, a state management library built on top of RxJS in Advanced Angular. In Reactive Game Development, you’ll build out your own state system that’s specific to the HTML5 Canvas API.

But I already use (insert framework here)!

Don’t worry! RxJS is not intended to replace your entire frontend toolset. Rather, it’s been designed to integrate with whatever JavaScript framework you use, be it a tangled mess of jQuery and twine, or the latest framework that was just released this week. The Angular framework, in particular, has decided to integrate with RxJS out-of-the-box, and this course covers some of the report errata and discusses those scenarios, but the knowledge contained in this course is by no means specific to Angular.