Understanding the Evolution, Complexity, and Design Philosophy of Frontend Frameworks

Frontend frameworks have recently faced criticism for their growing complexity, prompting this article to explain their historical development and underlying design goals, helping beginners see why the added complexity exists and how it benefits developers.

1. Svelte 5 "runes" feature – Svelte moves reactive logic from compile‑time to a simpler let count = $state(0) declaration, allowing any assignment to become reactive. Example:

<script>  let count = 0;  const handleClick = () => { count += 1; }</script><div> count: {count} <button on:click={handleClick}>inc</button></div>

The new syntax eliminates the need to place reactive variables only at the top level, reducing mental overhead.

2. Common complaints about mainstream frameworks – A foreign author listed four main issues: HTML is not the best UI target, frameworks add unnecessary complexity, template syntax is redundant compared to raw DOM APIs, and lack of unified syntax across frameworks.

3. Historical overview – Early web pages were static; JavaScript introduced interactivity, leading to compatibility problems that jQuery and Prototype solved. As applications grew, module loaders (SeaJS, RequireJS) and bundlers (Webpack, Vite) appeared, followed by MV* patterns (Backbone, Angular, React, Vue) that introduced components, reactive data, and templating to improve maintainability.

4. Why frameworks introduce "complexity"

HTML‑like templates hide low‑level DOM details, making UI intent clearer (e.g., Vue’s <div v‑if="blockVisible">…</div> vs raw document.createElement code).

Component systems enable reuse and encapsulation, reducing duplication (e.g., a TodoItem component in Vue vs manual DOM manipulation).

Virtual DOM or compile‑time abstractions provide cross‑platform capabilities, allowing the same codebase to run on web, native apps, or mini‑programs.

Data reactivity automatically synchronizes state and view, eliminating explicit DOM updates (e.g., Vue’s {msg} binding).

Code comparison of a toggle button using raw DOM versus Vue:

// Raw DOM
const block = document.querySelector('.block');
const toggleButton = document.querySelector('.toggle-button');
let blockVisible = true;

toggleButton.addEventListener('click', () => {
  blockVisible = !blockVisible;
  block.style.display = blockVisible ? 'block' : 'none';
});

// Vue (script setup)
const blockVisible = ref(true);
const handleClick = () => {
  blockVisible.value = !blockVisible.value;
};

5. Design philosophies of major frameworks

React – Minimal core (JSX only), functional programming, encourages pure component rendering and external libraries for state/routing.

Vue – Progressive, HTML‑like syntax, bundled ecosystem (Vuex, Vue‑router), strong focus on beginner friendliness.

Svelte – Compile‑time approach, no virtual DOM, performance‑first, reduces mental load by making plain JavaScript assignments reactive.

All frameworks share the goal of lowering developer burden while solving specific pain points; they evolve by borrowing ideas from each other.

6. Conclusion – Understanding the historical context and design rationale of frontend frameworks helps developers choose the right tool, write more robust code, and avoid misusing APIs (e.g., directly mutating React state). The article encourages deeper comprehension beyond surface‑level tutorials.