Building Performant Websites Without Frameworks

Introduction

In an era where React, Vue, Angular, and Next.js dominate the web development landscape, it's easy to forget that the web itself is built on three simple technologies: HTML, CSS, and JavaScript. These are the building blocks that every framework ultimately compiles down to.

But here's a provocative question: do you actually need a framework for your next project? For many use cases — portfolios, landing pages, blogs, small business sites, documentation — the answer is a resounding no.

"The best framework is the one you don't need." — Some wise developer, probably

Why Go Vanilla?

There are compelling reasons to skip the framework entirely:

• Performance — Zero framework overhead means faster page loads. No 50-100KB of JavaScript just to render a heading.
• Simplicity — No build step, no node_modules folder with 500MB of dependencies, no webpack configuration.
• Longevity — HTML, CSS, and JS never break. A site built in 2015 with vanilla technologies still works perfectly today.
• Learning — Understanding the fundamentals makes you better at every framework.

When Vanilla Makes Sense

Vanilla web development is ideal when your project doesn't require complex state management, real-time data synchronization, or deeply nested component hierarchies. Here are perfect use cases:

1. Personal portfolios and resume sites
2. Landing pages and marketing sites
3. Documentation sites
4. Blogs (especially with static site generators)
5. Small business websites
6. Email templates

Modern CSS Is Incredibly Powerful

CSS has evolved dramatically. With features like CSS Grid, Flexbox, CSS Custom Properties, :has(), container queries, and @layer, you can build complex, responsive layouts without any CSS-in-JS library.

/* Dark/light mode with just CSS variables */
:root {
  --bg: #0a192f;
  --text: #ccd6f6;
}

[data-theme="light"] {
  --bg: #ffffff;
  --text: #334155;
}

body {
  background: var(--bg);
  color: var(--text);
}

Vanilla JavaScript Is More Capable Than Ever

Modern JavaScript (ES6+) gives you everything you need. The Intersection Observer API handles scroll animations. The Fetch API handles HTTP requests. Template literals handle dynamic HTML. And the DOM API is fast enough for virtually any use case that isn't a real-time collaborative editor.

Intersection Observer Example

Here's how we handle scroll animations without any library:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animated');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('[data-animation]')
  .forEach(el => observer.observe(el));

Conclusion

Frameworks are tools, not requirements. For many projects, vanilla HTML, CSS, and JavaScript provide better performance, simpler maintenance, and a more enjoyable development experience. The site you're reading right now was built entirely without frameworks — and it's fast, accessible, and beautiful.

Next time you start a project, ask yourself: "Do I really need a framework for this?" You might be surprised by the answer.