What Is Vanilla JavaScript?

When it comes to learning a new programming language, JavaScript is one of those languages programmers highly recommend. However, it can become overwhelming to learn JavaScript whenever there are different terms for JavaScript and different frameworks. However, some people suggest learning Vanilla JavaScript, so hopefully this read will help you understand this term.

What is Vanilla JavaScript? Vanilla JavaScript is JavaScript. In other words, Vanilla JavaScript is another way to say Plain JavaScript or simply JavaScript. This means there are no libraries, no frameworks, nothing else besides the programming language.

It is interesting and ironic to see how many JavaScript developers don’t know what Vanilla JavaScript is. I can relate to this, especially when I started programming for a living. I sometimes used plain JavaScript for some projects, and sometimes I used jQuery. I had heard about ReactJS, VueJS, AngularJS, which are all JavaScript, but I had never heard of “Vanilla JavaScript”.

However, it wasn’t until after about 2 years of professional experience that my boss asked me to develop a solution using “Vanilla JavaScript” which caught me off guard. I was hesitant because I didn’t know what he meant by that as I had never heard the “Vanilla JS” framework. Funny enough, I’ve been using Vanilla JavaScript ever since I started programming.

If you have ever felt dumb because of not knowing about this term, don’t worry. The IT industry oftentimes has different terminologies that are not self-explanatory, which, instead of giving more clarity, it encourages confusion and hard to understand the IT lingo.

Why Do They Call It “Vanilla” Javascript?

Before the development of JavaScript frameworks such as ReactJS and AngularJS, developers often used external JavaScript libraries such as jQuery. For those who don’t know, jQuery is a library developed with the purpose of simplifying the use of JavaScript built with the purpose of “writing less, and doing more”.

The increased usage of external libraries would often lead to developers’ confusion with regards to what pieces of code were purely written in JavaScript and what pieces of code used a JavaScript third-party library. In fact, I was one of those developers who would constantly use jQuery up to the point that I thought I was good at JavaScript, but in reality, I was becoming a master in jQuery.

There was a point that jQuery was becoming the library of choice by the industry that many people didn’t know how to implement plain JavaScript solutions. This became a point of frustration by many developers who were looking to find solutions that didn’t involve the need of including a heavy library, even as lightweight as jQuery.

Therefore, the term “Vanilla JavaScript” gained popularity to establish a clear distinction between using regular JavaScript and JavaScript with external libraries.

Should I Learn Vanilla JavaScript Or A JavaScript Framework First?

This is a debatable question as nowadays, frameworks are used in real work situations over Vanilla JavaScript. The reason is that a framework is designed to solve common problems developers face at the moment of working on projects, hence creating a platform using established patterns and standards to not only allow faster development but also increase the complexity of projects.

Regardless of that, my answer to whether you should learn Vanilla JavaScript or a JavaScript Framework First is to learn Vanilla JavaScript first, even if frameworks are more often used for developing several projects. Frameworks are built on top of JavaScript. Therefore, you should understand the fundamentals of how the programming language works instead. In the end, frameworks come and go, sometimes they are widely used, sometimes they aren’t, sometimes they change or sometimes they become obsolete, but the programming language doesn’t change.

Learning regular JavaScript is more valuable than learning a framework, especially if you are planning to use the language in the long run. However, sometimes plain JavaScript can be useful in any situation. For example, you will come across scenarios where you are using a framework and you are facing unexpected errors that nobody else has come across or even solved before. This is where you have to do further research of bugs of the framework which are written in Vanilla JavaScript. Since you have invested time in learning the fundamentals, you won’t struggle as much as other developers to find the root cause of the problem, better yet the solution.

Another benefit of learning Vanilla JavaScript first is that it will allow you to grasp the concepts of libraries and frameworks quickly and understand the reasons why a framework is built, or why different frameworks accomplish a similar outcome but are written in different ways.

Last but not least, frameworks are shortcuts, and a shortcut is not always the right solution to a problem. Here is where a clear understanding of the fundamentals of a programming language could save a developer hours or even days worth of work and frustration.

What is Vanilla JS?

Have you ever stumbled across this Vanilla JS framework? You might find yourself confused whenever you visit their website and scroll all the way down to click on Vanilla JS documentation or Vanilla JS plugins links.

“Vanilla JS” links located at the bottom of their website.

Did you click on any of the links? it probably took you to the JavaScript documentation or showed you a list of JavaScript frameworks and libraries that can be used with the programming language.

“Vanilla JS” is the result of a comical explanation for developers that projects don’t necessarily require any third-party library or framework, as well as a reminder that the usage plain JavaScript is the ultimate way to make projects reach their highest performance as there’s no bulky external party “making” things easier to develop.

Conclusion

The programming industry is full of terms that often times don’t represent their true meaning. Vanilla JavaScript is another one of those confusing terms which describe plain or regular JavaScript, allowing to set a clear distinction between using the programming language without the usage of libraries and frameworks. It is ok to not know this if you are new to programming, as even experienced developers are not familiar with all the terms in the industry.