Javascript Design Patterns: Builder

When building a process for an application, for example, when dealing with state management or establishing routines to do a particular task, you may find yourself needing to use an object in different parts of its lifecycle.

For example, when doing a database transaction, sometimes you may chain operations in an instance of your DB connection class for different purposes: Update a record, add an event listener, create a new record, perform a specific query, and so on. You may want to apply the Builder design pattern in situations like this.

In an assembly line, each step has a responsibility!

From the design patterns book, we can take the following definition:

The Builder design pattern is a creational pattern where the creation of an object can have different representations.

Just like in an assembly line, using the builder pattern our object can have different representations through its creation. For example, in a car assembly line, we have first the chassis, then a chassis + wheels, chassis + wheels + engine in an accumulating pattern. Using the builder pattern we have methods within our object that can increment the object, thus having different representations based on what methods have been applied to the object.

A car is assembled one part at a time!

In this article, we’ll see how to implement the builder design pattern in javascript to create a simple Jquery copy.

Building a jquery “copy”

In this example, we’ll create “jQuestion” a class that mimics to a certain extent Jquery.

First, we’ll create the famous $ selector and append it to the window, so it behaves just like jquery. It will be a function, that receives a query and returns an object of our jQuestion class. Also, remember, use the global scope with caution.

Setup

After that, we may create our builder methods, keeping the following pattern for our builder:

• Perform an operation;
• Returns this;

The builder will do its operation, changing its current value, and then return the object's instance, this. Doing things this way, it’s possible to implement the famous chaining of operations that is characteristic of jquery, D3, and many other JS libraries.

innerText and attribute for Jquestion

And there we go, we have a builder implementation of Jquestion.

Code snippet

Nowadays you may ask yourself, why then do stuff with Jquery if the document representation already provides an excellent interface to interact with the DOM? Because back when Jquery was created, there was no single DOM API. If you wanted to do a selection, it would vary with the Browser and the version of that browser. Imagine having to account for chrome, IE, Firefox, safari, and version changes over time. True chaos.

So to solve that, Jquery uses a Builder pattern to do operations and a Facade for the operations, abstracting DOM operations for each browser with a simple API. Marvelous design patterns applied in real-world applications!

Wrap Up

As with all design patterns, and ways of structuring code, the builder pattern is situational. It shines when dealing with objects where different representations matter. It also can make debugging easier in many situations, because each step can be debugged individually.

However, when applied for example in a case where a set of steps is always applied to construct an instance of the class, it just becomes an extra bureaucracy while coding. Design patterns are not silver bullets, always think before applying a method, and evaluate how your application currently works.

More on design patterns

Design Patterns in Javascript: Facade

Links

Github: https://github.com/dgramaciotti

Linkedin: https://www.linkedin.com/in/daniel-guedes-79a05a176/

Medium: https://medium.com/@dgramaciotti

Have you liked this article? Give it a like and share it on social media!

If you got any observations feel free to share them in the comments!