Authored by Primate

A rather awesome, informative
and witty blog about all things web

Burying jQuery (alive)

Earlier news of YUI’s departure came unexpectedly at the end of holiday season this year. Whilst one part of me blissfully hummed ‘Another One Bites The Dust’, another part mourned in desolation, making me realise the lapse of time.

I never was a big fan of YUI – the chosen conventions, the bloat, and that awful feeling of effort required to write even the simplest code. I appreciate the architecture and engineering of this framework and I admit that it became digestible at version 3, but I never had that same feeling of dismay when I came across jQuery for the first time.

Affaire de coeur

jQuery was fantastic when it debuted. It allowed people to express themselves in an exact, necessary way. Humanly readable chaining of behaviour, simple ajax calls, cross browser compatible animations, and a CSS compatible selector engine. At the time, and still, jQuery is my framework of choice.

I tried many of them in the past: MooTools, Prototype with Scriptaculous, dojoYUI and others, but only jQuery seemed feasible.

This unconditional affair lasted nearly 7 years. First it was underpinned by its rapidly growing popularity. Then, by its adoption by giants (Yes, this was the time when Nokia was actually a mobile market giant). And finally it just naturally became a standard for easy cross browser compatible javascript. Hundreds of ’10 best image gallery plugins’ blog articles helped establish the ecosystem, and, after a couple of years, people simply embraced it.

What’s my problem then?

I have two big issues and one revelation related to jQuery.

My first big problem with jQuery is what @l4mbert, one of my colleagues, called the pacifier effect. I became so complacent that currently I find it really difficult to write anything in Javascript that doesn’t include at least a tiny bit of jQuery. I will use it for targeting DOM elements, trigger events on document.ready, bind events etc. I always use jQuery to do these things, because it is easy and because that’s how I’ve done it for years.

The second issue is related to jQuery’s size. With the growth of mobile web and never-ending bandwidth problems, we force people to download extra bytes and then process it, always. What do we gain from this?

This is a question I started asking myself quite a lot recently. And it lead me to a revelation.

The reason I mentioned YUI at the beginning of this article is, in my opinion, very important. The end of YUI’s development date is a symbolic mark of the change of the cycle in front-end technologies. Soon we’ll see another event marking the end of that cycle: the day when jQuery announces end of its development.

All of the javascript frameworks I mentioned before are products of the same time – the renaissance of javascript. All of them together, but jQuery the most, let everyone use the power of javascript almost effortlessly. It made ajax a whizz, flash obsolete, cross browser javascript simple. It spawned a new breed of developers and permanently changed the web.

It’s obvious that right now we are in a transitional period to a completely new web reality, and these old frameworks just ‘ain’t gonna cut it’. The problems these frameworks were created to solve, won’t exist soon. Flash is dead, browsers’ vendors are working towards greater compatibility within web standards, we’ve all grown up to accept progressive enhancement as definitive practice. Radically new challenges are ahead of us and completely new tools start to emerge and gain in popularity. Web landscape around us changes irreversibly and it can only mean that the days of these old tools are numbered.

Burying jQuery alive

What’s our take on all of these issues at Primate? We recently discussed this topic and the general consensus is that we will keep using jQuery for a while. Our strategy is as follows:

  1. To get better at cutting the mustard and convincing our clients this is the right approach.
  2. Re-writing some of our internal tools and jQuery widgets to free ourselves from it as much as possible.
  3. Wait until the remaining problem posed by browsers die naturally.

We’re aware that the end of jQuery’s era is ahead, if not already in motion, and we need to start thinking about changing a few things in our process. I feel that we’re slowly acknowledging the fact that it has to happen soon, but we don’t want to make this radical step yet.

Verdict

For the time being we’ll keep using jQuery for 80% of our work as it seems to be fair to our clients. Were using a tried and tested library which we know and feel comfortable with. We leverage the enormous ecosystem of jQuery plugins, as well as our own tools, techniques and widgets. For the remaining 20% of work (including some internal projects) we’ll try to stop using jQuery.

I looked at my own process recently and realised that not only do I use jQuery for just a handful of things, some of them even cause the end user experience to be poorer than it would be without jQuery.

With that in mind, here is my 5 step path to get free from jQuery:

1. document.ready()

This is a great way of kicking in the scripts when the DOM is fully loaded. The downside of it is, however, that we restrict all page interactivity until everything is ready. For quick loading brochure sites this my not be a big deal, but the complexity of javascript code can significantly increase the initial wait time. Switching to modern native implementation…

document.addEventListener("DOMContentLoaded", function(event) {
  //do the monkey
}

…or just moving all the scripts to before the `</body>` tag look like reasonable quick alternative. True power, however, is in the combination of these, along with some form of AMD or CommonJS practices.

2. DOM  node selectors

Probably the easiest one to tackle with the native querySelector. I think not using it in conjunction with some of the underscore or one of the alternatives is just a symptom of laziness.

3. Ajax

A more difficult problem if you need to support older IEs, but XMLHttpRequest is perfect replacement for modern browsers and there are some workarounds to make it work in old ones too.

4. Event binding

Similar to previous point. There are perfectly viable solution at reach with addEventListener and corresponding IE attachEvent version.

5. Ecosystem of existing tools

This one is probably the most difficult problem to overcome, but we’ve actually rarely used an off-the-shelf jQuery plugin in our work. We quite extensively use interface elements like colour pickers or calendars, but we can patiently wait for full native support for them. We can also switch gears and jump into what is currently, in my opinion, a far more attractive ecosystem of React components.

Letting it go

I feel a little bit guilty about it, but I have a desire to bury jQuery.. alive. Although I fully appreciate its importance in web history, I think its time is coming to an end. It’s not only bloated, but most of the exciting things we were able to do with it are either obsolete or diluted through modern browser native support.

At Primate we all prefer to use CSS animations over jQuery when possible (almost always). We’re slowly switching to the native querySelector (which is difficult because of the pacifier effect). We only offer full support to modern browsers, and gracefully degrade behaviour for older ones (we just need to get better at it).

Believe me or not, but I remember when supporting IE5 was a serious consideration, so I’m almost certain that it’s just matter of time and we’ll be saying our final goodbyes to jQuery too.

With every project we make tiny steps away from jQuery. Soon we will stop for a moment in our journey for a better web, realise that we load this chunky library for absolutely no reason, and that the time as come to let it rest in peace.

 

If you liked this article then why not subscribe to our RSS feed.

Author: Bart Oleszczyk

Bart is a man of few words and occasional long blog posts.

Comments

Showing 2 Comments

Leave a comment
  1. Petr Chutny February 13, 2015 at 10:23 pm

    This is really interesting view on current state of the ubiquity of jquery. Thanks for the article, I will most likely get back to it a lot of times in the future!

  2. Wilhelmina March 1, 2017 at 3:15 am

    I told my grmhdaotner how you helped. She said, “bake them a cake!”

Leave a Reply to Wilhelmina