JavaScript Style Guide

Overview

To date most of our projects have included jQuery as the primary framework as many of the plugins used depend on it such as Slick carousel, WordPress plugins and jQuery UI features. This is a perfectly acceptable choice for many existing projects however it would be encouraged to move away from jQuery dependency where possible in future projects. There are many benefits for moving away from jQuery and other JavaScript based libraries but this will critically improve performance and loading times within the browser experience.

ES6 and later versions of pure/vanilla JavaScript (non-framework-based) now provide comparable functionality without too much extra complexity. Unless the project includes predefined features like carousels then consider using ES6 or later for simple toggling state functions and verification features.

As part of the task runner setup, any aspects of the script should be included in the setup with linting and minification as part of the process to check for errors and reduce page weight.

There's a separate set of guidelines for VueJs we have started to put together and encourage further contributions.

jQuery / ES6 / Native JS

For projects including jQuery, check that the version it's using supports existing functions both custom ones added by the original author of the project and any plugins it uses. Likewise it may be necessary to update the plugins for a project. Depending on the project's age this may be a simple as running "npm update" or similar command. Older projects may need to be manually updated with the code inside of included Javascript files or CDN references.

Writing functions specific to a component on certain pages ensure that it doesn't run on pages without that component using length or similar conditional checks.

if ( jQuery('.carousel').length ) {
    jQuery('.carousel').carouselFunction({});
}

if ( document.querySelectorAll(".carousel").length ){
    carouselFunction();
}

if (document.getElementById('carousel') instanceof Object){
    carouselFunction();
}