DEV Community

José Miguel Álvarez Vañó
José Miguel Álvarez Vañó

Posted on • Originally published at jmalvarez.dev

5

Facade pattern in TypeScript

Introduction

The facade pattern is a structural pattern which allows you to communicate your application with any complex software (like a library or framework) in a simpler way. It is used to create a simplified interface to a complex system.

Diagram

Applicability

  • you don't want your application to be tightly coupled to a 3rd party library or framework
  • you want to simplify the interaction of your application with a complex system

Implementation

You can find the full example source code here. As an example of the implementation I'm going to create an application that uploads files to a cloud storage service.

Let's imagine that the 3rd-party code is something like the following:

class CloudProviderService {
  public isLoggedIn(): boolean {
    // Checks if the user is logged in
  }

  public logIn(): void {
    // Logs the user in
  }

  public convertFile(file: string): string {
    // Converts the file to a format that the cloud provider accepts
  }

  public uploadFile(file: string): void {
    // Uploads the file to the cloud provider
  }

  public getFileLink(file: string): string {
    // Returns the link to the uploaded file
  }
}
Enter fullscreen mode Exit fullscreen mode

As we don't want to couple our application with this 3rd-party code we are going to create a facade that will hide the complexity of it. This facade will be the only class that our application will interact with.

class CloudProviderFacade {
  private service: CloudProviderService;

  constructor() {
    this.service = new CloudProviderService();
  }
}
Enter fullscreen mode Exit fullscreen mode

Now we have to implement the functions that our application will use to interact with the 3rd-party code. For the example I'm going to only implement one function:

class CloudProviderFacade {
  private service: CloudProviderService;

  constructor() {
    this.service = new CloudProviderService();
  }

  public uploadFile(file: string): string {
    if (!this.service.isLoggedIn()) {
      this.service.logIn();
    }

    const convertedFile = this.service.convertFile(file);
    this.service.uploadFile(convertedFile);

    return this.service.getFileLink(convertedFile);
  }
}
Enter fullscreen mode Exit fullscreen mode

And that's it! Like this we have implemented the Facade pattern. It's very simple and very useful at the same time. A simple example of how the client would use this code:

const facade = new CloudProviderFacade();
const fileLink = facade.uploadFile("file.txt");
console.log("File link:", fileLink);

/*  
  Output:

  Logging in...
  Converting file... file.txt
  Uploading file... file.txt.converted
  File link: https://example.com/file.txt.converted
*/
Enter fullscreen mode Exit fullscreen mode

Resources

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore