Why Do Front-End Frameworks Exist?

Modern frameworks like React, Vue, and Angular exist because building complex, interactive apps with just plain JavaScript quickly becomes unmanageable.

Let’s look at how web development evolved and why frameworks are the solution.

1️⃣ The Evolution of Web Development

2️⃣ SPAs in a Nutshell

• One HTML page, navigation handled on the client side.

• Data fetched via APIs (JSON).

• UI updates instantly without full reloads.

• State (filters, forms, maps, etc.) lives in JavaScript and must stay in sync with UI.

• Example: Airbnb – apartments list, map, filters, search box all depend on and update each other.

3️⃣ Why Vanilla JS (and jQuery) Break Down for Large Apps

👉 Result: Hard to reason about, bug-prone, not scalable.

💀 Example: jQuery Counter (Problematic)

HTML

<p id="counter">Clicked 0 times</p>
<button id="btn">Increment</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  let count = 0;

  $("#btn").click(function () {
    count++;
    $("#counter").text("Clicked " + count + " times");

    // Now imagine if you had another element
    // also showing count — you must update it manually too.
    // Forgetting one causes the UI to go out of sync!
  });
</script>

👉 With jQuery, every time the state changes, you must manually update every place in the DOM.

As apps grow (like Airbnb’s filters + maps + lists), this quickly becomes fragile and unmanageable.

4️⃣ How Frameworks Solve These Problems

5️⃣ Code Example: Vanilla JS vs React

Vanilla JavaScript (manual DOM updates)

HTML

<p id="counter">Clicked 0 times</p>
<button id="btn">Increment</button>

<script>
  let count = 0;
  const p = document.getElementById("counter");
  const btn = document.getElementById("btn");

  btn.addEventListener("click", () => {
    count++;
    p.textContent = `Clicked ${count} times`;
  });
</script>

React (declarative)

JavaScript

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

➡️ With React, you just declare what the UI should look like given count. React handles the DOM updates.

6️⃣ Side-by-Side Comparison

✅ The Bottom Line

• Without frameworks: managing state + DOM manually (even with jQuery) leads to spaghetti code, bugs, and poor scalability.

• With frameworks: The data and UI stay in sync automatically, code is modular and consistent, apps are performant and maintainable.

👉 Frameworks like React, Vue, and Angular exist to abstract away complexity, enforce structure, and let developers focus on building great user experiences instead of wrestling with DOM and state.

Powered by wisp