The Problem: Over-Engineering the Simple Web App
In early 2026, a small SaaS team decided to build a lightweight dashboard for tracking personal carbon footprints. The product needed to be fast, maintainable, and deployable within two weeks. The initial instinct was to reach for the familiar: React with Next.js, a state management library, and a CSS framework. However, after measuring the bundle size — 1.2 MB for a single-page app that displayed three charts and a form — the team realised they were paying a heavy tax in complexity and load time. The question became: why not just use vanilla JavaScript?
The Solution: Vanilla JS with Modern Browser APIs
The team rewrote the entire frontend using plain JavaScript (ES2025) and native browser APIs. They used the Canvas API for charting (replacing D3.js, which added 250 KB), the Web Components standard for reusable UI elements (replacing React components), and the Cache API for offline support (instead of a service worker library). The result was a 98 KB bundle (gzipped) — a 92% reduction from the original React build. The application’s Time to Interactive (TTI) dropped from 4.2 seconds to 0.8 seconds on a mid-range mobile device (Moto G84, Chrome 120).
According to the HTTP Archive (January 2026), the median JavaScript bundle for a React-based site is 432 KB, while vanilla JS sites average 67 KB. This is not just about file size — it’s about cognitive load. A 2025 study by the Web Almanac found that vanilla JS projects have 60% fewer dependencies (mean of 3 vs. 12 for React projects) and 40% fewer LOC (lines of code) for the same feature set.
Why Vanilla JavaScript Fits the ‘Vibe Coding’ Paradigm
‘Vibe coding’ — a term popularised by Andrej Karpathy in 2025 — describes a development style where the programmer focuses on high-level intent, letting AI assistants (like GitHub Copilot or Claude Code) handle boilerplate and syntax. In this paradigm, vanilla JavaScript becomes a superpower because:
-
No framework lock-in. The AI can generate code that directly targets DOM APIs without needing to know React hooks, Vue directives, or Angular decorators. This reduces hallucinations — a 2026 benchmark by Stanford’s AI lab showed that LLMs produce 30% fewer errors when generating vanilla JS compared to framework-specific code.
-
Immediate debuggability. A vanilla JS codebase can be opened in any browser DevTools and inspected without source maps. The team reported a 50% reduction in debugging time.
-
Zero build step. The team used ES modules directly in the browser (import maps) and served the app from a simple Node.js HTTP server. No Webpack, Vite, or Parcel needed. Deployment was a simple
scpto a DigitalOcean droplet.
Real-World Data: Performance Benchmarks
The team ran Lighthouse on both versions under identical conditions (3G throttling, Chrome 131):
| Metric | React Version | Vanilla JS Version | Improvement |
|---|---|---|---|
| First Contentful Paint | 2.1 s | 0.9 s | 57% faster |
| Largest Contentful Paint | 3.8 s | 1.2 s | 68% faster |
| Total Blocking Time | 420 ms | 45 ms | 89% better |
| Lighthouse Performance Score | 62 | 98 | +36 points |
These gains are consistent with findings from the 2026 State of JS survey (42,000 respondents), where 78% of vanilla JS users reported ‘excellent’ performance on mobile, compared to 45% of React users.
Case Study: From React to Vanilla — The Migration
The migration took 11 days. The team used Web Components to encapsulate the chart, the form, and the data table. Each component was a custom element with a Shadow DOM, ensuring style isolation without CSS-in-JS. The state was managed with a simple publish-subscribe pattern (35 lines of code). The data layer used the Fetch API with AbortController for request cancellation.
The final app had zero runtime errors after the first week of production use. The team noted that the code was easier to review because there was no ‘magic’ — every function call was explicit.
When Vanilla JS Is NOT the Right Choice
This is not a universal recommendation. For large-scale applications with complex state (e.g., a collaborative editor like Google Docs), a framework with a virtual DOM and diffing is still beneficial. However, for the vast majority of web apps — dashboards, landing pages, e-commerce product pages, blogs — vanilla JavaScript with modern browser APIs is not only sufficient but superior.
A 2026 analysis by Smashing Magazine showed that 63% of web projects have fewer than 5 interactive views. For these, frameworks add cost without proportional benefit. The marginal productivity gain from a framework (estimated at 15% faster initial development) is outweighed by the 200% increase in maintenance overhead over a 12-month period (source: 2025 Web Dev Survey by Stack Overflow).
Conclusion: Embrace the Vanilla Mindset
The carbon footprint dashboard is now live, serving 12,000 monthly active users with 99.9% uptime on a $10/month VPS. The team spends 2 hours per week on maintenance — down from 8 hours with the React version. They have no plans to add a framework.
Vanilla JavaScript is not a regression; it’s a liberation. In the era of vibe coding, where AI handles the syntax, the developer’s job is to choose the simplest, most universal platform. The browser’s native API surface is richer than ever — with Popover API, View Transitions API, and CSS Container Queries — and it’s all available without a single npm install.
If you are building a new web app in 2026, ask yourself: do you really need a framework? Or do you just need to vibe with the DOM?
ASI Biont supports connecting to modern web APIs and native browser features — learn more about building lightweight, framework-free applications at asibiont.com/courses.
Comments