Randall Koutnik - Build Reactive Websites with RxJS

Copyright 2018 The Pragmatic Programmers, LLC. This book is licensed to the individual who purchased it. We don't copy-protect it because that would limit your ability to use it for your own purposes. Please don't break this trustyou can use this across all of your devices but please do not share this copy with other members of your team, with friends, or via file sharing services. Thanks.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf and the linking g device are trademarks of The Pragmatic Programmers, LLC.

Every precaution was taken in the preparation of this book. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein.

The Pragmatic Bookshelf is an agile publishing company. Were here because we want to improve the lives of developers. We do this by creating timely, practical titles, written by programmers for programmers.

Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://pragprog.com.

Our ebooks do not contain any Digital Restrictions Management, and have always been DRM-free. We pioneered the beta book concept, where you can purchase and read a book while its still being written, and provide feedback to the author to help make a better book for everyone. Free resources for all purchasers include source code downloads (if applicable), errata and discussion forums, all available on the book's home page at pragprog.com. Were here to make your life easier.

Want to keep up on our latest titles and announcements, and occasional special offers? Just create an account on pragprog.com (an email address and a password is all it takes) and select the checkbox to receive newsletters. You can also follow us on twitter as @pragprog.

If you buy directly from pragprog.com, you get ebooks in all available formats for one price. You can synch your ebooks amongst all your devices (including iPhone/iPad, Android, laptops, etc.) via Dropbox. You get free updates for the life of the edition. And, of course, you can always come back and re-download your books when needed. Ebooks bought from the Amazon Kindle store are subject to Amazon's polices. Limitations in Amazon's file format may cause ebooks to display differently on different devices. For more information, please see our FAQ at pragprog.com/frequently-asked-questions/ebooks. To learn more about this book and access the free resources, go to https://pragprog.com/book/rkrxjs, the book's homepage.

Thanks for your continued support,

Andy Hunt
The Pragmatic Programmers

The team that produced this book includes: Andy Hunt (Publisher) Janet Furlow (VP of Operations) Susan Conant (Managing Editor) Brian MacDonald (Development Editor) Paula Robertson (Copy Editor) Potomac Indexing, LLC (Indexing) Gilson Graphics (Layout)

For customer support, please contact .

For international rights, please contact .

Introduction

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

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 whats important is that you can keep things straight in your head, allowing you to build bigger, faster, and less-buggy applications for your users.

Its 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

JavaScripts 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 theres 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, . Youll 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 applications 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 computers 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, youll learn about ngrx , a state management library built on top of RxJS in Chapter 8, , youll build out your own state system thats specific to the HTML5 Canvas API.

Joe asks:

Why RxJS over Other Observable Libraries?