jQuery

Overview

JQuery is a very popular JavaScript framework and is one that we have been using for the last four or five years.

It levels the JavaScript quirks across browsers and has a simple, chainable syntax to traverse, select and manipulate the DOM.

Loading it from the Google CDN and ensuring it is cached reduces load, with the functionality gain it brings.

jQuery is not perfect, but it gives us a baseline to develop against and reduces the barrier to entry for building richer client-side functionality.

Example
WCMS use
MVC.net use
Developers and code reviewers are expected to be aware of, and code to protect against the OWASP top 10 security vulnerabilities for JavaScript.
Code

All scripts go in the bottom of the page.

Putting scripts in the bottom is a proven performance gain for page download speeds. This does mean that for existing services and future developments, inline JavaScript through the page is no longer an option.

This is a good thing though, as it enables us to:

  • begin to abstract common sets of functionality into self-contained modules
  • pull application specific code into a single cacheable file
  • place any small amounts of inline JavaScript in a consistent place at the end of the page.

Modular, lazy-loading

The plugins.js file has been developed to provide a core set of common rich functionality. This functionality applies itself based on matching class names and data- attributes. Scripts are lazy-loaded (and cached) on need.

This allows us to manage common functionality in one place, and upgrade components in a managed way.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//www.hants.gov.uk/ajax/services/min/?b=ajax/apps/wcms&f=plugins-wcms-replacement.js"></script>
Version and status
  • current version
  • Concept