Vue.js vs Vanilla.js

Vue.js vs Vanilla.js – what are the differences?

If you just had started working with JavaScript, you might be overwhelmed with the number of the existing JavaScript frameworks. It might be a headache to understand what the different frameworks are for. And that’s true not only about the frameworks that are created as a solution for different tasks. Let’s take Angular, React, Vue – all of them are in the same field. They are all similar, yet all different. I know it can be confusing for a newbie to understand the difference between them. And don’t get me started bragging about frameworks that have its own frameworks (I am looking at you Nuxt.js). Anyway, back to the topic. The purpose of this article is to clear the things out about what’s the difference between the Vue.js and Vanilla JavaScript. The obvious question – is the Vanilla a framework? Or maybe it is a language? Let’s compare – Vue.js vs Vanilla.js.

You might already have heard the term Vanilla js. The name is probably known to you if you are sticking with Js for some time. If you are a beginner you probably spent some time watching JavaScript tutorials, where the term Vanilla was used sometimes. For a newbie, it might be a headache to navigate between different terms and technologies. And the Vanilla obviously sounds like another framework. Before diving into the sea of JavaScript-based technologies, its crucial to understand the basics – language that “javascripters” talk. Let’s see what’s the difference between the Vue.js and Vanilla JavaScript. Ladies and gentlemen fight of the day – Vue.js vs Vanilla.js.

Vue.js vs plain JavaScript. What’s the difference?

I know that I might disappoint you, and I don’t want to ruin the party, but we need to straighten up the terms. You might already know that Vue.js is a JavaScript framework. You can use it for building single page applications, static pages, you might do a lot of the things with it, whatever you think off. Vue.js provides you a tooling, structure, and many handy features. Combining Vue with other libraries or packages gives you a lot of functionality out of the box.

However, if we are talking about Vanilla.js, it is just a plain, library or framework free JavaScript. You heard it, the difference between the Vue.js vs Vanilla js is that Vanilla is just a simple, plain JavaScript code, without any additional libraries.

Everything Vue provides – app structure, router, virtual DOM, needs to be developed in Vanilla. Well obviously, because there is nothing, you have to build everything on your own (or take some ideas of code from StackOverflow 😊).

So, once again, difference between Vue and Vanilla:

  • Vue.js is a JavaScript framework
  • Vanilla.js is a term how plain JavaScript code is referred.

Why plain JavaScript is called Vanilla?

The story of how the term “Vanilla.Js” (or just a Vanilla) was born, is not that unexpected. I started my article by talking that there are so many JavaScript frameworks. Nowadays there is a framework here and there, new frameworks are being developed, the number of them is growing steadily. Some of them are not worth your time, while others are true effort savers.

Vanilla js was created as a joke because of the many existing JavaScript frameworks. 

It started from this website that was created in 2012: Even though on the website it is written that it‘s a framework, that is actually not a framework, but just a JavaScript boilerplate. Documentation of the given framework points to the JavaScript documentation 😊. So the website sits there as a joke. Since the term was created, it quickly became popular among developers, and the term is still used today.

There is no difference between Vanilla JavaScript and plain JavaScript. It is just the same.

Why does it called Vanilla and not something different, like Daisy?

Vanilla in the slang means unexciting and boring. So the idea of Vanilla JS is that it is just a pure JS without any fancy features.  However, the term „Vanilla“ itself was not born this way, author of the mentioned website, Eric Wastl said that he only popularized it and the vanilla was used before he created the website. In all contexts (well maybe unless when talking about the flower vanilla), the term was used to refer to something that is untouched, original, unmodified.

The story how term Vanilla.js was born

When using the Vanilla js instead of the Vue js makes sense?

The biggest advantage of the frameworks is that it saves time. Time is the most valuable resource in most of the projects. Every client wants to have the result as fast as possible, no one wants you to spend your time tweaking little details instead of creating business value. Vue.js saves a lot of time because of being progressive at its nature (it means that you don’t need to rewrite the structure every time you want to add new functionality) and the features such as virtual DOM, directives, templates, components, etc., also saves you some time.

The main resource being time, it is smart to use what is already developed. So one of the bigger rules you should follow during your road of software development is this: reuse everything that is possible, and any time it is possible.

If you don’t need to develop something custom, don’t do it. Use something that is created proven and created by the developers that probably has more years of experience than you.

