DEV Community

Oliver Mensah
Oliver Mensah

Posted on • Updated on

Design Patterns for Developers using JavaScript - Part Three

Structural Design Patterns

This is the third part of the series of posts on design patterns for developers using JavaScript. If you missed the previous chapters, kindly read that of part one and part two. In this article, we will talk about Structural Design Patterns. With these patterns, it is concerned with
how objects are made up, what makes up these objects and how to simplify the relationships between them. If you remember from Creational Design Patterns, we were interested in only creating an instance of an object. The structural pattern deals with relationships. It helps one object to relate to something else; and this can be done in two ways; either by extending the functionality or simplifying the functionality. Some of the common patterns of structural design patterns are; Decorator Pattern, which extends the functionality of an object, Flyweight Pattern, and the Façade Pattern; which both help simplify functionality.

Decorator Pattern

Decorator Pattern is used to add new functionality to an existing object without modifying the underlying code that depends on them. Understanding how to take an existing object and wrap new features around it is very important since with less understanding you can even make the application more complicated than before. Imagine you have a task and you want another task called urgent task (object) that has new features of notifying you about deadlines, we can take that existing task and decorate it to obtain whatever we want the new task to do.

Let's do that:

Flyweight pattern

The Flyweight Pattern is used to conserve memory by taking portions of an object and sharing that across other objects. This is one of the most useful patterns when it comes to managing application resources. This is because it takes several similar objects and places that share information into a single external object or structure as flyweight hence reducing the resources required to run an overall application.
So flyweight separates its data into intrinsic and extrinsic data. Intrinsic data which the flyweight tracks and extrinsic which some other object tracks.
For the code example, I will switch to NodeJs to easily determine the amount of memory used when using a Flyweight pattern vs not using the pattern.

From the above code, we can infer that the task object has a lot of information but just a few are unique; which are the names. We can then share the rest across one or more tasks. We can now use the factory pattern to make it a little bit better to reduce memory consumption.


When we compare the amount of memory usage, it is seen that the flyweight pattern helps a lot if you need to manage resources very well.

Facade Pattern

The last pattern that will be talked about in this article is the Facade Pattern. It may be that you have dealt with APIs or classes or things before, which was very stressful to deal with. Usually, it is easier to work with a simplified version of a complex system. Facade Patterns help to achieve that by wrapping complicated subsystems with a simple API. For instance, back then jQuery was highly adopted because it makes it easier to manipulate the Document Object Model(DOM). This pattern is used to provide a simplified interface to a potentially complicated subsystem.

Imagine being tasked by a client to build a school management information system for a school. The system should be able to add a newly admitted student, once done then it should email the student access to his books and finally notify the user of the application about what happened. Let's code that with Facade Pattern

Discussion (0)