Let's Talk About Vanilla JavaScript: What Is Vanilla JS, and Why Should I Spend Any Time On It?

You: “May I use a framework such as React or Vue for this prompt?”

Interviewer: “No, please complete the prompt in vanilla JavaScript.”

You:

Ahh, vanilla JavaScript… it makes even seasoned web developers break out into a cold sweat. But, with a little practice in the fundamentals, you might learn that vanilla JavaScript (JS) can be your friend! :)

This article serves as an introduction to a multi-part tutorial on vanilla JavaScript. The tutorial begins in the next article.

What is vanilla JS, and why should I spend any time on it?

“Vanilla JS” is a casual nickname for the programming language JavaScript in its pure form, without the benefit of any added frameworks or libraries (such as React or Vue, as mentioned above). Such frameworks and libraries are not only helpful in a professional setting, but they are also imperative! However, most veteran programmers would recommend that beginner programmers not start with such tools, as they can sometimes impair your underlying conceptual understanding of web development. Starting with the no-frills version of JS will lead to a more concrete understanding of how the code interacts with the browser, which is a core component of web development.

This tongue-in-cheek website is a humorous repackaging of vanilla JS into a sleek new framework. Developers love shiny new frameworks, and truthfully if vanilla JS was sentient and had any interest in "rebranding itself" this would be an excellent strategy.

Sometimes the term vanilla JS implies that some of the HTML and CSS coding for a project that might otherwise occur in separate HTML/CSS files will be handled in the JS file. So, rather than using vanilla JS only for the JavaScript portion of your project, you might do some of the styling or DOM manipulation in the .js file as well.

Some Disclaimers

If you have coding experience, especially web development experience, odds are the following tutorial will be way too slow for you. No quick tricks here; this is more of a methodical walkthrough for absolute beginners to DOM manipulation trying to learn basics.

Now, the tutorial that follows this article does presuppose a basic knowledge of HTML and JS. Try a couple of these toy problems; if they seem easy or at least doable, you should be good to go. If they seemed a little (or a lot) beyond you, I recommend spending some time here completing some of the Basic Javascript section. Then, head back here when you feel ready.

You also need to have a code editor installed or some sort of development environment that you have some competence with; my weapon of choice is VSC (Visual Studio Code), but any code editor will do the trick.

What should I expect from one of your tutorials?

The focus in this tutorial will be JS (obviously), so we will be doing all of our coding in a SINGLE JS file; no HTML or CSS at all!*

*…Except for a boilerplate HTML with a script tag linking to our JS file.

I know, I lied, but this HTML file is really only to make the browser happy. Browsers like HTML code, and even though we humans are reading this article to learn to make HTML with JS, web browsers don’t have the same willingness to learn as you do. So, kudos to you for being a better student than your browser!

There will be opportunities throughout the tutorial for you to code along. You really should do this; have a file open in your text editor of choice and code along. It will help reinforce the knowledge, trust me (or don’t trust me and code along anyway).

Thanks for bearing with me through the [admittedly somewhat boring] details and background. It is important to make sure you are at the right starting point so you will understand the content. Not understanding this stuff now will lead to you having a bad time when things get more complex (and they will DEFINITELY get more complex).

In the following article, our vanilla JS tutorial begins!

Attributions: Panic reaction (sweating) GIF by Billy Budgen, linked from giphy.com

Previously published at https://shinetechnicallywrites.netlify.app/posts/lets-talk-about-vanilla-js/