Should I still use jQuery?

Ok, first a bit of history about my background (if you've not read my about page) - I've been developing websites for the last 22 years, and looking back to when I used to have to design an entire website using just HTML <table>'s and vanilla JS was the norm. To find a script, there was no stack overflow, just something like http://dynamicdrive.com/ - check it out, it's still there and looks like it's not been touched since 2001! And the vanilla JS you had to write was always so long and complex.

Anyhow, in Jan 2006, jQuery came along, created by John Resig, I remember first using it and I fell in love with how much quicker it meant I was able to write my JavaScript code. No longer did I need to write big complex vanilla JS code (and quite frankly, very ugly and not robust at all!) and instead was able to write much neater smaller code that was way more robust and had almost "set it and forget it" browser support.

Around 2010 we saw the first iteration of Angular, and then a year later in 2011 the team at Facebook started creating their own internal framework they could use within their own Ads and newsfeed, this was the birth of React.

Fast forward to 2016

Around 2016 React started to become mainstream, although it had been around since 2011, and initially released to the public in 2013 it was only around 2015-2016 where it started to really gain a big community and the start of richer features. Today in 2022 it's even more feature rich, and one of the most popular developer frameworks around. Along with Angular and Vue developing websites using a front end framework is now the norm.

As you can see it's only just starting to decline in it's usage after a very long time! Image Source: https://trends.builtwith.com/javascript/jQuery

So what's the answer about jQuery then? Should I still use it?

Well to quote Arnie in his most recent terminator film "Old but not obsolete" - wether you like it or hate it, jQuery is still used in a ton of websites around the globe. In my opinion it's also awesome for prototyping single page apps (and I mean actual single page apps) that are like literally on one single index.html page. Not a bunch of files in a repo that require all sorts of NPM modules to be run.

Let me show you an example:

If you have heard of jQuery then you've probably also heard of Bootstrap - it too has been around for over a decade, and if you combine the 2 into a single basic HTML file like this and source them via a CDN and write all your code in this one file, you have something like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Super Basic jQuery Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
<style>
.card{padding:10px;}
</style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-body">
            <div class="row"></div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
    [...Array(50).keys()].forEach( val => {
        $('.row').append(`<div class="item col-md-1 col-2 alert alert-primary text-center">${val+1}</div>`)
    })
    $('.row').on('click','.item',function(){
        $(this).fadeOut(300,function(){
            $(this).remove();
        })
    }) 
});
</script>
</body>
</html>

This is a super basic example that simply outputs 50 boxes into the page, and you'll notice it's only 5 lines of JavaScript or jQuery code. Click here to open this directly using this link

The big benefit of working with these files like this is for quick and easy prototyping, you can easily run this code by saving it to a basic.html file and simply opening it in your browser - Or like I prefer to do is use the Visual Studio Live Server plugin to run it from VS code and see live updates.

Could I simply not just write the above in Vanilla JS?

Well yes you could, but the point of this was to show you a super basic demonstration example, when it comes to prototyping stuff quickly having something like jQuery and Bootstrap really helps you to knock something up extremely quickly compared to writing longer vanilla JS. JavaScript has made huge improvements in the last 20 years and is arguably much better to write in vanilla than it used to be, but I still believe there is a place for jQuery.

What about using it in my main sites then?

So if I think it's great for prototyping, what about in my main production websites? Well I do personally believe that jQuery has probably now had it's day for production websites, especially so when working with bigger teams. It does also suffer from big performance issues and it can be a nightmare to contain and keep a clean codebase in larger projects! So no my advice is try to avoid it in any of your larger projects, but and this is a big but, as you can see from my prototyping demonstration it still has it's uses to help you as a developer with smaller tasks.

Finally - the internet is still rife with jQuery in so many big sites, learning how to use it can help you to identify issues quicker and make you a better developer!

Can you show me any more cool one pagers?

If you want to take a look at some cool 1 page index.html Bootstrap/jQuery sites then take a look at what the guys over at https://bootstrapmade.com/ have to offer! I find these are super useful templates for helping knock up a great looking prototype in no time!