Riding the Modern Web: Dealing with JavaScript Libraries

  • Article

There are few websites that don’t make use of external JavaScript libraries. The most widely used library is probably jQuery. They allow you to reuse application logic that otherwise you’d have to write and maintain yourself, so why reinvent the wheel?

On the other hand, as with any external code you use, you potentially introduce bugs, security, performance issues or unexpected behavior. For example, each JavaScript library you use needs to be loaded in the browser, adding an additional server roundtrip, negatively impacting the performance. In short, you need to be aware of the risks you’re introducing into your website.

But what strategies can you follow to mitigate those risks when building your websites? The best strategy of course for mitigating risks, is to eliminate the risk factor entirely. In practice, this means that you need to question yourself whether you actually need the external library or if you could leverage web standards functionality. The second strategy is to contain the risk by making sure you follow up on updates, making sure you always upgrade to the latest stable version of each library.

This blogpost is the second in a series about Modern Web development. We’ll be covering the following topics:

Replacing jQuery functionality

As mentioned above, one of the most commonly used JavaScript libraries is jQuery. This JavaScript library provides web developers with, amongst others, an easy way to query and manipulate the HTML DOM.

In the following example, we’ll demonstrate how to replace DOM manipulations with web standards functionality. In the code sample below you can see some examples of doing this using jQuery.

    // Retrieve DOM element with id 'featuredProduct'

    var product = $('#featuredProduct');

 

    // Retrieve all image child elements for the

    var productImages = $('#featuredProduct').find('img')

 

    // Add a class to the given element

    $('#featuredProduct').addClass('featured');

 

Now let’s look at how this can be transformed using standard JavaScript functionality.

 

    // Retrieve DOM element with id 'featuredProduct'

    var product = document.getElementById('featuredProduct');

 

    // Retrieve all image child elements for the

    var productImages = document.querySelectorAll('#featuredProduct
img');

 

    // Add a class to the given element

    document.querySelector('#featuredProduct').classList.add('featured');

 

There are many more scenarios which can be translated into JavaScript but as you can see, this can be a relatively easy task to achieve. Note that jQuery provides more functionality than just DOM manipulations, so there are occasions where you will need JavaScript libraries.

Dealing with external JavaScript libraries

As mentioned, sometimes you need to use an external library because it provides functionality that is not provided through web standards.

When you do, you need to make sure that you regularly check your site and upgrade to the latest stable release of each of those JavaScript libraries. With each new version of the library you may get new functionality but more important, you get one or more bug fixes.

Conclusion

External JavaScript Libraries can be of great value to quickly bring in functionality to your website, however you need to be aware of the risks of using external software components.

Web standards have evolved over time and some functionality previously provided through external libraries are now available in the web standard and are available cross-browser and cross-platform.

So when you work with external JavaScript, question yourself if you could replace its functionality with standard JavaScript, and if you do need it, make sure to keep your libraries up to date.

Check your website now for compatibility with the Modern Web!
8

Additional resources

For an overview of the 5 things to consider when developing for the modern web, check out our 17-minute video.