Understanding the Evolution, Design, and Complexity of Modern Front-End Frameworks

Introduction: The article introduces the development history and design ideas of front‑end frameworks, explaining why complexity is introduced and its benefits.

Table of contents outlines sections covering framework evolution, reasons for complexity, Svelte’s new “runes” feature, criticisms, and a comparative analysis of major frameworks.

It discusses the controversy around Svelte 5’s “runes”, linking to the article “Introducing runes” and showing a simple Svelte component that increments a counter.

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

The article explains that Svelte’s compile‑time reactivity makes assignments like count += 1 automatically update the UI, but notes current limitations when variables are defined inside functions.

It then presents a “foreign commenter’s” list of complaints about front‑end frameworks, such as unnecessary HTML templates, added complexity, and inconsistent template syntax.

Subsequent sections trace the history of front‑end frameworks: early days with static pages, the introduction of JavaScript, the rise of jQuery for cross‑browser compatibility, the emergence of module loaders (SeaJS, RequireJS) and bundlers (webpack, Vite), and the adoption of MV* patterns (Backbone, Angular, React, Vue).

The article highlights how modern frameworks introduce concepts like components, reactive data, and template rendering to improve maintainability and reduce developer mental load.

It compares the “complexity” introduced by frameworks to the benefits of abstraction, using a vanilla‑DOM example that toggles a block’s visibility, then shows the equivalent Vue code.

<template> <div v-if="blockVisible"> a block </div> <button @click="handleClick">toggle block</button> </template> <script setup> const blockVisible = ref(true); const handleClick = () => { blockVisible.value = !blockVisible.value; } </script>

The article discusses component reuse, showing a plain‑DOM Todo list implementation and a refactored version using a JavaScript class, then the Vue component approach.

<template> <div> new item <button>X</button> </div> </template> <script> export default { /* component logic */ } </script>

It examines cross‑platform capabilities of frameworks (React Native, Taro, Weex, Uni‑App) and the underlying abstraction of UI operations via interfaces.

Later sections analyze why multiple mainstream frameworks exist, describing React’s minimalist, functional design, Vue’s progressive, beginner‑friendly approach, and Svelte’s compile‑time performance focus.

The article concludes that each framework has its own philosophy and trade‑offs, and developers should choose based on project needs.

Finally, it invites readers to share their opinions and join community activities.