Assorted collection of sporadic blogs

Intro

It is well known that the use of JavaScript has increased notoriously in the last five years or so. We now certainly have heavy JavaScript applications like Gmail but even content-based websites have been adding some serious behaviour to their pages.

Libraries like jQuery have allowed developers and designers that might have avoided JavaScript in the past to start using it substantially in their projects.

But, as requirements for interactive components rise, the management of all that code might become overwhelming.

A common scenario

Let’s take a site with two types of pages: a product catalogue page and a product detail page. On top of that, some detail pages will have a “Related Products” section at the bottom of the page.

1. We want that when a user clicks on a product thumbnail image to launch a modal view window with a zoomed version. This functionality would apply on thumbnails on the catalogue page, secondary images in the detail page and related products thumbnails. We could argue this is a common functionality across all page types.
2. We also want to do some DOM manipulation on the details page.
3. Finally, we want the related products listed and displayed as a carousel.

Did you think jQuery?

So the first thought might be to get some jQuery plugins to do all the magic. The bottom of all your html pages might look like this:

<script src="js/jquery.js"></script>
<script src="js/modal-view-plugin.js"></script>
<script src="js/carousel-plugin.js"></script>
<script src="js/my-scripts.js"></script>

my-scripts.js might look like the one below:

$(document).ready(function() {

  // code to call modal view in all pages

  // code to manipulate some DOM elements in detail page

  // code to call related products carousel

});

Should we call the carousel functionality when the user lands on a catalogue page? Nope. The issue gets bigger as we start to add more page specific functionality on our main js file and more page types across the site.

Solution 1.0

There is a technique that allows you to organise and execute the code for a given page only when is needed. It’s called the Garber-Irish implementation.

I won’t go into detail on this technique as the authors’ sites do a very good job on that.

In a nutshell, your JS code will read what type of page it is currently loaded from attributes in the html’s body tag.  Based on that, it will execute shared code across pages and then it will start moving on to more page specific code.

A snippet of how our problem might be implemented with this technique in my-scripts.js is below:

SITENAME = {
  allpages: {
    init: function() {
      // application-wide code:
      // code to call modal view in all pages
    }
  },

  detailpage: {
    init: function() {
      // controller-wide code:
      // code to manipulate some DOM elements in detail page
    },

    relatedproducts: function() {
      // action-specific code:
      // code to call carousel in related products when they exist
    }
  }
};

Solution 2.0

This technique is great for organising code but, on top of that, we want to improve on the optimisation department:  welcome to the world of dependency management.

There are a few libraries that let you call files only when you need to. Until now we would either call all files in all pages or just list the ones needed in the html – which is hard to maintain.

These JavaScript loaders, as they are commonly referred, can play nicely with the Garber-Irish technique mentioned above. I particularly use require.js but there are many more out there.

The approach here is to still use the sections from the Garber-Irish example but we also adding in my-scripts.js which files we want to load for each type of page:

SITENAME = {
  allpages: {
    init: function() {
      require(["jquery", "modal-view-plugin"], function($) {
        // jquery.js and modal-view-plugin.js plugin have been loaded.
        $(function() {
          // application-wide code:
          // code to call modal view in all pages
        });
      });
    }
  },

  detailpage: {
    init: function() {
      // controller-wide code:
      // code to manipulate some DOM elements in detail page
    },

    relatedproducts: function() {
      require(["carousel-plugin"], function($) {
        // carousel-plugin.js plugin have been loaded.
        $(function() {
          // action-specific code:
          // code to call carousel in related products when they exist
        });
      });
    }
  }
};

Organising JavaScript code is an evolving topic. If you are building web applications instead, this might not be the best solution.

But for sites with lots of JavaScript and, more specifically, DOM eye-candy the combination of these techniques might help you keep your code more manageable.