Vanilla JS has been well-defined on Stack Overflow by ThiefMaster:

This is VanillaJS (unmodified):

// VanillaJS v1.0 // Released into the Public Domain // Your code goes here: As you can see, it’s not really a framework or a library. It’s just a running gag for framework-loving bosses or people who think you NEED to use a JS framework. It means you just use whatever your (for you own sake: non-legacy) browser gives you (using Vanilla JS when working with legacy browsers is a bad idea).

The site and the idea behind it make a cute joke, but building a useful application in pure JavaScript is a terrible idea. The thing about building a site from scratch in pure JavaScript is that you eventually either repeat yourself a ton or else you abstract things into a framework. There are several problems with building your own framework as opposed to using a preexisting one.

  1. It’s more time consuming.
  2. It’s never going to have as many contributors as a real framework. That means it’s going to be a badly written framework.1
  3. Since it’s not mainstream it’s going to be hard to get new people on board compared to if you were using a real framework.

Let’s look at VanillaJS’ comparison of making an Ajax query in pure JavaScript as opposed to jQuery.

Here’s the JavaScript.

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

Here’s the jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$.ajax({
  type: 'POST',
  url: "path/to/api",
  data: "banana=yellow",
  success: function (data) {
    alert("Success: " + data);
  },
});
</script>

A quick glance at these blocks of code paired with the vastly superior performance that pure JavaScript sports might make it intuitive to conclude that frameworks are indeed a bad idea. But we need to go deeper.

First, excuse me while I refactor these two blocks of code so we’re comparing apples to apples. It’s irksome how VanillaJS is willing to fudge stuff to get its skewed agenda through.

Here’s the new JavaScript.

<script>
var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) {
      return;
  }
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");
</script>

Here’s the unrevised jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$.ajax({
  type: 'POST',
  url: "path/to/api",
  data: "banana=yellow",
  success: function (data) {
    alert("Success: " + data);
  },
});
</script>

Now that our formatting between the two is consistent, let’s look at their syntax. Which is more clear? Which is more readable and easy to maintain? The jQuery one, to be sure. I’m not a huge proponent of jQuery’s find-something-do-something way of DOM manipulation (change detection and updating would be better left to templating in Angular2 or React) but jQuery’s ajax API is excellently written. It’s one of the best out there.

Is jQuery less efficient than pure JavaScript? Yes. But the faster development cycle, ease of use, and avoidance of technical debt makes the tradeoff a thousand times worth it. Furthermore, as I’ve quoted previously from Geoff Schmidt, “JavaScript has a faster dynamic language runtime than Ruby, Python, and PHP.” We have the world’s best compilers working to make JavaScript incredibly fast. Consequently we don’t usually need “bare metal” code in our apps. It’s an exercise in futility while at the same time it compromises the aforementioned higher priorities.

Of course, there are opponents of progress every step of the way. “Angular JS will fail, if it hasn’t already.”2 “The reality is that most modern JavaScript libraries don’t support progressive enhancement out of the box: AngularJS included.”3 This is madness, all of it. The ideas are from armchair computer scientists who have built small speculative web pages and have never worked on big projects. Google and Facebook use frameworks. We should learn from them. Granted they built their own, but in their cases it actually made sense. We’re all beneficiaries if we’re only willing to swallow our ego.

Long live JavaScript frameworks.