O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mastering Reactive JavaScript

Book Description

Expand your boundaries by creating applications empowered with real-time data using RxJs without compromising performance

About This Book

  • Handle an infinite stream of incoming data using RxJs without going crazy
  • Explore important RxJs operators that can help you improve your code readability
  • Get acquainted with the different techniques and operators used to handle data traffic, which occurs when you receive data faster than you can process

Who This Book Is For

If you're a web developer with some basic JavaScript programming knowledge who wants to implement the reactive programming paradigm with JavaScript, then this book is for you.

What You Will Learn

  • Get to know the basics of functional reactive programming using RxJs
  • Process a continuous flow of data with linear memory consumption
  • Filter, group, and react to changes in your system
  • Discover how to deal with data traffic
  • Compose operators to create new operators and use them in multiple observables to avoid code repetition
  • Explore transducers and see how they can improve your code readability
  • Detect and recover from errors in observables using Retry and Catch operators
  • Create your own reactive application: a real-time webchat

In Detail

If you’re struggling to handle a large amount of data and don’t know how to improve your code readability, then reactive programming is the right solution for you. It lets you describe how your code behaves when changes happen and makes it easier to deal with real-time data. This book will teach you what reactive programming is, and how you can use it to write better applications.

The book starts with the basics of reactive programming, what Reactive Extensions is, and how can you use it in JavaScript along with some reactive code using Bacon. Next, you’ll discover what an Observable and an Observer are and when to use them.You'll also find out how you can query data through operators, and how to use schedulers to react to changes.

Moving on, you’ll explore the RxJs API, be introduced to the problem of data traffic (backpressure), and see how you can mitigate it. You’ll also learn about other important operators that can help improve your code readability, and you’ll see how to use transducers to compose operators.

At the end of the book, you’ll get hands-on experience of using RxJs, and will create a real-time web chat using RxJs on the client and server, providing you with the complete package to master RxJs.

Style and approach

This easy-to-follow guide is full of hands-on examples of reactive programming. Each topic is explained and placed in context, and for the more inquisitive there are more details of the concepts used, ending with an application using the concepts learned through the book.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. What Does Being Reactive Mean?
    1. The reactive paradigm
    2. Why do I need it?
    3. Installation of tools
      1. Node.js
      2. bacon.js
      3. RxJS
    4. Your first code using reactive programming
    5. Summary
  3. Reacting for the First Time
    1. The bacon.js observables
      1. Creating our first observable
        1. Observables from DOM events (asEventStream)
        2. Observables from promises (fromPromise)
        3. Observable node event emitter (fromEvent)
        4. Observables from an array (fromArray)
        5. Observables from an array (sequentially)
        6. Observables from an interval (interval)
        7. Observables from other sources
      2. Properties
      3. Changes in an observable
    2. Reacting to changes
      1. Subscribing
        1. Subscribing using the onValue() method
        2. Subscribing using the log method
        3. Subscribing using the assign method
      2. Acting when an error occurs
    3. Reading how an operator works
    4. Transforming events using bacon.js
      1. Reusing observables
      2. Observables' lazy evaluation
    5. Summary
  4. A World Full of Changes - Reactive Extensions to the Rescue
    1. RxJS observables
      1. Difference between bacon.js and RxJS observables
        1. Hot and cold observables
      2. Installing RxJS
      3. Creating an observable
        1. Creating an observable from iterable objects
        2. Creating an observable from a sequence factory
        3. Creating an observable using range ()
        4. Creating an observable using period of time
        5. Creating an observable from callbacks
        6. Creating an observable from a promise
        7. Creating empty observables
        8. Creating an observable from a single value
        9. Creating an observable from a factory function
        10. Creating an observable from arbitrary arguments
        11. Creating an observable from an error
        12. Creating observables from DOM events (or EventEmitter)
        13. Creating an observable from an arbitrary source
    2. Subscribing to changes (Observer)
    3. RxJS Subjects
    4. RxJS Disposable
    5. RxJS Schedulers
    6. Summary
  5. Transforming Data - Map, Filter, and Reduce
    1. Adding operators to observables
    2. The map() operator
    3. The flatMap() operator
    4. The filter() operator
    5. The reduce() operator
    6. Summary
  6. The World Changes Too Fast - Operators to Deal with Backpressure
    1. What is backpressure?
    2. Common strategies to deal with backpressure
      1. Lossy strategies to deal with backpressure
        1. The throttle() operator
        2. The sample() operator
        3. The debounce() operator
        4. The pausable() observables
      2. Loss-less operators to deal with backpressure
        1. Buffering
        2. The bufferWithCount() operator
        3. The bufferWithTime() operator
        4. The bufferWithTimeOrCount() operator
        5. Pausable observables (with buffer)
        6. Controlled observables
    3. More ways to filter data
      1. The first() operator
      2. The take() operator
      3. The takeLast() operator
      4. The takeWhile() operator
      5. The skip() operator
      6. The skipWhile() operator
    4. Summary
  7. Too Many Sources - Combining Observables
    1. When do I need to combine observables?
    2. Running observables
    3. Concatenating observables
      1. Using the concat() operator
      2. Using the merge() operator
      3. Using the concatAll() operator
      4. Using the mergeAll() operator
    4. Combining observables
      1. Using the forkJoin() operator
      2. Using the zip() operator
      3. Using the zipIterable() operator
    5. Summary
  8. Something is Wrong - Testing and Dealing with Errors
    1. Dealing with errors
    2. Acting when an error occurs
      1. Treating an error
        1. The catch() operator
        2. The onErrorResumeNext() operator
        3. The retry() operator
        4. The mergeDelayError() operator
      2. Testing our application
        1. Testing in the server
        2. Testing in the browser
        3. Testing applications using RxJS
    3. Summary
  9. More about Operators
    1. The road so far
    2. The fundamentals of RxJS
      1. The map() operator versus the flatMap() operator
        1. Challenge - Creating a function to filter elements using only the flatMap() operator
      2. Filtering data
      3. Aggregating data
    3. Going beyond the basics
      1. Dealing with backpressure
      2. Combining observables
    4. Other important operators
      1. The flatMapLatest() operator
      2. The flatMapFirst() operator
      3. The finally() operator
      4. The groupBy() operator
      5. The do() operator
    5. Summary
  10. Composition
    1. What is a transducer?
    2. Available transducer implementations for JavaScript
    3. The transducers-js API
    4. Using transducers
    5. Using transducers with RxJS
    6. Testing transducers
    7. A performance comparison for JavaScript code using transducers
    8. Summary
  11. A Real-Time Server
    1. The web chat server
    2. Creating the project
    3. The architecture of the server
    4. Implementing the server
      1. DataSource
      2. Service to send messages
        1. Test implementation
        2. Service implementation
      3. Service to listen to new messages
        1. Test implementation
        2. Service implementation
      4. Service to block messages from a given user
        1. Test implementation
        2. Service implementation
      5. Service to send a command
        1. Test implementation
        2. Service implementation
      6. Handling WebSocket connections
    5. Scaling the server
      1. Connecting to Redis
      2. Using Redis as the DataSource for messages
    6. Summary
  12. A Real-Time Client
    1. Installing dependencies
    2. The structure of our client
    3. Building the application for the first time
    4. Connecting to the server application
    5. Using RxJS to manage user input
    6. Connecting user interactions and server communication
    7. Improving interaction with RxJS
    8. Batching changes to the DOM
    9. Testing the application
    10. Summary