0% completed

Getting Started

Introduction to the Course Main Objectives

Introduction to Reactive Programming with RxJS

Why Do We Need to Learn Reactive Programming?Current Mechanisms for Handling Asynchronous Operations RxJS in Node.js

Understanding the Reactiveness

Introduction to Reactiveness

Querying the Sequence

Observer Pattern

Iterator Pattern

Rx Pattern and Observable

Quiz Yourself on Reactiveness

Understanding the Observables

Creating Observables and Operators Making Ajax Calls With an Observable Handling the Operators Creating Observables From Javascript Data Types Concluding Observables Quiz Yourself on Observables

Understanding Sequencing and its Operators

Introduction to Sequencing and its Operators Visualizing Observables Map and Filter Operators of Sequencing Reduce, Aggregate and Flatmap Operators of Sequencing Explicit and Implicit Sequence Cancellation Observables That Wrap External APIs Sequence onError Handler Catching Errors With the Catch Operator Retrying the Sequences Quiz Yourself on Sequences

Make a Real-time Earthquake Visualizer

Preparing Our Environment for the Earthquake Visualizer Increasing the Reactiveness Using Operators The RxJS-DOM Method Interval Operator and Distinct Operator Operator Rundown Quiz Yourself on the RxJS Method

Building Concurrent Programs Through Pipelines

Introduction to Concurrent Programs Avoiding External State Using Observable Pipelines Efficiency Through Pipelines Quiz Yourself on Pipelines

RxJS Subject Class

Introduction to the RxJS Subject Class AsyncSubject of RxJS BehaviorSubject of RxJS ReplaySubject of RxJS Quiz Yourself on RxJS Subject Class

Building a Reactive Spaceship to Keep the Application Pure

Introduction to Keeping Application Pure Through Spaceship Game Creating the Starfield of the Spaceship Game Using Range Operator Adding the Player’s Spaceship in the Game Using Observables Generating Enemies in the Game Using Observables Controlling the Receiving Data Through Operators and Observables Implementing Shooting Through Operators and Observables Enemy Shots Using Operators and Observables Managing Collisions Using Operators and Observables Keeping Score Using BehaviorSubject Concluding Operators

Building a Complete Web Application Using RxJS

Introduction to RxJS Tools For Web Application Building a Real-time Earthquake Dashboard Adding a List of Earthquakes Using Observables Hot and Cold Observables Interval Observable in Hot and Cold Sharing a Cold Observable Adding Interaction Using Observables Increasing Efficiency by Attaching DOM to the Parent Element Quiz Yourself on Observables and Operators

Getting Real Time Updates from Twitter using Node.js

Introduction to Node.js Environment Client Server Communication in Node.js Retrieving and Sending Tweets in Node.js Showing Tweets on the Dashboard in Node.js Concluding Node.js

Schedulers

Introduction to Schedulers in Rx Programming General Use of Schedulers in RxJS ObserveOn and SubscribeOn Operators Immediate Schedulers of Rx Default Schedulers of Rx Current Thread Schedulers of Rx Scheduling for Animations in Rx The Test Schedulers in Rx Writing a Real-world Test Quiz Yourself on Schedulers

React Web Applications With Cycle.js and using Model View Intent

Introduction to Cycle.js Installing Cycle.js Basic Understanding of Cycle.js The 'h' Function of Virtual Hyperscript Using JSX to Write UI Implementing the Search Term in Cycle.js Revising the Main Function Using the JSONP Driver Introducing Model View Intent and its Components Reusing the Widgets of Model View Intent Search Box Widget of Model View Intent Wrapping Up Model View Intent Quiz Yourself on Model View Intent and Cycle.js

Closing Remarks

Congratulations!

Reactive Programming with RxJS/

...

/

Querying the Sequence

Querying the Sequence

Learn to manipulate events that occur in a sequence.

We'll cover the following...

Let’s implement a simple version of that mouse stream using traditional event listeners in JavaScript. To log the x- and y-coordinates of mouse clicks, we could write something like this:

Press + to interact

const registerClicks = e => 
{
  console.log(e.clientX, e.clientY);
};
document.body.addEventListener("click", registerClicks);

The problem, of course, is that manipulating events is not as easy as manipulating arrays. For example, if we want to change the preceding code so it logs only the first ten clicks on the right side of the screen (quite a random goal, but bear with me here), we would write something like this:

Press + to interact

var clicks = 0;
document.addEventListener('click', function registerClicks(e) 
{
      if (clicks < 10) 
      {
            if (e.clientX > window.innerWidth / 2) 
            {
                  console.log(e.clientX, e.clientY);
                  clicks += 1; 
            }
      } 
      else 
      {
            document.removeEventListener('click', registerClicks);
      }
});

To meet our requirements, we introduced an ...