Why Use a Framework Instead of Vanilla JS?

📢 Disclaimer

This article was written by me and polished using AI for clarity and flow. The ideas and structure are fully mine. 😊

---

Why not just use plain JavaScript?

It’s a fair question — especially if you’re just starting out or have been working on small projects. But as your application (and team) grows, the need for structure, consistency, and performance optimization becomes critical. In this article, we’ll break down some core reasons why frameworks like React, Vue, or Svelte exist — and why we force ourselves to learn and use them instead of using Vanilla Javascript in the first place?!

---

1. Discipline: Scaling Beyond Solo Projects

When you're coding alone, you can afford to "just make it work." But software development in a team setting is a different world. Here's why:

• Consistency is key: Without a shared set of conventions, every developer will approach problems differently — which leads to fragmented, inconsistent codebases.
• Maintenance becomes a nightmare: Imagine onboarding a new teammate to a codebase where each feature is built using its own unique logic. Good luck debugging or refactoring.
• Frameworks enforce structure: React (for instance) pushes you to think in components, manage state predictably, and follow patterns like unidirectional data flow.

Think of it like this: frameworks don’t just help you build faster — they help you build together.

---

2. DOM Manipulation is Slow

Directly manipulating the DOM with vanilla JavaScript can work fine… until it doesn’t!! The browser needs to do a lot of behind-the-scenes work every time you touch the DOM:

🧩 Recalculation (Recomputing Styles)

Changing a class or inline style? The browser might need to recalculate styles for many elements.

element.style.color = 'red';

📐 Reflow (Layout Calculation)

Insert or remove an element? Change its dimensions? That might require recalculating layout for a whole section of the page.

🎨 Repaint (Visual Redraw)

After layout, the browser repaints the screen — an expensive operation for complex UIs.

⛓️ Unbatched Updates

Doing 10 DOM changes in vanilla JS? You're likely triggering 10 layout + repaint cycles unless you manually batch those changes.

Frameworks like React handle these for you. They use techniques like virtual DOM diffing and batching to minimize costly operations.

---

3. Component Reusability: Build Once, Use Everywhere

One of the most powerful features of frameworks like React is the ability to write reusable UI components. These are self-contained, customizable blocks of logic and markup — think of them like Lego bricks. You build a button once, and use it in 5 places. Change it in one place — it updates everywhere.

Let’s look at a simple example of a reusable “Card” component:

✅ React Version (Component-Based)

// Card.jsx
export default function Card({ title, description }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

// App.jsx
import Card from './Card';

function App() {
  return (
    <>
      <Card title="First Post" description="Hello world" />
      <Card title="Second Post" description="React is awesome!" />
    </>
  );
}

🚫 Vanilla JS Version (Without Components)

<div class="card">
  <h2>First Post</h2>
  <p>Hello world</p>
</div>

<div class="card">
  <h2>Second Post</h2>
  <p>React is awesome!</p>
</div>

Want to change the layout or style? You’ll need to manually update every instance — or write your own templating logic with document.createElement, innerHTML, etc. Even then, it becomes messy fast.

Bottom line: Frameworks help you stop thinking in pages and start thinking in building blocks.

---

💬 There’s More, But…

There are of course many other good reasons to use a framework:

• State management
• Routing and navigation
• Testing support

..and so on.

But I chose the three above — discipline, performance, and reusability — because I believe they’re the most important to understand first.

What do you think?
Do you think there are more important reasons that should have mentioned before these 3 or no we can run a production ready project using pure Javascript?

Let me know in the comments! 👇