Let’s Talk About Vanilla JavaScript

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

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

You: gif of man sweating

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 JavaScript 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 JavaScript, and why should I spend any time on it?

“Vanilla JavaScript” is a casual nickname 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, they are imperative! However, most veteran programmers would recommend that beginning programmers not start with such tools, as they can sometimes impair the underlying conceptual understanding of web development. Starting with the no-frills version of JavaScript will lead to 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 JavaScript into a sleek new framework. Developers love shiny new frameworks, and truthfully if vanilla JavaScript was sentient and had any interest in “rebranding itself” this would be an excellent strategy.

Sometimes the term vanilla JavaScript 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 JavaScript file. So, rather than using vanilla JavaScript 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 JavaScript. Try a couple of these toy problems or this quiz; 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 JavaScript (obviously), so we will be doing all of our coding in a SINGLE JavaScript 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 JavaScript, 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 JavaScript tutorial begins!


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

Load Comments?