Introduction to the Reactive Paradigm

Here is a short introduction to the reactive paradigm, including why you need it and how you can use it.

We'll cover the following

Who is this course for?

This course is intended for both beginner and skilled front end engineers trying to jump into the world of reactive programming. You only need to be familiar with basic concepts of JavaScript and imperative programming principles to fully enjoy the course. Beyond that, the reactive principles you will learn in this course can be applied in any other tech stack, even when programming server-side applications.

What is a reactive paradigm?

To deliver the expected performance of today’s near-real-time applications, developers must adopt different paradigms that can offer a certain level of abstraction for seamlessly handling smooth user interface (UI) transitions with heavy underlying business logic.

Almost every online application today generates large amounts of real-time, interactive data, where a change in one part of the application triggers a change in a completely different part. Handling these “events” properly to ensure smooth UI and real-time updates is a challenge that the reactive paradigm is trying to solve.

Why do we need a reactive paradigm?

The main goal of this paradigm is to provide a level of abstraction in your code, enabling you to focus on the events that will be generated by the application rather than forcing you to deal with lots of implementation details.

A simple “Like” on an Instagram post triggers UI updates in different places, like highlighting a button and increasing a counter. All these events happen without blocking the UI, allowing smooth user interaction and satisfaction. Beyond this simple example, almost every web application today includes these types of “event” generations and reactions. This is what best describes the reactive paradigm: reacting to different events in the same way and applying business logic along the way.

producer consumer 1000 feet overview

The reactive paradigm has been made available for multiple languages and platforms through Rx-libraries. In this course, we focus on the JavaScript-based library, RxJS, and explore in-depth how this paradigm enables you to solve problems in ways you never thought of before. You will be distanced from the traditional imperative programming by writing functional code, which is tightly related to the reactive paradigm.

The reactive concepts discussed in this course are general and can be applied to any language or framework by utilizing the appropriate Rx-library and adjusting the code syntax.

What to expect from this course

Before you dive deeper into reactive programming, you need to initially understand several concepts and issues related to asynchronous programming and how the reactive approach straightforwardly overcomes those issues. First, you will take a quick look at callbacks and promises. After their disadvantages are revealed, the course shifts perspective to the reactive approach. You will be introduced to the most common operators, discover different ways of scheduling event producers, and most importantly, discover how to test the newly learned logic. Once you dive deeper into the reactive programming world, you will never want to leave.

After your mind and fingers become reactive, you can move on to real-world projects that will boost your reactive skills.

Below is a glimpse of what’s to come.

Press the RUN button and see the output of the code given below!

Press + to interact
demo
main.js
const {of} = require('rxjs');
var promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 3000);
});
promise.then(res => console.log("I am late, right?"))
of(1, 2, 3, 'Get ready for Rxjs').subscribe(val => console.log(val));