DEV Community

Cover image for Understanding Observables (the right way) Part I
Ahmed Mamdouh Badawy
Ahmed Mamdouh Badawy

Posted on • Updated on

Understanding Observables (the right way) Part I

Let’s build a concept with each other’s before we get into coding

The Observer Pattern (core concept):

The observer design pattern is where observable’s concept is coming from, let’s understand it first.

Design patterns itself, are repeatable solutions to commonly occurring problems in software design, so what’s the observer pattern anyways?
It defines a one to many dependency relationships between objects so that one object changes state, all of its dependents are notified and updated automatically.

Examples in reality:

Alt Text

Newsletters company

In order to understand this concept we should apply it in our reality, for example, imagine a newsletter’s company with customers that registering to get a newsletter per day, this newsletter’s company have a source of data that get its information from
, after that, the company converts this data into a headline, a body of a headline and so on...
Once it is done the company sends the converted data (as a newsletter) to the registered customers only, if any change happened in the source of data it notifies (send an update) all the registered customers with these changes.

To make it clearer let’s give another example… almost every one of us at least have one Google account so imagine that the data source is your Google account, and the Google server is continuously watching the state of all Google accounts, now let’s says that you signed in from different device than usual the google server noticed this change in your account location state then it notify you by a message which says “are you signed in with ‘device name’ at ‘device location’ or not?”… This happened to me a lot when I logged in from different devices and it makes a perfect example for the observer pattern.


In the previous examples, the newsletters company and the google server represents an observable which:
1- send a stream of data to the observers
2- observes any changes in the state of the data source and notify the observers
Who are the observers you say? They are the customers or account owners who are subscribed (registered) to a specific observable.

The way we think about observables and observers opened a new approach to think about programming and that’s called “Reactive Programming” and by adding the toolbox of functional programming on top of it, like mapping or filtering, it becomes “Functional Reactive Programming” which deals with asynchronous data streams.

Streams is a sequence of data values over time and thinking that everything can be represented as a stream which observable can send to the observers, is the reactive mindset of thinking.

In the next post, we will get into the real stuff with hands-on coding examples, this series aims to introduce you as a beginner into the reactive programming world so stay tuned and happy reading.

Top comments (0)