Observer Pattern

Understanding the Observer Pattern

The Observer pattern is a behavioral design pattern that establishes a one-to-many relationship between objects. When one object (the subject) changes state, all its dependents (observers) are notified and updated automatically. This pattern is a cornerstone of event-driven programming.

Problem

Imagine you're developing an application where changes to one object require actions in other objects. For example, when a stock price changes, multiple displays need to update: a price chart, a list view, and a statistics panel. Without a proper pattern, you might end up with tight coupling between these components, making your code rigid and difficult to maintain.

The challenge is to establish communication between these objects while keeping them loosely coupled. You want the price object to notify the displays of changes without knowing which displays are listening.

Solution

The Observer pattern suggests defining a one-to-many dependency between objects. The key objects in this pattern are the Subject (also called Observable) and Observer:

• Subject: Maintains a list of observers and provides methods to add, remove, and notify observers.
• Observer: Defines an interface for objects that should be notified of changes in a subject.

When the subject's state changes, it notifies all observers. The observers can then query the subject to get the updated state and take appropriate actions.

Structure

Participants

• Subject (Observable): Knows its observers and provides interfaces for attaching, detaching, and notifying observers.
• ConcreteSubject: Stores state of interest to ConcreteObserver objects and sends notifications when its state changes.
• Observer: Defines an updating interface for objects that should be notified of changes in a subject.
• ConcreteObserver: Implements the Observer updating interface to keep its state consistent with the subject's.

When to Use

Use the Observer Pattern when:

• When an abstraction has two aspects, one dependent on the other.
• When a change to one object requires changing others, and you don't know how many objects need to be changed.
• When an object should be able to notify other objects without making assumptions about who these objects are.
• When you need to maintain consistency between related objects without making them tightly coupled.

Benefits

• Loose Coupling: Subjects and observers can interact without knowing much about each other.
• Support for Broadcast Communication: Notifications are broadcast automatically to all interested objects.
• Dynamic Relationships: Observers can be added and removed at runtime.
• Open/Closed Principle: You can introduce new subscriber classes without changing the publisher's code.

Real-World Uses

• GUI Components: When UI elements need to update in response to data changes.
• Event Handling Systems: In web browsers, DOM events use the Observer pattern.
• Message Brokers: Publish-subscribe messaging patterns in distributed systems.
• Data Binding: In MVC/MVVM frameworks to synchronize models and views.
• Social Media: Notification systems where users subscribe to updates.

Implementation Example

Here's a JavaScript implementation of the Observer pattern for a simple weather station:

// Observer interface
class Observer {
    update(data) {
        throw new Error("Method 'update()' must be implemented");
    }
}

// Subject (Observable)
class Subject {
    constructor() {
        this.observers = [];
    }
    
    attach(observer) {
        if (observer instanceof Observer && !this.observers.includes(observer)) {
            this.observers.push(observer);
        }
    }
    
    detach(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }
    
    notify(data) {
        for (const observer of this.observers) {
            observer.update(data);
        }
    }
}

// Concrete Subject
class WeatherStation extends Subject {
    constructor() {
        super();
        this.temperature = 0;
        this.humidity = 0;
        this.pressure = 0;
    }

    setMeasurements(temperature, humidity, pressure) {
        this.temperature = temperature;
        this.humidity = humidity;
        this.pressure = pressure;

        // Notify all observers about the change
        this.notify({
            temperature: this.temperature,
            humidity: this.humidity,
            pressure: this.pressure
        });
    }
}

// Concrete Observer 1
class CurrentConditionsDisplay extends Observer {
    constructor() {
        super();
    }

    update(data) {
        const { temperature, humidity } = data;
        console.log(`Current conditions: ${temperature}°C and ${humidity}% humidity`);
    }
}

// Concrete Observer 2
class StatisticsDisplay extends Observer {
    constructor() {
        super();
        this.temperatures = [];
    }

    update(data) {
        const { temperature } = data;
        this.temperatures.push(temperature);
        
        const avg = this.temperatures.reduce((sum, t) => sum + t, 0) / this.temperatures.length;
        const max = Math.max(...this.temperatures);
        const min = Math.min(...this.temperatures);
        
        console.log(`Avg/Max/Min temperature = ${avg.toFixed(1)}/${max}/${min}`);
    }
}

// Concrete Observer 3
class ForecastDisplay extends Observer {
    constructor() {
        super();
        this.lastPressure = 0;
        this.currentPressure = 0;
    }

    update(data) {
        const { pressure } = data;
        this.lastPressure = this.currentPressure;
        this.currentPressure = pressure;
        
        let forecast = "";
        if (this.currentPressure > this.lastPressure) {
            forecast = "Improving weather on the way!";
        } else if (this.currentPressure === this.lastPressure) {
            forecast = "More of the same";
        } else {
            forecast = "Watch out for cooler, rainy weather";
        }
        
        console.log(`Forecast: ${forecast}`);
    }
}

// Using the pattern
const weatherStation = new WeatherStation();

const currentDisplay = new CurrentConditionsDisplay();
const statisticsDisplay = new StatisticsDisplay();
const forecastDisplay = new ForecastDisplay();

weatherStation.attach(currentDisplay);
weatherStation.attach(statisticsDisplay);
weatherStation.attach(forecastDisplay);

// Simulate weather changes
weatherStation.setMeasurements(22, 65, 1012);
weatherStation.setMeasurements(24, 70, 1010);
weatherStation.setMeasurements(20, 90, 1005);

In this example, the WeatherStation is our subject, and the various displays are the observers. When the weather data changes, all registered displays are automatically updated to show the new information. This demonstrates how the Observer pattern can be used to implement a loose coupling between related objects.