Learn Vanilla JS

Vanilla JS is a term for coding with native JavaScript methods and browser APIs instead of frameworks and libraries.

(No, it’s not another framework.)

Why should you learn vanilla JS?

There are so many powerful libraries and frameworks available. Why bother learning vanilla JS?

Three reasons:

It’s better for web performance.
It provides a simpler developer experience.
If you do want to still use frameworks, it makes working with them easier.

Let’s unpack each of these a bit.

1. It’s better for web performance

JavaScript is the most expensive and fragile part of the front end stack.

Unlike HTML or CSS, which can run as soon as they’re downloaded, JavaScript needs to be compiled and parsed. A 100kb JS file has a bigger performance impact than 100kb of HTML or CSS, or a similarly sized JPG.

That 30kb of React or Vue doesn’t seem like much, especially in age of high-speed internet. But not everyone has 5G LTE, wired broadband, or the latest devices.

Zach Leatherman ran a test to find out just how bad React is for performance:

Which has a better First Meaningful Paint time?

a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets

a client rendered React site with exactly one tweet on it

(Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms)

The 8.5mb HTML version is a 141 times larger than the React version. But because JavaScript is so bad for performance, it still loads perceivably faster.

That’s bonkers!

2. It provides a simpler developer experience.

The modern developer experience sucks.

Imagine if you could just open up a text editor and a browser and start coding. No terminal window. No npm install. No build and compile steps. No webpack.

Just you and the code.

You can add more tooling to vanilla JS if you want. Sometimes it’s helpful, particularly on larger projects or when working with teams. But the baseline, the barrier to entry, is so much lower.

A text editor and a browser. That’s it.

3. If you do want to still use frameworks, it makes working with them easier.

Getting started with frameworks is hard. There’s a lot of assumed knowledge in the documentation.

Understanding how these tools work under-the-hood makes them easier to learn. Understanding what the browser can do for you natively helps you write better code with framework.

A lot of people try to learn a framework, get stuck, and quit to focus on fundamental vanilla JS.

Once they feel comfortable, they go back to the frameworks, and find them a lot easier to learn.

How to learn vanilla JS

Let’s make 2021 the year that you master JavaScript! You can do this. I can help.

Daily Developer Tips. I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web.
Guides & Courses. Short, focused ebooks and video courses made for beginners. Start building real JavaScript projects in under an hour.
Vanilla JS Academy. A project-based online JavaScript training program for beginners.

Want more? I also maintain the Vanilla JS Toolkit and host the Vanilla JS Podcast. You can watch me code vanilla JS projects live at Vanilla JS Prep School.

Hi, I'm Chris Ferdinandi. 👋

I believe there’s a simpler, more resilient way to make things for the web.

I create vanilla JS pocket guides and video courses, run a project-based training program, and host the vanilla JS podcast. My developer tips newsletter is read by over 10,600 developers each weekday.

If you have a question about something or need JavaScript help, get in touch.

I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web. Join 10,600+ daily subscribers.