Design patterns in Typescript made easy — part II
Today we will talk about structural design patterns which are considered as design patterns that make easy/possible relations between different classes.
But first I have to talk about an important design pattern that belongs to our last articles’s design patterns category (creational), the Factory design pattern is defined as the solution of creating an object of a class without exposing the creation logic to the client and refer to a newly created object using a common interface.
The problem:
Imagine a scenario where there are multiple cases in the client class and we call multiple new keywords for creating new objects.
if(value == 'Ferari'){ let car = new Ferari();}
else if(value == 'Bugati'){ let car = new Bugati();}
The solution:
The Factory method pattern is to define an interface for creating objects but delegates the object creation to the subclasses.
1.Adapter design pattern
The adapter is a structural design pattern that allows objects with incompatible interfaces to collaborate just like HDMI <-> DVI adapter
The problem :
Imagine that you have an app that works with data in XML format, but at some point, you need to use a library that can only work with JSON.
For example our application use a soap API (XML output)to get weather data for the north of the country from a provider and show it in LCD display the code works just fine but you decide to use another API to get the data of the south of the country and here you have to use a Rest API (JSON output) you have two solutions to deal with the new situation : 1- to make a new class to deal with the rest API OR 2 — to use Adapter design patterns.
The solution :
We have adapter here that can communicate with the client this adapter can understand both types of returns (XML and JSON) and provide a data for our LCD display (client)
2.Facade design pattern
Facade pattern hides the complexities of the system and provides an interface which the client can access the system. This type of design pattern adds an interface to the existing system to hide its complexities.
The problem:
For example, we have a class called by our client to upload the image to Amazon S3 but before upload, we have to check, convert, rename the file. Every action here is related to a specific class we have a class to check the file and another to rename it using a specific naming strategy and checking file using a machine learning predict library to prevent a pornographic content.
As we see here we have a complex system to upload a file we will use a Facade to reduce all this complexity in a single method (one call)
The solution :
// call exampleimport Uploader = Facade.Upload;
// checking , renaming , convert and upload the file let file = new File('./pixel.png');
Uploader.upload(file);
Here the facade method ‘upload’ provides to the client an easy way to reduce all the process with a simple one call to a static method
3.Proxy design pattern
Proxy is a structural design pattern that works as an interface of another class, instead of calling a function from a real class we go through the proxy
The problem :
We have a powerful object that logs actions in our database for example but to log in the database you should have a role for that (permissions), there is multiple solutions for this problem but the best way is to use Proxy.
In an ideal world, we would put this code directly into the object’s class, but that is not always possible. For instance, the class may reside in a closed 3rd-party library.
The solution :
// call example
let logger = new LoggerProxy(); // here we check for permissions// later we loglogger.log('Delete payment resource ID 123');
First, we create an interface to make class and proxy interchangeable we invoke the original class function into the proxy function and before instantiation of the proxy we check the permission of the connected user.
Part I : https://medium.com/coinmonks/design-patterns-in-javascript-made-easy-part-i-10334decb204
References:
