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

Testing 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 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:

• How good c# habits can encourage bad Javascript habits: part 1, by Mike Hostetler (2010)
• The mind-boggling universe of JavaScript Module strategies, by Tiago Romero Garcia (2015)
• Learning Javascript design patterns, book by Addy Osmani (2015)

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!