The Best Kept Secret in Web Dev

So… This might be a hot take, but I believe jQuery is the single most important piece of JavaScript software we got in the past 20 years. Let me explain.

jQuery has a proven track record, it is fast, small and battle tested. It enjoys some impressive usage stats, and it has one of the longest histories on the web. On top of that it is backed and constantly improved by a dedicated team of developers. So, despite not being in the spotlight for the past decade, jQuery was always relevant. This is true now more than ever since we are reimagining the web all over again.

Here are 3 reasons to consider jQuery for your next project, especially if you are looking for a quick and easy solution to sprinkle in interactivity on your website.

Quick disclaimer though… If you are looking for a comfy front-end job, Angular and React are still the safest bet. Corporations are more than happy to spend big bucks on building bloated SPAs that take somewhere between 5 seconds and a timeout to load something meaningful on your screen.

However, if you are working in a lean, efficiency focused team, using jQuery might be a better option, despite the fact that this is a 20 year old library.

Remove Bloat

First of all, we are entering an era where we can finally get rid of overengineered architectures and complicated libraries. Rendering is moving back to the server, abstractions are being removed, and there is an overall shift towards simplicity.

I always quote Douglas Crockford, one of the big names in the JavaScript space, who is acknowledging that our frameworks have grown into bloated platforms and is now advising us to use the DOM and plain old JavaScript instead.

This might be a bit too optimistic if you are looking for fast results and a nice dev experience. jQuery is the next best thing in such cases since it removes the complexity of a UI framework, and allows you to interact with the DOM directly.

Of course, some will argue that the declarative approach enforced by the modern frameworks is better than the imperative nature of jQuery.

// SolidJS
function Counter() {
  const [count, setCount] = createSignal(0);

  function increment() {
    setCount(count() + 1);
  }

  return (
    <div>
      <button onClick={increment}>{count}</button>
    </div>
  );
}

// jQuery
const $btn = $(".counter");

let count = 0;

$btn.on("click", function () {
  count += 1;
  $btn.html(count);
});

While this is more of a preference, let’s give them this small win. However, we can easily make jQuery declarative and reactive by simply adopting a basic signals model in our code. [Are You Not Entertained?]

const $btn = $(".counter");
const count = signal(0);

effect(() => {
  $btn.html(count.val());
});

$btn.on("click", () => count.set((it) => it + 1));

Simple & Powerful

Next, using jQuery is simple yet powerful. Modern web development relies on build tools, transpilers, dependency managers and a bunch of other libraries I’m becoming too old to keep track of. JavaScript fatigue is a real condition, and you should talk to your doctor if you are experiencing any of the associated symptoms. This is why I’m ecstatic whenever I can drop in a script in the document header and start coding right away.

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

With jQuery you can do anything and everything ranging from animations to event handling and data management.

$(".drop").animate(
  {
    opacity: 1,
    top: "+=50",
  },
  1000,
  () => {
    // complete.
  },
);

$(document).on("keyup", "#search", function () {
  fetch("/search?key=${$(this).val()}");
});

$(".user").data({
  config: { isAdmin: true },
  ids: [1, 2, 3],
});

Of course, when you are working with the DOM directly, you’ll gain more control but there are more opportunities to mess up.

This is why devs need to have a good understanding of the fundamentals, and best practices like batching reads and writes to minimize reflows and repaints are a must.

At the end of the day this flexibility is a big advantage. However, since jQuery is not opinionated and does not enforce any development patterns, you’ll have to suffer the consequences of your coding decisions and mistakes. [I don’t have a headache, I’m just preparing]

Still Relevant

On a more serious note, jQuery is actually really relevant in this day and age. Looking at the concepts currently enforced in modern web development, you’ll find a lot of similarities with the practices we employed back in the 2010s. Rendering is done on the backend, apps are HTML first, we strive for zero JavaScript by default, and performance is always a must.

Using jQuery checks all these boxes, and more. So what’s this big secret in the web dev space? Well.. in quite a lot of projects jQuery is going to be good enough. There is no need to overcomplicate things. Just keep it simple, remove the clutter and focus on your actual product.

Until next time, thank you for reading!