Proxy Design Pattern

#webdev #javascript #systemdesign #designpatterns

In my previous blogs, I explored various creational design patterns that deal with object creation mechanisms. Now, it’s time to dive into structural design patterns, which focus on how objects and classes are composed to form larger structures while keeping them flexible and efficient. Let's start with proxy design pattern

Proxy Design Pattern in JavaScript

The Proxy design pattern is a structural design pattern that provides an object representing another object. It acts as an intermediary that controls access to the real object, adding additional behavior such as lazy initialization, logging, access control, or caching, without changing the original object’s code.

In JavaScript, proxies are built-in features provided by the Proxy object, allowing you to define custom behavior for fundamental operations such as property access, assignment, function invocation, etc.

When Do We Need the Proxy Pattern?

The Proxy pattern is particularly useful when:

Lazy Initialization: You want to delay the creation of a resource-heavy object until it is needed.
Access Control: You need to control access to an object, for example, to restrict unauthorized access or to limit operations based on conditions.
Logging: You want to log actions on an object (e.g., property access or method calls).
Caching: You want to cache the result of expensive operations to avoid redundant computations.

Components of Proxy Pattern

Subject: The interface that defines the common operations for both the real object and the proxy.
RealSubject: The actual object that performs the real work.
Proxy: The intermediary that controls access to the RealSubject.

Analogy:

Imagine you have a large painting that you want to show your guests, but it takes a lot of time to pull it out from a storage room (because it's heavy and takes time to carry). Instead of waiting for that every time, you decide to use a small postcard image of the painting to show them quickly while they wait for the actual painting to be fetched.

In this analogy:

The large painting is the real object (like an image that takes time to load).
The postcard is the proxy (a lightweight substitute that stands in until the real object is ready).
Once the real painting is ready, you show the actual one to your guests.

Real-World Analogy:

Think of a real estate agent as a proxy. When you want to buy a house, you don’t immediately visit every house (loading the real object). Instead, the real estate agent (proxy) first shows you photos and descriptions. Only when you’re ready to buy (i.e., when you call display()), the agent arranges a house visit (loads the real object).

Real-World Example: Image Loading (Virtual Proxy)

Let’s use the example of image loading in a web application where we want to delay the loading of the image until the user requests it (lazy loading). A proxy can act as a placeholder until the real image is loaded.

Here’s how you can implement the Proxy design pattern in JavaScript.

Example: Proxy for Image Loading

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

Explanation:

1). The Real Image:

The RealImageclass represents the actual image.
It takes a filename as input and simulates the time-consuming process of loading the image from disk (shown by the loadImageFromDiskmethod).
Once loaded, the displaymethod is used to show the image.

2). The Proxy Image:

The ProxyImageclass acts as a stand-in for the RealImage. It doesn’t load the real image immediately.
It holds a reference to the real image (but initially it’s nullbecause the real image hasn’t been loaded yet).
When you call the displaymethod on the proxy, it checks if the real image has been loaded. If not, it loads it first, and then displays it.

3). Usage:

When we create an instance of ProxyImage, the actual image is not loaded yet (because it's resource-intensive).
The first time displayis called, the proxy loads the image (using the RealImageclass) and then displays it.
The second time displayis called, the real image has already been loaded, so it only displays the image without loading it again.

The built-in Proxy object

The ES6 proxy consists of a proxy constructor that accepts a target & handler as arguments

const proxy = new Proxy(target, handler)

Here, target represents the object on which proxy is applied, while handler is a special object that defines the behaviour of the proxy.

The handler object contains a series of optional methods with predefined names called trap methods ( forexample apply,get,set and has) that are automatically called when the corresponding operations are performed on the proxy instance.

Let's understand this by implementing calculator using built-in proxy

// Step 1: Define the Calculator class with prototype methods
class Calculator {
  constructor() {
    this.result = 0;
  }

  // Prototype method to add numbers
  add(a, b) {
    this.result = a + b;
    return this.result;
  }

  // Prototype method to subtract numbers
  subtract(a, b) {
    this.result = a - b;
    return this.result;
  }

  // Prototype method to multiply numbers
  multiply(a, b) {
    this.result = a * b;
    return this.result;
  }

  // Prototype method to divide numbers
  divide(a, b) {
    if (b === 0) throw new Error("Division by zero is not allowed.");
    this.result = a / b;
    return this.result;
  }
}

// Step 2: Create a proxy handler to intercept operations
const handler = {
  // Intercept 'get' operations to ensure access to prototype methods
  get(target, prop, receiver) {
    if (prop in target) {
      console.log(`Accessing property: ${prop}`);
      return Reflect.get(target, prop, receiver); // Access property safely
    } else {
      throw new Error(`Property "${prop}" does not exist.`);
    }
  },

  // Intercept 'set' operations to prevent mutation
  set(target, prop, value) {
    throw new Error(`Cannot modify property "${prop}". The calculator is immutable.`);
  }
};

// Step 3: Create a proxy instance that inherits the Calculator prototype
const calculator = new Calculator(); // Original calculator object
const proxiedCalculator = new Proxy(calculator, handler); // Proxy wrapping the calculator

// Step 4: Use the proxy instance
try {
  console.log(proxiedCalculator.add(5, 3)); // Output: 8
  console.log(proxiedCalculator.multiply(4, 2)); // Output: 8
  console.log(proxiedCalculator.divide(10, 2)); // Output: 5

  // Attempt to access prototype directly through proxy
  console.log(proxiedCalculator.__proto__ === Calculator.prototype); // Output: true

  // Attempt to modify a property (should throw an error)
  proxiedCalculator.result = 100; // Error: Cannot modify property "result".
} catch (error) {
  console.error(error.message); // Output: Cannot modify property "result". The calculator is immutable.
}

The best part using proxy this way as :

The proxy object inherits the prototype of the original Calculator class.

Mutations are avoided through the set trap of the Proxy.

Explanation of the Code

1). Prototype Inheritance:

The proxy does not interfere with the original prototype of the Calculator class.
this is confirmed by checking if proxiedCalculator.proto === Calculator.prototype. The result will be true.

2). Handling getOperations:

The get trap intercepts property access on the proxy object.
We use Reflect.get to safely access properties and methods from the original object.

3). Preventing Mutations:

The set trap throws an error whenever there is an attempt to modify any property on the target object. This ensures immutability.

4). Using Prototype Methods through the Proxy:

The proxy allows access to methods such as add, subtract, multiply, and divide, all of which are defined on the original object's prototype.

Key points to observe here is:

Preserves Prototype Inheritance: The proxy retains access to all prototype methods, making it behave like the original Calculator.
Prevents Mutation: The set trap ensures the internal state of the calculator object cannot be altered unexpectedly.
Safe Access to Properties and Methods: The get trap ensures only valid properties are accessed, improving robustness.

If you've made it this far, don't forget to hit like ❤️ and drop a comment below with any questions or thoughts. Your feedback means the world to me, and I'd love to hear from you!