UI Development

Modular JS

Introduction:

JavaScript is the core scripting language for any front-end developer. With the rapid increase in advancement of frameworks like Angular, React, VueJS etc., Vanilla JavaScript is not a preferable option for web development. But still JavaScript is always a base for front-end developers.

For any complex component front-end development using Vanilla JS will involve huge lines of code. Hence structuring and having a modular approach is very important for better understanding of code and also will be a great help in knowledge transfer.

In this short blog, I will be listing two different modular approaches which developers can follow in order to keep the code clean and also easily understood by others.

Different Modular approaches:

Constructor modular approach

The new adding from ES6 has brought in the object-oriented model in JavaScript programming. As we know mostly everything in JavaScript is referred to as object. Hence this method or approach comes handy will a systematic flow of code.

In classical object-oriented programming we know that a constructor is a special method used to initialize a newly created object and as mentioned before in JavaScript almost everything is an object, we have most often interested in object constructors. Since object constructors are used to creating specific types of objects.

In this approach the fetch methods or any DOM element retrieving tasks are performed right in the constructor call. In object-oriented programming we know that constructor is the first block that is called when the object is created in a class.

Event binding also can be done in the same constructor as we do this only once when the DOM is loaded. The other utility functions can be defined after the constructor block,

Benefits: Code follows a systematic flow and becomes easy for debugging.

Issues: Object oriented approach is an ES6 syntax which is not supported for applications which do not follow ES6. Not supported in IE.

 

High Level Representation

Example: Creating a Dynamic slider using constructor pattern approach

 

 

Output Snapshot:

Codepen link (constructor modular approach): https://codepen.io/jonah-joe/pen/eYNqLJe

The init() approach

In case of large JS files structuring is very important as it becomes very difficult to go through the code and debug. This approach helps in proper structuring of code and also ensures code readability. Let us now look into the init approach and understand the process. The init() approach basically consists of a init() function which controls the entire program execution.

This init() function has various functions executed in order initially all the global and local variables are declared and defined in this block once we have all the variables declared the next function binds all the events.

Functions are blocks of code that take some input and may return some output, which means that it modifies some variables outside the function. We need functions to structure and organize code into small blocks that are reusable. In case of absence of functional programming, if we want to re-execute a piece of code, we have to copy it multiple times hence functions are critical for any JS program.

Once all the global and local variables are captured the init() function now executes the bindEvents() function which binds all the events. The bindEvents() function is like a parent functions that calls all the utility functions and performs all the interactions on the component. Finally the init() function is invoked at the end of the block as seen the attached screenshot. A high level representation of this approach is seen in the image.

Benefits: Proper Structuring, Easy debugging.

Issues: A little complex to understand initially.

High Level Representation

Example: Creating a Dynamic slider using the init() modular approach

Output Snapshot:

Codepen link (init() modular approach): https://codepen.io/jonah-joe/pen/XWbvQvO

Conclusion:

Hence following a modular approach in JavaScript programming helps more readability of code and easy debugging.  

About The Author