JQuery vs… Everyone Else

I do some web development on the side (maybe more than just “on the side” soon), and lately I’ve been thinking more about best practices and methodology. My past efforts have involved a philosophy of “do whatever works, as fast as possible.” JQuery works, and it works fast. But it doesn’t encourage careful consideration of code structure and layout, resulting in what I call “spaghetti code.” Now, as a dog, I’m as fond of spaghetti as anyone else, but this might be a problem in the long run.

Let’s say you have a button that you need to display some sort of text when clicked. There are all kinds of ways to accomplish this relatively simple feat. Without using any JavaScript helper libraries, you might set it up like this:

<!DOCTYPE html>
<html>
  <body>
    <p>Click this button to initiate self-destruct!</p>
    <button id="bomb">Boom</button>
    <p id="explosion"></p>
    <script>
      function kablooie() {
        document.getElementById("explosion").innerHTML = "Oh the humanity!";
      }
      document.getElementById("bomb").onclick=function() {kablooie()};
    </script>
  </body>
</html>

The “function kablooie()” part creates a function – that is, a bit of code that can be called upon from elsewhere to execute. The next line adds the words “Oh the humanity!” to the paragraph with the “explosion” ID. It searches the Document Object Model (or DOM, that’s the “document” bit) for the “explosion” ID (that’s the “getElementById” bit), and appends text to it (that’s the “innerHTML” bit).

The next line uses “document” and “getElementById” again, but this time the ID is “bomb” and it assigns the function “kablooie()” to an event handler for clicks (that’s the “onclick” bit).

Now here’s how you could accomplish the same thing with JQuery:

<!DOCTYPE html>
<html>
  <body>
    <p>Click this button to initiate self-destruct!</p>
    <button id="bomb">Boom</button>
    <p id="explosion"></p>
    <script>
      $("#bomb").click(function(){
        $("#explosion").append("Oh the humanity!");
      });
    </script>
  </body>
</html>

Looks shorter, more concise, and frankly, it’s easier to read and understand what it’s doing. It’s actually doing exactly the same things as the previous example, but it is a lot easier to write.

And that could be a problem for anyone who wants to become a very talented developer. It’s easy to do very lazy JQuery code that works “well enough,” but becomes a mess to maintain. No structure is imposed. Need a button to do X? Just add another $(“#buttonID”) declaration! Where should you add it? Oh, you know, at the bottom of your 10,000 line JavaScript file, after all the other individual declarations!

Even a dog wouldn’t like that particular spaghetti.

So what are the alternatives? After all, raw JavaScript is pretty feature-poor, and if you force yourself to use it, you run the risk of reinventing the wheel dozens of times over, when there are libraries out there that have what you need already. So unless you’re a purist, you’ll probably want to program against one of the many JavaScript frameworks out there.

The way I see it, there are two approaches here:

  • Maintain self-discipline from the inside
    You like JQuery? Great. Keep using it. But strictly organize your code manually as if you’re using a very opinionated development library.
  • Impose self-discipline from the outside
    JQuery is bad and you should feel bad! Use a library that forces you to conform to a development model that will keep your code organized.

I used to be in the former camp, but I’ve been forced to conclude I’m not good at self-discipline. I’m a dog, after all. So I’ve been slowly extricating myself from JQuery’s loving arms. I’m sorry, it’s not you, it’s me. I’m just not strong enough to be with you.

Right now, I’m most fond of AngularJS, Google’s somewhat opinionated JavaScript library. It allows you to treat HTML as templates, and forces you to intelligently organize your JavaScript, but at the same time, it’s flexible and even plays well with JQuery. There are others, like Ember, that are more opinionated, if you need a harsh taskmaster. Regardless, if you’ve been using JQuery as a crutch to avoid learning how to actually program, and you’d like to move past it, there are lots of options out there.