Why you should build apps with Vanilla JS and how to do it?

In this article we will be answering to two questions.

1. Why to learn Vanilla JavaScript and why to build applications with it?
2. How to do it?

Why Vanilla JavaScript

I want to start by saying that Vanilla JavaScript is a joke among web devs and it means pure JavaScript code.

Vanilla JS

In a world full of JavaScript frameworks, we are to busy to choose the right one and we lose sight of the fact that Vanilla JS is the best framework and the most suitable for any kind of aplications you are building.

Let’s see why it is so by talking about the following things:

1. Performance

In terms of performance you can’t compare Vanilla JavaScript with nothing else. Take a look at this picture from the official site where JS is compared with other frameworks and libraries.

This image speaks for itself.

2. Anything you do with a framework you can do it with Vanilla JS

Your browser doesn’t speak Angular, or React or any other framework. It speaks only HTML, CSS and JavaScript. So anything you write in a framework it will be transpose in something that browser understand and that’s pure JavaScript.

So any magic you do with Angular will be transformed anyway in JavaScript, but this process cost a lot in terms of performance for the browser.

So why not doing it yourself?

Let’s say you like the two-way data binding from Angular. After all this was one of the main selling points of AngularJS. Here is just a simple two way data binding system that I made in under 15 minutes and with less than 40 lines of code.

Or let’s say that you love how easy is to create UI elements with React. Here is some of the React’s magic which I’ve created in 15 lines of code.

So these frameworks or libraries are not rocket science. Of course they are much more complex than 15 or 40 lines of code and maybe much better built than my copies, but I want to point out that behind these frameworks / libraries is still JavaScript.

4. Code maintainability

Lastly, let’s talk about code maintainability. These frameworks are largely used because of ease of software development with them and because the code is very well structured and can be very easy modified. That’s true.

But you can structure your code in a way that can be very easily managed.

For me, the best option is Module Pattern + Webpack.

The module pattern is easy to use and creates encapsulation of our code.

So basically all the functionalities of your apps are separated in modules.

Each module with its own purpose.

If you want to read more about these pattern then take a look at this blog post

JavaScript Module Pattern

webpack

Webpack is an open-source JavaScript module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

This design pattern + webpack makes so easy to write and develop complex applications with Vanilla JavaScript and easy to manage.

How to do it?

So we saw the benefits of Vanilla JS, what now?

Now is time to learn and improve our skills with this powerful language. My advice to you is to think at an application, any application you want and try to create it for yourself using only Vanilla JS and nothing else.

I’ve created a course special for these. A course in which we build a Weather Application with pure JS using the module pattern. The course has thousands of students from over 150 countries and most of the time 5-star reviews.

I attached a link to the course with a 90% discount.

JavaScript Weather Application | Udemy

Course promo video