Javascript modules: why and how?

Like many people I learned to use jQuery before learning JavaScript. JavaScript just has a much steeper learning curve and in the beginning you are very happy to change some HTML or tweak some CSS dynamically on the client side using jQuery. Binding click, hover and submit events to get an extra layer of interaction with the user was very easy to achieve.

Testing and maintaining your Javascript code

spaghetti codeTesting this code was another story. In the past, we kept clicking through the interface, quick fixing things that didn’t work anymore because we had changed the HTML structure and thus testing was very time intensive and boring. At the same time, since unstructured client side code quickly turns into one big pile of spaghetti, the code was hard to maintain, let alone scalable. Hence it became time to invest time learning how to write proper testable, maintainable and scalable Javascript code. And this, as it turns out, was the beginning of a journey.

The journey begins

The journey beginsThe very nice talk by Damian Nicholson (Writing (testable | maintainable | scalable | rock solid) JavaScript from the ScotlandJS2013 conference) basically pointed me in the right direction: just scripting in jQuery to get things done is a very nice first step to get things going quickly, but on the long run, the code must be structured, organised and split up in small bits to be testable and maintainable. The take away message of this talk (or one of them at least) was

Refactor your code, force yourself to test through objects (because they have properties and methods that you can unit test) and break up your code in modules.

Modules in Javascript

This quickly led to the following question: what is a module in Javascript?

The following 3 resources were very helpful trying to answer this question:

Javascript module

In general, a module is a way to use classes in Javascript. With a module you prevent cluttering the global scope and you can encapsulate your functions and properties. You decide which part of the code is publicly accessible: it actually becomes an API that others may play with!

So in the remainder of this post I will elaborate on what I learned about Javascript modules. Since I definitely learn by reading followed by doing, I started playing around with Javascript modules to try and get my head around the differences, use cases and so forth.

A very simple module for addition and subtraction

The Javascript design pattern book by Addy Osmani starts with the Module pattern, which is quickly followed by the Revealing Module pattern. In my opinion the latter is the most elegant, so I made my own simple module to see the theory in practice.

This code basically creates an outer self executing anonymous function that returns an object literal which is assigned to the variable simpleCalc. There are 4 methods publicly available (add, sub, set and get) but there is no way to change the value of the privateCounter directly or to call the privateShowCounter function directly. Due to the public set and get functions though, it is possible to either change the value of the privateCounter or to retrieve its value for further processing.

So, what comes next?

This very simple module will do for today. In the meantime, I’ll be studying other design patterns, include jQuery events in modules and start unit testing. These topics are for a follow-up post!

Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
How to add push notifications to a progressive web app

Leave a Reply

Your email address will not be published. Required fields are marked *