Top-5 JQuery Alternatives And Why Should You Use Them
As a web developer you probably already familiar with JQuery, the open-souce JavaScript library made for manipulating HTML document object model (DOM), creating animations, and calling Ajax methods.
According to W3Techs JQuery powered over 70% of all the websites online on January 2021.
The JQuery library is very easy to use since one of the building factors has been to made the syntax as clear and easy to understand as possible. The library has been out since 2006 and is the most popular JavaScript library out there today.
During the years JQuery has grown quite much in size. On the other hand modern browsers and basic JavaScript have implemented a lot new features that make using JQuery redundant. These factors have become some of the drawbacks that make you want to consider alternatives when developing websites.
At the moment JQuery library takes 28 kilobytes of storage space even when minimized and compressed. This is about a second of download time on 3G connection. When you want your website to be fast this can be a pain and affect your site’s performance and search engine rankings negatively.
Next let’s see some JQuery alternatives that are freely available and recommended to consider on your next project.
Plain JavaSript
With latest ECMAScript version on JavaScript it is nice to see how much one can achieve by using mere JS and on the other hand how handy it all seems to be. Latest JavaScript blows the dust to the eyes of old utility libraries by introducing new language features, syntactic sugar, and for example wide possibilities for common tasks such as string manipulation.
Currently about all the modern browsers handle JavaScript in the same way, so there is no need for a library to handle the compatibility issues.
Anime.js
Anime.js is a JavaScript animation engine. It’s supposed to be a lightweight library with an simple but effective API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Here is a code example how one would animate CSS class animate-me.
anime({
targets: '.animate-me',
left: '240px',
backgroundColor: '#FFF',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad'
});
Any CSS properties can be animated. In addition you can animate CSS transforms, object properties, DOM attributes, and SVG attributes.
You have the opportunity to control animation direction and looping. Timeline feature lets you synchronise multiple animations together. By default each animation added to the timeline starts after the previous animation ends.
Callback functions can be added for animations. Lastly but not leastly, Anime.js offers you helper functions e.g. for getting and setting values of specific targets, return random numbers, and getting running anime.js instances.
When you need heavy animations in a lightweight library, Anime.js could just be a more suitable option than JQuery.
Alpine.js
Alpine.js borrows its syntax mostly from Vue and “offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.”
What this means is e.g. possibility to create dropdowns, animate element visibility, bind attribute values to results of JavaScript expressions, two-way databinding, bind actions to events such as click, and many ways to manipulate DOM in automatic fashion.
Cash
Cash is designed to be a lightweight replacer of JQuery. Full 100% coverage of JQuery functionality is not its goal but the library covers the most common use cases.
According to its homepage in GitHub “Cash is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM.”
Cash library utilizes modern browser features to keep its codebase minimal. Familiar JQuery methods can be used and chained in a normal fashion. The library takes only 6 kilobytes of space when minified and gzipped. Which is over 70% size reduction compared to JQuery. You can also create a partial build to decrease the file size even more.
The features can be used by familiar $() selector which makes it possible to convert your old JQuery code to Cash quite painlessly.
If you only use the most common features of JQuery and want to decrease the loading time of your site or app, take a deep consideration of using Cash instead.
Umbrella JS
Umbrella JS is a tiny library for manipulating DOM and handling events.
Umbrella selector is u(). You can select DOM elements by a normal CSS selector, passing it a HTML node, an array of nodes, a HTML fragment or string, or another Umbrella instance.
For example if you want to select an element with class click-me and add a click event handler for it you would code:
u('.click-me').on('click', function() {
alert('Click Me element was clicked!');
});
The library offers you a wide range of functions to search (selector, filter, find, each, etc.) and manipulate (classes & attributes, html, before, etc.) DOM nodes, and processing events targeted to them. In addition Umbrella JS gives you helpers such as .scroll() to scroll the view to first matched element, and coverting structured data from DOM to arrays.
Umbrella JS takes only 3 kilobytes of space and it supports IE11+ browsers. When you need mostly to work directly with the HTML structure and elements and handle events, Umbrella JS may be the alternative you’re looking for.
If you still want to use JQuery
In case you don’t want to learn new syntax, just don’t care about the performance hindrance, or really need a lot of functionality from this library, there is some ways to ensure to minimize the disadvantages.
You should load the library from public and fast content delivery network (CDN) source. JQuery offers a CDN service for all the versions of the library. See code.jquery.com for details.
To make your JQuery code run faster you should always you as specific selectors as possible. So instead of $(‘.the-element’) use $(‘p.first .the-element’), etc.
Use CSS classes to define the styles instead of setting the CSS by JQuery. Thirdly you should always take advantage of JQuery chaining feature. For example:
$('div')
.fadeIn()
.find('p.content')
.slideDown()
.end()
.find('p.intro')
.addClass('highlight');
And always use caching when possible. Put your JQuery elements to a variable and use the variable when needed instead of parsing the DOM again and again.
These are just some examples of how to improve JQuery performance. Search the Web for more ideas.
Expand Your Lib Consciousness
So when you are starting your next project consider whether you really want to use the old and familiar JQuery or could you utilize and discover some other more streamlined library or even plain vanilla JavaScript to take care of your needs.
I hope this article broadened your view of JQuery type of JavaScript libraries currently gaining popularity.
To the next time! 💪
