Reactive programming for lazy programmers.
Tags: reactiveprogramming, rxjs, javascript
Published: 2020-05-03 11:13:29

---
title: Reactive programming for lazy programmers.
published: true
description: The introduction to reactive programming you've been missing
tags: #Reactive Programming,#RXJS,#javascript
series: Reactive programming for lazy programmers
---

# **Introduction to Reactive programming for lazy programmers.**

I know you are tired and exhausted from searching for a good introduction about reactive programming, you listened for a lot of people but finally, you find this series.

In this series, I'm going to give you the bedrock of reactive programming,
let's dive together and learn what we need.

## What is Reactive Programming?
There are plenty of bad explanations and definitions about reactive programming, so let's cut it in a little definition.

### Reactive Programming
is programming with asynchronous data streams.

#### Oh Whaaaaaat ???

come down, this isn't anything new, event buses or typical click events are really an asynchronous event stream which you can observe and do some side effects, so __what is the reactive programming main idea?__ reactive programming gives you the ability to create data streams of anything.

__Streams:__ are cheap and ubiquitous, anything can be a stream, variables, user inputs, properties, caches, data structure, etc..

### Stream
a stream is a sequence of ongoing events ordered in time, 
it can emit 3 different things:
1. value (of some type)
2. error (something wrong happened)
3. completed signal (when the stream is done or completed)
![](https://camo.githubusercontent.com/36c0a9ffd8ed22236bd6237d44a1d3eecbaec336/687474703a2f2f692e696d6775722e636f6d2f634c344d4f73532e706e67)
we captured these emitted events only asynchronously, by defining a function that will execute when a __value__ is emitted, another function when an __error__ is emitted and another function when __completed__ is emitted, sometimes we can omit the last 2 functions and we can just focus on defining the function for values.

### Subscribe
The listening to the stream is called subscribing. by subscribing to an 
observable you are going listen to any new change

### Observer
The functions that we are defining to deal with the ongoing events are called observers, it contains 3 functions (__next__, __error__, __complete__).
It is an object usually given to the __observable.subscribe(observer)__, Observable will call the Observer's __next(value)__ method to provide notifications, a well-behaved Observable will call an Observer's __complete()__ method exactly once or the Observer's __error(err)__ method exactly once, as the last notification delivered.

### Subject
Observable or subject is what is observed by observers.
we can imagine it as a data store that will send a notification whenever change happened to its value.


#### Oh that's the Observer Design Pattern, [so please check it](https://en.wikipedia.org/wiki/Observer_pattern)


### What is the difference between Promise and Observable?
There is no big difference, both are promising us with a value in the future when some event happens, but the main difference between them that Promise will emit a __single value__, on the other side Observable returned __many values__ over time. 

### Why should I consider adopting Reactive Programming?
Reactive programming raises the level of abstraction of our code, so we can focus on the interdependence of events that define the business logic, rather than having to constantly fiddle with a large amount of implementation details. __Code in Reactive Programming will likely be more concise__

### Benefits of using Reactive Programming
The benefits are more evident in modern web apps and mobile apps that are highly interactive with a multitude of UI related to data events, for example, "likes" on Facebook can be reflected in realtime to other connected users.

### Summary
Reactive programming is really suitable for real-time web apps and mobile applications, it is really helpful when we are dealing with multiple components dealing with the same data source and interested in data change.

That's a simple intro about reactive programming and in the next article, we are going to talk about how to implement it using RXJS the reactive extension for javascript. 

### Links
1. [introduction-to-reactive-programming](https://egghead.io/courses/introduction-to-reactive-programming)
2. [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
3. [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern)

#### Please check this links and your feedback is really matter