Vue.js is easier to learn than jQuery

jQuery is commonly suggested as a good starting point for beginner web developers. Many learn jQuery even before they’ve begun to learn vanilla Javascript.

Why? It’s partly because of jQuery’s popularity, but mostly because of a misguided belief that more experienced developers have: since jQuery is simple for them, that it’s also simple for beginners.

Note: this article was originally posted here on the Vue.js Developers blog on 2016/10/31

jQuery offers brevity, not simplification

jQuery definitely takes away a lot of grief with older browser issues. But otherwise, it doesn’t do that much to encapsulate the complexity of the DOM API or Javascript.

Oh, I know it’s much briefer to type $(‘#id’).click(function(event) {..}); than to do it with vanilla JS. But you still need to understand the same stuff to write that code: DOM node selection, event handling, callbacks and so on.

jQuery is simpler to write if you already understand the DOM API and Javascript well, but it’s not any easier for beginners.

Vue.js

Vue.js is the new kid in Javascript town. Of it’s many strengths, I’d say simplicity of learning is probably number one. Simplicity is built into its design.

I assert that a beginner could build a trivial web app with Vue and understand much more of how their code works than they would building the same thing with jQuery.

So, let’s implement a really simple app with both jQuery and Vue.js and see what that brings to light. This app will count the number of times a button is clicked, and display that number on screen.

Implementing with jQuery

Here’s a typical implementation with jQuery:

<div id="output"></div>
<button id="increment">Increment</button>
<script>
  var counter = 0;
  $(document).ready(function() {
    var $output = $('#output');  
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });
</script>

It looks simple, but consider that’s only because you’re viewing it with your experienced developer eyes. Understanding what that code is doing is actually pretty tricky. Consider:

1. The first thing you will usually type in a jQuery script is $(document).ready(function() { .. });. In those 30-something characters you‘re assaulted by these four tough concepts: DOM node selection, event handling, the loading process of a document and callbacks. If you don’t get all those things, then you don’t understand the code you just wrote.
2. Getting to the business of selecting a DOM element to work with, you’ll need the jQuery constructor $(‘…’). Unfortunately you can’t specify exactly what nodes you’ll get, instead you need to create an appropriate filter using a CSS3-like selector and what you actually get will be determined when it runs. To do this well, you’ll to need to create a mental copy of your DOM and simulate what would happen when you run your filter against it. And as every method you write updates the DOM, you have to similarly update your mental DOM and consider if your filters are still going to work as intended.
3. For some positive news, there’s only really one pattern in jQuery: select something, then do stuff to that selection with a method from the API. The problem with this pattern is that we now have a flat, one-dimensional API with well over 100 methods that do everything from AJAX to array iteration. It’s impossible to make that many method names descriptive enough to distinguish both what they do and what they return. Good luck to a beginner comprehending what chained methods are really doing.

Implementing with Vue.js

Here’s a typical implementation with Vue.js:

<div id="app">
  <div>{{ counter }}</div>
  <button v-on:click="increment">Increment</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() { 
        this.counter++;
      }
    }
  });
</script>

Vue has taken care of many of the pain points about jQuery raised above:

1. No need to worry about DOM ready callback hijinks, that complexity has been encapsulated. Vue’s lifecycle hooks will allow more refined control if and when it’s needed.
2. An obvious link is made between the data property counter and the DOM node where it’s rendering. No mental DOM required, you can see it on the page and have assurance that updating the counter is not going to mess with your DOM in unexpected ways due to wonky node selection.
3. We don’t have ambiguous API methods to look up or remember. Different functionality is nicely organised and stratified in the Vue constructor object or is applied directly to DOM nodes in the template via directives giving them more context to be understood by.

Wrap up, TL;DR

jQuery is only easier if you already understand Javascript and the DOM API. That’s not the case for beginners. jQuery is not simpler, just abbreviated.

Vue, on the other hand, has simplicity built into its design. Many difficult parts of the DOM API have been well encapsulated. Beginners will be able to write code that they actually understand, and when they need to do more complex stuff, it’ll be available to them.

So next time someone asks you what they should learn as a beginner web developer, maybe jQuery is not the thing.