Mastering Reactive JavaScript

Erich de Souza Oliveira

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781786463463
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

Expand your boundaries by creating applications empowered with real-time data using RxJs without compromising performanceAbout 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 processWho This Book Is ForIf 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 webchatIn DetailIf 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 approachThis 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.

The World Changes Too Fast - Operators to Deal with Backpressure

In the last chapter, we learned how we can use an operator to transform the data emitted by an observable, and also how we can chain this operator, making it reusable as each operator creates a new observable which can be used by multiple observers.

We learned how we can use the following four different operators:

• map()
• flatMap()
• filter()
• reduce()

These operators are the most important and most used in functional reactive programming. We saw examples and diagrams to make sure we understood how we can use these operators.

The usage of these operators goes beyond the last chapter. We will keep using them through the whole book, and we will use them heavily in the last two chapters, since we will create a client and server for a real-time web chat using functional reactive programming (with the RxJS library)

In this chapter, we will cover a common problem in programs and how we can mitigate it using functional reactive programming operators. This problem is called backpressure. We will also cover more operators to filter data from our observables.

In this chapter, we will cover the following topics:

• What is backpressure?
• How can we mitigate backpressure using RxJS?
• Lossy strategies to deal with backpressure
• Loss-less strategies to deal with backpressure
• Buffering observables
• Pausing observables
• Operators to deal with backpressure
• Operators to filter data

What is backpressure?

When using functional reactive programming, we model our problems using streams of data or events (called observables), which can be transformed (using operators) and eventually will cause some effect (through an observer). Now imagine that we have an observable which emits data faster than our observer can process; this will lead to a problem called backpressure.

This problem can also happen when we want to keep an observable running at a certain pace. Imagine that you want to log in to the console all the tweets from a certain hashtag, but you want to log at most one each for a few seconds to make sure the user can read the tweets. This also can lead to backpressure if the hashtags have more tweets per second than a human is capable of reading.

Using RxJS, we have two possible strategies to deal with this problem.

We can discard some data. You might not be interested in all the movements of your user mouse or all the tweets from a certain hashtag. You are only interested in the big picture.

You can keep queuing the data until you are capable of process it or process it in a batch.

Common strategies to deal with backpressure

In RxJS we have several operators which can be used to mitigate the backpressure problem, they belong to two different family of strategies the lossy and the loss-less strategies. We will see each one in detail in this chapter.

Lossy strategies to deal with backpressure

Lossy strategies to deal with backpressure are the ones we must use when we want to discard some data. As we discussed, you might not be interested in all the movements from your user mouse.

Lossy strategies let you mitigate the problem of backpressure using constant memory, as we don't keep any buffers.

The throttle() operator

The first lossy technique to deal with backpressure is the throttle() operator. This operator lets you propagate the elements emitted by the observable at a certain interval.

This operator is perfect for implementing rate limiting, such as the problem of showing tweets as fast as a human can read.

The throttle() operator has the following signature:

 observable.throttle(interval,[scheduler]); 

The first parameter is mandatory and the second is optional:

• interval: This is the time interval, in milliseconds, between the emission of data
• scheduler: This is used to propagate the data

The easiest way to show the usage of this operator is to apply it on an observable that already emits elements at a certain rate. We can use the throttle() method to further limit this rate and verify the response. We can do this by creating an Observable with the interval() method, as shown in the following example:

 Rx.Observable 
 .interval(50) 
 .subscribe((i)=>console.log(i)); 

If you run this example, you will see a lot of number being printed really fast in your console:

  0
 1
 2
 3
 //continues printing until you stop the program 

But we can use the throttle() operator to control the rate of the output. Using this method, we will also discard some of our data, and for this reason, we won't see the output in all the numbers being printed:

 Rx.Observable 
 .interval(50) 
 .throttle(1000) 
 .subscribe((i)=>console.log(i)); 

If you run this code, you will see an output as follows:

  0
 18
 37
 //continues printing until you stop the program 

The numbers printed in the console may vary in different executions.

This operation is illustrated in the following diagram:

In this example, we are using an infinite sequence. Now let's test this operator in a finite ob...

Table of contents

• Title Page
• Copyright
• Credits
• About the Author
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Preface
• What Does Being Reactive Mean?
• Reacting for the First Time
• A World Full of Changes - Reactive Extensions to the Rescue
• Transforming Data - Map, Filter, and Reduce
• The World Changes Too Fast - Operators to Deal with Backpressure
• Too Many Sources - Combining Observables
• Something is Wrong - Testing and Dealing with Errors
• More about Operators
• Composition
• A Real-Time Server
• A Real-Time Client