Hello, in this post I just want to very briefly talk about what I view Vanilla JS to mean. I was told by some pretty respectable engineers that the meaning of Vanilla JS was writing JavaScript without a framework. This means writing an index.js, main.js, app.js or whatever .js file you want without the use of something like React, Angular, Vue, etc. I believe this to be the correct definition of the term. Most times when you think of vanilla flavored items you think, ‘Oh that’s the plain flavor", or “that is boring.” Well I feel this about JavaScript. Not that the language is boring but Vanilla JS should be using just JavaScript.

Nowadays when you do a search for open positions on any career site you can’t help but see at least three different frameworks being asked for. The three main ones:

  • React
  • Vue
  • Angular

I am not saying there is anything wrong with using a framework. Quite the contrary. I love using frameworks. They do indeed speed up development. But if you are struggling to understand why a certain concept doesn’t work in XYZ framework then you should strip away what you are trying to write in that framework. Break the problem down and write it out using just plain ole JavaScript. From time to time I struggle with why something works with React or why something doesn’t work for that matter. When I remove React from the equation and try to solve it using JavaScript I see where I was going wrong. Now of course you can write JavaScript in most frameworks as a matter of fact you kind of have to. Its the other content that gets in the way and is causing you to trip up. Nothing wrong with that. It happens. But if you find yourself lost. Take the piece of code you are trying to write whether it’s a button or a full on login page. Write that page with HTML, CSS and JavaScript. Put your code in it’s own files:

  • index.html
  • main.js
  • style.css and see if you can solve it that way. Once you have it created you should be able to take the underlying code with the HTML elements and plop it into say React with JSX, take the JavaScript code to add the logic then style it with the CSS and you should be good to go. If for some reason you see that you are still not able to get what you need up and running then I would take a guess that it’s not the framework but your code that might be the problem. Again nothing wrong with that. It’s a good way to learn however. I work on my own JavaScript projects that strictly use JavaScript. No framework. I am even working on a TypeScript version of them.

ES6: Is this Vanilla JavaScript?

Now there are some people out there that will tell you that Vanilla JavaScript is actually the JavaScript from before ES6 which came out I believe around 2015. So basically JavaScript conventions used from 2014 and back is what is considered Vanilla JS. That is incorrect. ES6 JavaSxript can still be written without the use of a framework. ES6 JavaScript still works in a browser just like Reacct or Angular. Yes it needs to be transpiled to ES5 in order for some browsers to render it however it is still writing plain JavaScript. Vanilla JavaScript is just that. JavaScript. No franework. It’s basically taking an ice cream sundae, removing all the toppings like nuts, cherries, etc. any syrups like chocolate, caramel, peanut butter, and being left with only Vanilla ice cream in the cup.