Dev.to

Every developers first friend: Vanilla JS

Introduction I still remember the first time I wrote a line of JavaScript that actually worked. It was a simple snippet that made a button change color when clicked, but I felt like I had unlocked some kind of digital sorcery. That moment sparked my journey into web development, and while I've worked with countless frameworks since then, I keep coming back to the raw power of vanilla JavaScript. In today's landscape of shiny frameworks and libraries, it's easy to skip straight to React, Vue, or the latest JavaScript flavor of the month. I've been guilty of this myself! But over years of debugging and building projects, I've realized something crucial: developers who master vanilla JS first simply build better applications, regardless of what framework they eventually adopt. Let's dive into why vanilla JavaScript deserves your attention, how to set up a project from scratch, and some clever tricks that will make you appreciate the elegant simplicity of JavaScript in its purest form. The Underrated Power of Vanilla JavaScript When I mention "vanilla JavaScript," I'm referring to plain JavaScript without any additional libraries or frameworks. Just you and the language that powers over 97% of websites on the internet. Here's why it remains incredibly powerful despite being over 25 years old: 1. Universal Browser Support Every modern browser comes with a JavaScript engine built-in. No installation, no compatibility issues, no dependency nightmares. When you write vanilla JS, you're writing code that works everywhere without additional overhead. 2. Performance Benefits I once inherited a project that loaded jQuery just to toggle a few classes and handle basic DOM manipulation. The entire library (compressed) added ~87KB to the page load, while the equivalent vanilla JS solution was less than 1KB. Frameworks add convenience but often at the cost of performance, and users notice slow websites! 3. Complete Control With vanilla JS, there's no "magic" happening behind the scenes. Every operation is explicitly defined by you, which means you understand exactly what's happening in your code. This control becomes invaluable when debugging complex issues. 4. Future-Proof Skills Frameworks come and go (remember AngularJS?), but core JavaScript concepts remain. The time I invested in understanding JavaScript fundamentals has paid dividends across every framework I've learned since. Why Every Developer Should Learn Vanilla JS First I've mentored several junior developers who jumped straight into React or Angular without learning JavaScript basics. Inevitably, they hit roadblocks that were fundamentally JavaScript problems, not framework problems. Here's why mastering vanilla JS should be your first priority: 1. Frameworks Are Abstractions, Not Replacements React, Angular, Vue—they're all written in JavaScript. When you use a framework without understanding vanilla JS, you're building on a foundation you don't fully understand. I've seen developers struggle for hours with issues that would be obvious with better JS knowledge. 2. Better Debugging Skills When something breaks in a framework (and something always breaks!), debugging often requires peeling back layers of abstraction to find the core issue. With solid vanilla JS knowledge, you can quickly identify whether the problem is in your code, the framework, or elsewhere. 3. Smaller, Faster Applications Not every project needs a heavyweight framework. Some of my most successful projects use minimal or no frameworks at all. Understanding vanilla JS lets you make informed decisions about when to use frameworks and when to go vanilla. 4. Framework Flexibility Once you understand vanilla JS deeply, picking up new frameworks becomes significantly easier. I switched from Angular to React in a week because the fundamental JavaScript concepts remained the same—only the syntax and patterns changed. The Core Logic of JavaScript JavaScript has some unique characteristics that make it both powerful and occasionally frustrating. Understanding these core concepts will help you build a strong mental model: 1. Event-Driven Programming JavaScript on the web is fundamentally event-driven. Instead of executing linearly from top to bottom, much of your code will run in response to events like clicks, form submissions, or data loading. This reactive nature is central to how JavaScript works in browsers. 2. Asynchronous Execution One of the most powerful (and initially confusing) aspects of JavaScript is its asynchronous nature. Functions like setTimeout, Promises, and async/await allow non-blocking code execution. I spent weeks truly understanding this concept, but it transformed how I approach problems. 3. Prototype-Based Inheritance Unlike class-based languages like Java or C#, JavaScript uses prototypal inherit

Mar 9, 2025 - 20:05
 0
Every developers first friend: Vanilla JS

Introduction

I still remember the first time I wrote a line of JavaScript that actually worked. It was a simple snippet that made a button change color when clicked, but I felt like I had unlocked some kind of digital sorcery. That moment sparked my journey into web development, and while I've worked with countless frameworks since then, I keep coming back to the raw power of vanilla JavaScript.

