February 4, 2014

Do you really need jQuery?

According to a new site making the rounds (and a repo that’s currently trending!), no, you might not need jQuery. More on that shortly.

At NodeBB, we have afairly divergent team when it comes to our tech stack. Sure, we all use Node.js and Redis, but those were decisions that we agreed upon after a bit of wrangling:

  • Do we use MySQL (MariaDB), MongoDB, or Redis? (We decided on Redis)
  • Should we use so many new technologies all at once? (We decided: Yes)
  • Should we completely open-source the NodeBB code? (We decided: Yes)

The usage of jQuery was another decision that we had to make. To be clear, none of us were particularly new to client-side programming. We all had various degrees of experience working with javascript, but by no stretch were we new.

  • Andrew had been working with Javascript for years at this point
  • Baris was comparatively newer to Javascript, but had been programming much longer than Andrew or I, and had been working with ActionScript3 for the past two years, and thus had directly transferrable much knowledge.
  • I had been building full javascript web applications for the past two years, with various other forays into Javascript development.

So I can say with much vitriol that we were not "jQuery developers", but "Javascript developers".

To be clear, NodeBB now uses a moderate amount of jQuery.

When we started NodeBB, I was not a fan of javascript libraries. I had very much bought into the train of thought that vanilla was the way of the future. Why not? All of the reasons to use vanilla were there:

  • Modern browsers handled it superbly (we were building a forum software for modern browsers, so even moreso)
  • I felt like a l33t hacker (and a bit hipstery) when I used addEventListener('click') instead of .click() or .on('click')
  • I felt secure knowing that I wasn’t forcing an entire javascript library down peoples’ throats.

But ultimately, we decided against a vanilla-only approach. We definitely gave it a shot, though! In certain places in the codebase, pure vanilla javascript is used (e.g. the notifications front-end). To be clear, NodeBB now uses a moderate amount of jQuery.

I think I was definitely the last holdout (I joke that Baris’ first commit was probably git commit -am "adding jQuery", but I digress…), and I ended up switching to jQuery in my day-to-day because:

  • The library was already there, since Bootstrap required it
  • We sometimes (albeit rarely) ended up running into obscure browser incompatibilities.
  • The state of jQuery plugins is miles ahead of any other library, which is a testament to how much easier jQuery made javascript development*
  • Ironically, we kept finding bugs in places where we mixed jQuery and vanilla**!

The other main reason was that we weren’t building a small focused tool (think script-injection snippets, like Google Analytics, or "Tweet this" buttons)***. Those small libraries/tools must be lean, if only so you don’t have the unfortunate distinction of being that guy who loaded a 9000 line Javascript framework in order to parse 100 lines of code.

Ironically, we kept finding bugs in places where we mixed jQuery and vanilla!

Aside: Don’t you hate articles where random quotes (like the one right above this paragraph) are interjected in the middle of an article and have barely anything to do with what the current paragraph is talking about?

Anyways — we were building an entire web app, and in that scenario, I now think it’s perfectly fine to use a library, if only to abstract away a couple little processes that could be replaced with a single line.****

We may go back to using vanilla in places where speed is of absolute paramount importance.

In conclusion: My love affair with vanillaJS isn’t over yet…

Also hilarious: VanillaJS Framework


Core Maintainer, NodeBB

* We use .textcomplete() for username mentions. We also use $.draggable, and some other jQueryUI components

** For example, an existing event listener (addEventListener(notifEl)) would break after someone had upgraded notifEl from notifEl = document.getElementById('#notifications'); to $('#notifications');. This is more an example of sloppy coding, but it still shows that seemingly innocuous changes can still produce side-effects.

*** A developer I know once built a script injection style library that loaded an entire framework in order to parse < 200 lines of code. This snippet was supposed to be used on other peoples’ websites!

**** Can I use .classList yet?

© 2014 – 2023 NodeBB, Inc. — Made in Canada.