The Goal of This Book
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 CRM, late-breaking news, or just a chat room. The topic of this book, 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 book focuses on two areas that can have you reaching for the aspirin time and time again:
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 Chapter 4, 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 Chapter 8, Advanced Angular. In Chapter 9, Reactive Game Development, you’ll build out your own state system that’s specific to the HTML5 Canvas API.
RxJS is just one of many different JavaScript libraries that implement the observable pattern. RxJS is one of the oldest, and as of this writing, has had six major releases. It’s also one of the most popular observable tools, which means that there will be plenty of StackOverflow questions, blog posts, and yes, books about it, if you run into trouble. RxJS goes for the “batteries included” philosophy, so any conceivable method or pattern you need, RxJS will have it. It also includes tooling for you to create your own observables as needed. RxJS is built on TypeScript, allowing editors like Visual Studio Code to take advantage of type hinting to point out bugs as soon as possible. Finally, it’s the backbone for the popular Angular framework, a topic we’ll cover later on (though RxJS is by no means exclusive to Angular).
Other JavaScript libraries that implement the observable pattern include mobx, BaconJS, and Kefir. These either focus on a specific use case for observables (like mobx and state management) or prefer a limited feature set to focus on performance (though RxJS is very fast, especially the latest version).