In today's landscape of shiny frameworks and libraries, it's easy to skip straight to React, Vue, or the latest JavaScript flavor of the month. I've been guilty of this myself! But over years of debugging and building projects, I've realized something crucial: developers who master vanilla JS first simply build better applications, regardless of what framework they eventually adopt.

Let's dive into why vanilla JavaScript deserves your attention, how to set up a project from scratch, and some clever tricks that will make you appreciate the elegant simplicity of JavaScript in its purest form.

The Underrated Power of Vanilla JavaScript

When I mention "vanilla JavaScript," I'm referring to plain JavaScript without any additional libraries or frameworks. Just you and the language that powers over 97% of websites on the internet.

Here's why it remains incredibly powerful despite being over 25 years old:

1. Universal Browser Support

Every modern browser comes with a JavaScript engine built-in. No installation, no compatibility issues, no dependency nightmares. When you write vanilla JS, you're writing code that works everywhere without additional overhead.

2. Performance Benefits

I once inherited a project that loaded jQuery just to toggle a few classes and handle basic DOM manipulation. The entire library (compressed) added ~87KB to the page load, while the equivalent vanilla JS solution was less than 1KB. Frameworks add convenience but often at the cost of performance, and users notice slow websites!

3. Complete Control

With vanilla JS, there's no "magic" happening behind the scenes. Every operation is explicitly defined by you, which means you understand exactly what's happening in your code. This control becomes invaluable when debugging complex issues.

4. Future-Proof Skills

Frameworks come and go (remember AngularJS?), but core JavaScript concepts remain. The time I invested in understanding JavaScript fundamentals has paid dividends across every framework I've learned since.

Why Every Developer Should Learn Vanilla JS First

I've mentored several junior developers who jumped straight into React or Angular without learning JavaScript basics. Inevitably, they hit roadblocks that were fundamentally JavaScript problems, not framework problems.

Here's why mastering vanilla JS should be your first priority:

1. Frameworks Are Abstractions, Not Replacements

React, Angular, Vue—they're all written in JavaScript. When you use a framework without understanding vanilla JS, you're building on a foundation you don't fully understand. I've seen developers struggle for hours with issues that would be obvious with better JS knowledge.

2. Better Debugging Skills

When something breaks in a framework (and something always breaks!), debugging often requires peeling back layers of abstraction to find the core issue. With solid vanilla JS knowledge, you can quickly identify whether the problem is in your code, the framework, or elsewhere.

3. Smaller, Faster Applications

Not every project needs a heavyweight framework. Some of my most successful projects use minimal or no frameworks at all. Understanding vanilla JS lets you make informed decisions about when to use frameworks and when to go vanilla.

4. Framework Flexibility

Once you understand vanilla JS deeply, picking up new frameworks becomes significantly easier. I switched from Angular to React in a week because the fundamental JavaScript concepts remained the same—only the syntax and patterns changed.

The Core Logic of JavaScript

JavaScript has some unique characteristics that make it both powerful and occasionally frustrating. Understanding these core concepts will help you build a strong mental model:

1. Event-Driven Programming

JavaScript on the web is fundamentally event-driven. Instead of executing linearly from top to bottom, much of your code will run in response to events like clicks, form submissions, or data loading. This reactive nature is central to how JavaScript works in browsers.

2. Asynchronous Execution

One of the most powerful (and initially confusing) aspects of JavaScript is its asynchronous nature. Functions like setTimeout, Promises, and async/await allow non-blocking code execution. I spent weeks truly understanding this concept, but it transformed how I approach problems.

3. Prototype-Based Inheritance

Unlike class-based languages like Java or C#, JavaScript uses prototypal inheritance. Objects inherit directly from other objects. This approach is more flexible but requires a mental shift if you're coming from other programming paradigms.

4. The DOM API

The Document Object Model (DOM) is the interface between JavaScript and the HTML/CSS that forms your webpage. Understanding how to efficiently select, modify, and create DOM elements is crucial for web development.

Setting Up a Vanilla JS Project: Back to Basics Tutorial

Let's create a simple project using nothing but vanilla JavaScript. I'll walk you through my typical setup process:

Step 1: Create Your Project Structure 

vanilla-js-project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

Step 2: Set Up Your HTML File

Create a basic HTML5 document that loads your JavaScript and CSS:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Vanilla JS Project<span class="nt">
     rel="stylesheet" href="css/style.css">


    

        
My Vanilla JS App

    


    

         class="todo-app">
            
Task List

             id="task-form">
                 type="text" id="task-input" placeholder="Add a new task..." required>
                 type="submit">Add Task
            
             id="task-list">