Answering to the question, when you have a situation where there are two options – Vue.js vs Vanilla.js, you should choose Vue.js where it is possible and Vanilla when the performance is important. Although you should know what you are doing and should be confident that you will achieve higher performance with plain JavaScript. Else, you just might spend your time over engineering and end with a solution that is the same as, or even worse than what a framework provides.

Using plain JavaScript over Vue makes sense in case:

  • You want to achieve higher performance.
  • The experience you have with JavaScript will let you achieve higher performance for your application
  • You are working on your hobby project and find it more interesting to work when using plain JavaScript.

However, want it or not, you will face that using a Vanilla.js vs Vue.js, will cost you more time. The framework provides a lot out of the box, you will not want to re-engineer some of the things. Some of the biggest advantages of Vue is tooling, structure, and performance. Technically, these are the advantages not only of a Vue but of every frontend framework. Imagine reinventing the wheel again and again. And if you are not the best engineer in the world, you might invent the wheel that is not that good. Of course, the example of a wheel is just an analogy. There are many more complex tasks or features you want to implement, and you just can’t be the expert in every aspect. That’s why libraries or packages are used.

Advantages of using Vue.js instead of Vanilla JavaScript

Tooling: there are many handy tools that can be used with Vue: Vue CLI, Vue-router, Vuex, Bit for Vue, Vue.js devtools, and many more. While they are not necessary, it saves you a lot of time. Developing a tool each time you need some kind of a speed boost when developing, is just not worth it.

Structure: it might be easy for you to understand the structure you made from scratch. However, when another person comes working with the code you made, it might be a headache for him to understand the code. The headache grows exponentially with the complexity of an application. A common structure, that comes with a framework, helps to work few developers collaboratively on the same project. Probably the main thing that has to be considered before making a decision do not use a framework when developing a business application, is if other developers will be working with this. If so, then you should choose a framework.

Performance: this one greatly varies on the behalf of developer skills. If you have only a basic knowledge of JavaScript, you might dig a deep hole for yourself while trying to improve the performance. People who are contributing to the development of a framework, are highly skilled and they know what they were doing while designing the framework. Before jumping into the conclusions regardless of the performance, make sure you fully understand how the framework works.

And one extra feature – security. Myself being a security freak, I believe that security must be the number one priority when making an architectural design of your app. Imagine making your own cryptography methods from scratch (which is not advisable and is a big security concern). So there are algorithms that were made by the professionals, are reliable, and community proved.  A lot of security issues are taken care of by the Vue, for example, HTML content is being escaped, that saves application from script injection. Whenever new security flaw arrises, Vue developers are taking care that it will be fixed as soon as possible.

Should I learn Vanilla or Vue.js first?

There is no correct answer to this question. While you shouldn’t be a master of a JavaScript, jumping into Vue with zero knowledge is also dumb. I believe you should know some JavaScript before learning a framework.

Don’t forget that Vue.js is built in JavaScript, so there are no cases wherein the situation of Vue.js vs Vanilla JavaScript, Vue could be superior. Without a doubt, a deep knowledge of JavaScript is a big advantage. It helps to understand better how the Vue.js works, and what in the particular case, would the outcome of using Vanilla instead of Vue.js would be. In some cases using Vanilla makes sense (if you are experienced enough). No one says that the framework is perfect, with the pace industry is growing, no framework can be perfect and satisfy every need of the development of the business applications.

However, I understand your desire to start building things from day one. Vue helps you to create anything faster than it might take with plain JS. That’s completely normal to want things to happen faster, especially if you have a burning desire to build something. The learning curve is steeper with the plain JavaScript, but in the long-term, you will still have to learn it, if you are willing to become the master.

I am confident that the creator of a framework Evan You, and the people who are contributing to it, are highly skilled. They know how to simplify complex things, however, abstraction comes at its cost.  Sooner or later you will fall into the situation when things don’t work as it should work. What you will be doing next? It depends on the project you are working on – is it a personal side project, or a project of your client, you will either, throw away the function you were working on, or you start digging into the JavaScript code. Knowing JavaScript might save you from flipping a table and putting away your side project for a while in the first case, and it would save you (and your client) tons of time in the second case.

My advice is this: learn at least some JavaScript before stepping into Vue.js. You should have at least some background in the JavaScript as the Vue is built with Vanilla. However, use Vue where it is possible. It helps you to achieve the needed outcome faster.

Leave a Comment