#1 Design Patterns — Observer pattern

Hello Everyone, Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.

In this blog, we will learn more about 👉 What are Design Patterns? 👉 One of the widely used patterns: - The Observer Pattern.

Design Patterns

Design Patterns are the solutions used to solve commonly occurring problems. They are reusable and proven solutions and can enhance the quality of code.

Let us understand Design patterns with a simple example:

Squid game — Bridge Surviving game To give more context, The glass bridge game has 16 players and a bridge with 18 steps. Each player must go in a predetermined order. At each step, the player has to choose between two seemingly indistinguishable sheets of glass. One is made of tempered glass that can hold the weight of 2 players, and Another one is regular glass which breaks with only one player and will end their own life.

Now, How is this related to Design pattern 🤔?

Every player would move forward, keeping a step on either tempered, that can allow all to move forward or end up losing their life.

It is clear that a pattern built at each step, eventually helps other players follow and create a new Pattern upon the previous. Hence this is a Design pattern.

Players who died are warriors who sacrificed their own life for the other players just like the developers who spent their time innovating new design patterns for the software world.

Let’s take another example:

When I visit my favourite restaurant and order my favourite dish, the taste remains the same as if it was preserved at some place and served the same whenever I visited the restaurant. But, Chef has a recipe which makes the dish wonderful, here recipe remains different for different dishes but the core remains untouched and is used as a template for all the recipes chef prepares. Hence the core ingredients are nothing but a design pattern.

Note: 👉 Design pattern is not the exact solution always, but it will inspire in obtaining an accurate solution for any problem statement. 👉 They are the solutions obtained by trial and error by many developers just like the players who died to cross the bridge.

Observer Pattern

It is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It falls under behavioural patterns.

How does Observer Pattern work? To understand it better, Let’s take an example of an Online Book Store, 👉 Notifies all its users who have taken their subscriptions when new books arrive.

This is what the code looks like for an Online Book store (Subject) application where we have customers (Observers). Let’s see what our customer code looks like:

We have customers' data stored in an online book store application where we also have different methods like subscribe, unsubscribe, notifyCustomer, and notifyAllCustomers. Whenever a customer subscribes to the bookstore, he will get notified always whenever a new book arrives. Customers can also get individual notifications if they are prime users. At the same time, they have an option to unsubscribe.

We will revisit the actual definition now, Observer pattern notifies all its dependencies whenever there is a state change. So, if we check our above implementation, whenever there is a new arrival (state change), our application(Subject) is notifying all its customers (Observers).

The Observer pattern is also called as Publisher-Subscriber in short PubSub

Please checkout to working code for Observer Pattern in the below link

Observer working Example

Observer Pattern

When to use the Observer pattern?

Observer Pattern can be used if there is a one to many relationships i.e. If one object is modified, then its dependent objects should be notified. Apart from our Online Book Store example, some of the other use cases where Observer Pattern is used, 👉 Social media platforms like Facebook, where if you update your status, it gets notified to all of your followers. 👉 Even youtube does the same, if a channel uploads a video, it will be notified to all its subscribers. 👉 Even modern day frameworks use the Observer pattern for the state changes such as Vue Js — Watch hook React Js — UseEffect hook Angular — using RXJS

Here we go, That’s it folks for this blog. Hope everyone liked it. If you like it, give it a clap 👏 , and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

#1 Design Patterns — Observer Pattern