Masab Mehmood 01

React Developer

You want to

Simplify

Complex
set of classes

/masabmehmood
 Masab Mehmood 02
React Developer

So here is the

Facade

Pattern

comes in

rescue
/masabmehmood
 Masab Mehmood 03
React Developer

Facade

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

/masabmehmood
 Masab Mehmood 04
React Developer

Real-World

Analogy
The order goes to the kitchen and the food comes
back after a while. Simple!

The customer doesn’t want to know who will cut the

meat for how long will it be cooked and who is going
to wash the dishes afterward.

The customer just wants to eat a tasty meal .

Therefore, the menu serves as the facade to make it

easier
/masabmehmood
 Masab Mehmood 05
React Developer

Applicability
The Facade pattern is widely used and applicable in many use cases. Use the

Facade Pattern whenever you want to:

Provide a simple interface to a complex subsystem: A facade

offers a limited interface to the subsystem that is good enough for
most clients.

Reduce dependencies between clients and implementation

classes: Using a facade decouples subsystems from clients and
other subsystems

Structure a subsystem into layers: Each subsystem has a facade

as an entry point. When subsystems are dependent, they can
simply communicate with each other solely through their facades.

/masabmehmood
 Masab Mehmood 06
React Developer

Structure
The structure of the Facade is simple. It contains our Facade and many subsystem
classes.

/masabmehmood
 Masab Mehmood 07
React Developer

Participants
From the structure, you can derive the following participants:

1: Facade
Knows how to interact with the subsystem classes and delegates client
requests to a particular part of the subsystems's functionality.

2: Subsystem classes
Consists of many objects with complex functionality. To make them work
properly, you must dive deep into the subsystem's functionality. The
subsystem does not know the Facade.

/masabmehmood
 Masab Mehmood 08
React Developer

Code

Example

/masabmehmood
 Masab Mehmood 09
React Developer

/masabmehmood