Skip to main content

Façade Pattern

Façade is a structural design pattern that provides a simplified interface to a library, a framework, or any other complex set of classes.

~ Refactoring Guru

Façade Pattern UML Class Diagram

The Facade design pattern simplifies complex subsystems by providing a simplified interface. It allows clients to interact with the subsystem through a single facade class, isolating them from its internal details. Facades can be used to structure subsystems into layers and reduce coupling between multiple subsystems.

Slides​

Factory Pattern
full screen click here

Step by Step Implementation​

In this tutorial, we’ll implement the Facade Pattern to simplify interaction with a complex video processing system. The facade class will provide an easy interface for the client to convert videos, hiding the details of the subsystem’s multiple classes.

Live Editor
function FacadeDemo() {
    class VideoFile {
        constructor(filename) {
            this.filename = filename;
            this.format = filename.split(".").pop();
        }
    }

    class AudioMixer {
        fix(audioStream) {
            return "Audio fixed";
        }
    }

    class BitrateReader {
        static read(filename, codec) {
            return "Reading file at given bitrate";
        }
        static convert(buffer, codec) {
            return "Converting file bitrate";
        }
    }

    class CodecFactory {
        static extract(file) {
            return file.format === "mp4" ? new MPEG4CompressionCodec() : new OggCompressionCodec();
        }
    }

    class OggCompressionCodec {
        constructor() {
            this.type = "ogg";
        }
    }

    class MPEG4CompressionCodec {
        constructor() {
            this.type = "mp4";
        }
    }

    return <div>Subsystem classes defined.</div>;
}
Result
Loading...