The Observer Design Pattern

This article will discuss “The Observer Design Pattern” and why we use it.

First, let’s take a look at Design Patterns.

When we try to do some tasks, we need a workflow. By following the workflow, we make out some patterns. And sometimes, we use these same patterns for different tasks. Thus, we do not have to create another pattern, which gives us flexibility. In the same way, we can make a collective solution by creating a Design Pattern. Design Patterns offers a general repeatable solution to a commonly occurring problem.

We can examine Design Patterns under three different titles. These are:

1. Creational Patterns

2. Structural Patterns

3. Behavioural Patterns

Observer Design Pattern is a part of the Behavioural Patterns.

Behavioural Patterns provide interaction between objects, meaning they allow them to talk to each other. They serve dynamic behaviour using polymorphism.

Solving many problems to design object-oriented systems is possible with Behavioural Patterns. They use object composition instead of inheritance. So what are the differences between composition and inheritance?

When we talk about inheritance, child classes inherit from a parent class. The child classes can behave like the parent class. A hierarchy is formed, just like a relationship between the vehicle (parent class) and its types like a car and a bus(child classes).

The composition makes collaborative types by combining other types instead of inheriting a parent class. For example, imagine some music notes, and we make a composition by uniting them. We can see these music notes as the object types and the composition as the new emerging type.

The relationship between objects is the main difference in comparison of composition and inheritance.

The purpose of inheritance is to design a class on what it is. For example, let’s say we have a class Building and a class House. We can say the house is a type of building. On the other hand, the purpose of composition is to design a class on what it does. If we walk through the previous example, we have a class Building already and a class Bathroom; the house has a bathroom.

Let’s look at it from a different perspective: First, focus on inheritance.

We have a parent class Vehicle, and we also have a Bus class and a Car class that will inherit some properties from the Vehicle class. Everything seems fine at this point. But if we want to include Elevator class, some things change. Because Elevator has not got a model, we can solve this by adding a Machine class. This means we expand the structure.

Now it seems to be fixed. But if we need to add a Driver class, we should update the structure again like below:

So when we need to add a new class, we will update the whole structure again, and admittedly this is a bit of a hassle.

Composition lightens this load. Let’s look at the same example again, but this time differently.

So we have the same functionality. However, instead of updating and expanding the structure again, we define expressions and return their state and methods.

And we can use it like below :

It seems composition is a bit more flexible than inheritance, right?

Now it is easier to imagine how Behavioural Patterns behave. As there are different types of Design Patterns, there are also types of Behavioural Patterns. We can list them as Command Pattern, Interpreter Pattern, Iterator Pattern, Observer Pattern, etc.

Finally, it’s time to talk about the Observer Pattern.

Observer Pattern allows dependent objects to notify and update automatically when the state of an object has changed. You can think of it like event handlers. So when there is data that constantly changes, using Observer Pattern to let the other classes know about it is pretty helpful. This pattern is often referred to with subject and, of course, observer. Observer is an abstract class that should be notified when a state change occurs. Subject is a class that holds the registered observers which should be notified about changes.

Let’s go through the examples: Assume that there’s a weather station. We know that weather stations provide weather information. The information can include data such as temperature and humidity; it creates the weather data. This data is displayed somewhere so that anything relevant can get this information. Now let’s reconsider this scenario as subject/observer.

The weather data in this example is the ‘subject’ that we talk about. And the displayed data related to this weather data, such as forecast, statistics are the ‘observers’.

This structure works like this:

First, the observers will register or subscribe to the subject. Then, the new data will be sent to the observers on data change. And finally, the observers will be updated related to this change.

Let’s expand on another example and write some code. But, again, we will keep it simple.

Imagine a storyline where we have two divs and a button on a page, and by clicking the button, the action about the colour of the subscribed div will happen. The action is a colour change in this example.

We define a class named Observe that includes subs(), unsubs() and notify() methods. Subs() method will subscribe to the observer, unsubs() method will unsubscribe the observer and notify() method will be used for notifying the data changes. All the observers we have (data that changes depending on something) will be in the observers’ array.

We define the elements we will use. After that, we create our observers. ‘updtDiv1’, ‘updtDiv2’.

We will go over div1, and everything we mentioned for that applies to div2 as well.

‘updtDiv1’ sets the colour of div1 as ‘red’. Now we create a constant from the Observe class named ‘newObs’. We call the subs() function for ‘updtDiv1’ and it subscribes. It means ‘updtDiv1’ will be in the observers’ array.

Clicking the change colour button notifies the changes (the divs’ colour change in this example (updtDiv1)). When we click the subscribe button for div1, it subscribes, and its colour changes. If we click unsubscribe, it unsubscribes and clicking the change colour button does not affect it anymore.

In addition, with a bit of HTML and CSS, we can also make this visually executable and display.

So here is The Observer Design Pattern, why we use it and how it works with plenty of examples. I hope you see now how useful it is, and you know what I mean when we talk about providing reusability.

In summary, the magic in Observer Design Pattern is that it can notify unlimited numbers of objects of a state change. This is because there are so many potential uses for it. So you can research and adapt more to your project, remember that there is no limit!