# What Is Vanilla JavaScript — and Why It Still Wins

# What Is Vanilla JavaScript — and Why It Still Wins

Vanilla JavaScript is just JavaScript. No frameworks, no libraries, no build tools, no transpilers. You write code using the language itself — the DOM API, Fetch, ES Modules, Web Workers — without React, Vue, Angular, or jQuery sitting in between.

The term started as a joke. Someone even made a fake website ([vanilla-js.com](http://vanilla-js.com)) presenting "Vanilla JS" as a framework, complete with download buttons and benchmarks. The punchline: you already have it. Every browser ships with it.

But behind the joke, there's a serious engineering philosophy — one that the industry is slowly rediscovering.

## The Framework Dependency Problem

The JavaScript ecosystem has a dependency addiction. The average React project pulls in 200+ packages before a single line of business logic is written. Each package is a trust decision, a maintenance burden, and a potential attack surface.

This isn't theoretical:

- **left-pad (2016):** One developer unpublished an 11-line package and broke thousands of builds worldwide.
- **colors.js (2022):** The maintainer deliberately sabotaged his own package, affecting millions of downloads.
- **event-stream (2018):** A malicious actor gained commit access and injected cryptocurrency-stealing code.

Every `npm install` is a bet. Vanilla JS has zero dependencies, zero supply chain risk, and zero `node_modules`.

## Why Vanilla JS Produces Better Engineers

### You Learn the Platform, Not the Abstraction

Most developers today learn React before they learn JavaScript. They know `useState` but not `addEventListener`. They know JSX but not `document.createElement`. They know `useEffect` but not `MutationObserver`.

This creates a generation of developers who can assemble components but can't debug them. When the abstraction leaks — and it always does — they're lost.

```js
// Direct DOM manipulation — no virtual DOM, no reconciliation
const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.appendChild(item);
```

This isn't "old-fashioned." This is the API that every framework calls internally. Understanding it makes you better at using frameworks too.

### You Ship Less Code

A typical React + bundler setup produces 150-300KB of JavaScript before your application logic. For a to-do list. For a landing page. For a form.

Vanilla JS ships exactly what you write. Nothing more.

```js
// HTTP request — no Axios, no dependencies, no polyfills
const response = await fetch('https://api.example.com/data');
const data = await response.json();
```

In an era where [Core Web Vitals](https://web.dev/vitals/) directly affect search rankings, every kilobyte matters. Google penalizes slow sites. Vanilla JS is fast by default.

### You Own Your Architecture

Frameworks impose opinions: component trees, unidirectional data flow, virtual DOM diffing, hydration cycles. These are solutions to specific problems — but they become constraints when your problem is different.

Vanilla JS imposes nothing. You choose the patterns that fit your domain.

```js
// Custom animation — using the browser's native API
const el = document.getElementById('box');
let pos = 0;

function frame() {
  if (pos >= 350) return;
  pos++;
  el.style.transform = `translateX(${pos}px)`;
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
```

No animation library. No CSS-in-JS. Just the platform doing what it was designed to do.

## The Web Platform Is More Powerful Than You Think

Modern browsers ship with APIs that eliminate the need for most utility libraries:

| What you need | Library you don't need | Native API |
|---|---|---|
| HTTP requests | Axios | `fetch()` |
| State observation | MobX, Redux | `Proxy`, `EventTarget` |
| DOM observation | jQuery | `MutationObserver` |
| Lazy loading | lazysizes | `IntersectionObserver` |
| Local storage | localForage | `IndexedDB`, `OPFS` |
| Parallel processing | — | `Web Workers` |
| Real-time communication | Socket.io | `WebRTC`, `WebSocket` |
| Biometric auth | — | `WebAuthn` |

Most of these APIs didn't exist five years ago. The platform caught up. The ecosystem hasn't noticed yet.

## When Frameworks Make Sense

Vanilla JS isn't always the answer. There are legitimate cases for frameworks:

- **Large teams** that need enforced conventions and shared patterns.
- **Complex SPAs** with deep state trees and many interdependent views.
- **Server-side rendering** where frameworks provide optimized hydration.
- **Rapid prototyping** where speed-to-market outweighs long-term architecture.

The point isn't "never use frameworks." The point is: **understand what you're abstracting away**. If you can build it without the framework, you'll know exactly when you need one — and when you don't.

## Real-World Vanilla JS at Scale

This philosophy scales beyond toy projects. [GenosDB](https://genosdb.com), a distributed peer-to-peer graph database, is built entirely in Vanilla JavaScript — no frameworks, no transpilers, no build step. It runs in the browser and in Node.js with the same codebase, using only native APIs:

- **OPFS** for persistent storage via Web Workers
- **WebRTC** for peer-to-peer data channels
- **WebAuthn** for biometric authentication
- **ES Modules** for zero-config imports

A complete database engine — storage, networking, encryption, access control — in pure JavaScript. No bundler required. Import it with one line:

```js
import { gdb } from "https://cdn.jsdelivr.net/npm/genosdb@latest/dist/index.min.js";
```

That's what happens when you master the platform instead of depending on abstractions.

## How to Strengthen Your Vanilla JS Skills

1. **Build one project without npm.** A to-do list, a chat widget, a drawing tool. One HTML file. No build step.
2. **Read the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript).** Not tutorials — the actual documentation. It's the best JavaScript reference ever written.
3. **Explore the Web APIs.** `IntersectionObserver`, `Web Workers`, `OPFS`, `Streams API`. These are more powerful than most developers realize.
4. **Read framework source code.** Seeing how React implements reconciliation or how Vue implements reactivity teaches you what the platform can do — and what the framework is doing on your behalf.
5. **Question every dependency.** Before adding a package, ask: can I write this in 20 lines of Vanilla JS? Often, the answer is yes.

## The Bottom Line

The best JavaScript developers aren't the ones who know the most frameworks. They're the ones who understand the language underneath.

Frameworks come and go. jQuery dominated, then Angular, then React. Something will replace React too. But `document.querySelector` will still work. `fetch` will still work. `addEventListener` will still work.

**The platform is the only framework that never gets deprecated.**

---

*By [estebanrfp](https://estebanrfp.com) — Full Stack Developer, dWEB R&D*