Do we still need jQuery or should we stick to the script?
When jQuery emerged in 2006 it was one of only a few frameworks that enabled developers to write Javascript faster using shorthand for functions and enabling daisychaining to reduce repetition.
I had used scriptaculous (built on Prototype) on web projects previously and had attended conferences including @media Ajax 2007 where I encountered people like Brendan Eich who had created EcmaScript / Javascript at Netscape and John Resig who had created jQuery in 2006, a rival to Thomas Fuchs' script.aculo.us that “... provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly”. Web 2.0 was born around this time and simple Ajax functionality was one of its key components, which jQuery and Prototype enabled.
At its peak, jQuery was used on 80% of the top 1 million websites (https://en.wikipedia.org/wiki/JQuery#cite_note-:1-19) and came bundled in with common CMS’s, including Joomla (after it moved away from MooTools in version 4)
Until recently, jQuery had been the ubiquitous component in many projects but I began to encounter younger developers who would be shouting about Angular.js or Vue or React, whichever seemed to be the buzzy hyped framework that week. Don’t get me wrong, I understand how these frameworks / libraries can benefit projects as I spend spare hours noodling away at React Native as a means of creating mobile apps.
It was only just this week that I had to rebuild a website that had found its way onto the Wayback Machine without a backup. Putting on my reverse-engineer’s hat I quickly got down to the task of working out how the original developer had gone about certain tasks. I tutted a little at the CSS and cursed the archive for not letting me get into every bit of script used to make the frontend work.
And I opted to use jQuery to quickly get the site working, with its animated menus and Burns effect image fades. I did it because to me I was getting into the head of the developer who'd started the project. But in the back of my mind I was feeling a little guilty for lazily leaping in and using a library of code that, regardless of whether I use one function, or 3 dozen, I have to load all of the core library.
Only for that project jQuery comes preloaded, so why the guilty feeling? Well, if I use raw Javascript it’s already in the browser, like HTML, and I’m just telling the browser how to work with my website. So why do I need to load jQuery to do the task for me, potentially bloating my site (even by a small bit) and affecting the all important pagespeed score? Some of the reason is its legacy. Many plugins and extensions will use not only jQuery but Bootstrap as the foundation for layouts and styling.
What do we use JavaScript for?
- Ajax: calling data into a page without having to reload it
- Interactions: manipulating the DOM for showing / hiding elements
- Animations
Performance is one of the keys
Is that why developers are moving away from jQuery? Pagespeed / Performance?
I started out thinking this was an easily answered question about how libraries and frameworks should be replaced with pure JavaScript. On the one hand libraries help to simplify the process of development and want to make sure of cross browser / platform compatibility.
But JavaScript has matured over time and one of the reasons for using jQuery was the non-standard way some web browsers behaved. Do you remember having to make extra checks or exceptions for Internet Explorer?
Do we replace jQuery in our projects?
Before jumping in and removing jQuery across the board, think about what it does for you.
An important factor could be what the project is.
Then consider how much extra work it would create to code what you need in Javascript. This last question interests me most as having used React Native for some time I’ve learnt that the way I was writing Javascript was a little antiquated. Take a look at how You Might Not Need JQuery lists out functionality and compares using jQuery to without. In some cases using the ES6 version is shorter and quicker than jQuery.
Interesting also that in some cases jQuery doesn't even feature in a list of current frameworks.
Conclusion, for now
In the broad scheme of things, if a library is available to use then why not make use of it? In Joomla, jQuery is available but not loaded by default. So you would need to call it in your module, template, etc using:
HTMLHelper::_('jquery.framework');
It also depends on what your project is intended for. We should all be mindful of speed, especially for e-commerce site, and bigger issues such as how much energy is required to make our website work. Greener options might look at the performance of the website to reduce its carbon footprint, for example.
Technology changes over time, so it’s a good idea to keep up with what’s going on in the scripting world, as the commands you always use may still work, but there may be better options out there.
Some articles published on the Joomla Community Magazine represent the personal opinion or experience of the Author on the specific topic and might not be aligned to the official position of the Joomla Project
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comments