Proxy Design Pattern

Name: Proxy pattern
Rating: 1.3 (3065 reviews)
Author: francescoxx

Placeholder for objects

Github link: https://github.com/FrancescoXX/Design-Patterns-Proxy-Javascript

Structural Design Pattern

📌Introduction

A Proxy is a very simple structural design pattern.
It's a class functioning as an interface to some other class.

⚡️In short

A proxy is a wrapper, to provide extra functionality.

It is called by the client to access the real needed object, which is hidden.

For a client, the usage of a proxy object is the same as using the real object, because the proxy and the class implement the same interface.

💡Intent

Provide a placeholder for another object, to control access and perform some operations to it.

🔧 Apply when

Extra functionality is required in a transparent way.
Want to provide additional logic, and a reference is not enough.
Want to to cache when operations on the real object are resource intensive.
Want to check preconditions before operations on the real object are invoked.

✅Pro

The proxy lets you execute something either before or after the primary logic of the class, with no changes for that class. The proxy implements the same interface as the class, so it can be passed to a client that expects an object as areal service.

⚠️Cons

Adds indirection, which has a cost. For example time delay in http requests.

🏆 Great for

Transparently add functionality to an existing real object.

/* Proxy Design Pattern
 *
 * Javascript implementation
 *
*/

//Enum in Javascript for Socials
const SOCIALS = Object.freeze({
  TWITTER: "Twitter",
  LINKEDIN: "Linkedin",
  FACEBOOK: "Facebook",
  INSTAGRAM: "Instagram",
  GITHUB: "Github",
  DEVTO: "Devto"
});

// SOCIALS API
class SocialsAPI {
  constructor() {
    this.getFollowers = (platform) => {
      switch (platform) {
        case SOCIALS.TWITTER:
          return 5841;
        case SOCIALS.LINKEDIN:
          return 2701;
        case SOCIALS.GITHUB:
          return 184;
        case SOCIALS.DEVTO:
          return 275;
        case SOCIALS.FACEBOOK:
          return 255;
        case SOCIALS.INSTAGRAM:
          return 43;
        default:
          return "UNKNOW SOCIAL"
      }
    }
  }
}

// SOCIALS PROXY
class SocialsProxy {
  constructor() {

    this.api = new SocialsAPI(); //Api to fetch when not available in cache
    this.cache = {}; //To store the follower locally, and dont fetch api again

    this.getFollowers = (platform) => {
      if (this.cache[platform] != null) {
        console.log(`Cached for ${platform} : ${this.cache[platform]} `);
      } else {
        this.cache[platform] = this.api.getFollowers(platform);
        console.log(`API fetched for ${platform} : ${this.cache[platform]} now stored in cache`);
      }
      return this.cache[platform];
    }
  }
}

//MAIN
const socialProxy = new SocialsProxy();

socialProxy.getFollowers(SOCIALS.TWITTER); //Socials API fetched for Twitter : 5841. Now stored in cache
socialProxy.getFollowers(SOCIALS.DEVTO); //Socials API fetched for Devto : 275. Now stored in cache
socialProxy.getFollowers(SOCIALS.LINKEDIN); //Socials API fetched for Linkedin : 2701. Now stored in cache
socialProxy.getFollowers(SOCIALS.GITHUB); //Socials API fetched for Github : 184. Now stored in cache

socialProxy.getFollowers(SOCIALS.DEVTO); //Cached for Devto : 275
socialProxy.getFollowers(SOCIALS.TWITTER); //Cached for Twitter : 5841

//Current Proxy cache
console.log(socialProxy.cache); //{ Twitter: 5841, Linkedin: 2701, Github: 184, Devto: 275 }

Github link: https://github.com/FrancescoXX/Design-Patterns-Proxy-Javascript