From Static Pages to Big Frontend: A Journey Through Web Evolution
This article traces the evolution of web front‑end technology from the early static HTML era through dynamic CGI and JavaScript, the rise of front‑end frameworks, component‑based development, and finally the big‑frontend era encompassing web, mobile, desktop, mini‑programs, SSR and full‑stack approaches.
Introduction
With the rapid development of the Internet, web technology has continuously evolved to meet growing user experience demands. This article divides front‑end development into four stages: the static era, the dynamic era, the front‑back separation era, and the big‑frontend era.
1. Static Era
The earliest web era was dominated by HTML, invented by Tim Berners‑Lee at CERN for internal document sharing. Its key feature was the hyperlink, enabling navigation between documents.
1.1 Representative Browsers
Mosaic and Netscape Navigator were the flagship browsers. Mosaic influenced later browsers such as Internet Explorer and Navigator.
Navigator bridged the static and dynamic eras and introduced concepts like HTTPS and JavaScript.
1.2 Development Mode
Only HTML tags were used; styling relied on tags like <font> and <i>. Example:
<!DOCTYPE html>
<html>
<head>
<title>早期 HTML 字体颜色示例</title>
</head>
<body>
<p><font color="red">这是红色的文字。</font></p>
<p><font color="blue">这是蓝色的文字。</font></p>
<p><font color="#00FF00">这是绿色的文字，使用十六进制颜色代码。</font></p>
</body>
</html>Visual editors like Microsoft FrontPage and Macromedia Dreamweaver were popular, offering capabilities comparable to today’s low‑code tools.
2. Dynamic Era
Static pages could only display information. To interact with users, dynamic capabilities were required on both server and client sides.
2.1 Server‑Side Dynamic
Early server‑side scripting used CGI written in C or Perl to generate HTML based on request parameters. Example CGI program in C:
#include <stdio.h>
#include <stdlib.h>
int main(){
printf("Content-Type: text/html
");
printf("<!DOCTYPE html><html><head><title>Simple CGI Example</title></head><body><h1>Hello, CGI!</h1><p>This is a simple CGI program written in C.</p></body></html>");
return 0;
}CGI had large permissions and security issues, leading to the emergence of dedicated web scripting languages.
2.2 Client‑Side Dynamic
To reduce latency, browsers added scripting capabilities. JavaScript was created by Brendan Eich at Netscape, combining Scheme‑like functions with Java‑style syntax. The DOM model allowed structured manipulation of page elements, later standardized by W3C. The BOM provided browser‑level interfaces.
Microsoft introduced VBScript, compatible only with Internet Explorer, which eventually fell out of favor as JavaScript standardized.
3. Front‑Back Separation Era
The rise of DOM, BOM, and Ajax triggered the front‑back separation revolution, giving birth to the term “front‑end”. Frameworks emerged to manage growing project complexity.
3.1 Birth of Front‑End Frameworks
Early tools like jQuery and Prototype.js wrapped browser inconsistencies. Later, module loaders (SeaJS, RequireJS) and build tools (Webpack, Vite) addressed module management. MV* patterns (MVC, MVP, MVVM) led to frameworks such as Backbone, Ember, Angular, React, and Vue.
Frameworks introduced HTML‑like templates, components, virtual DOM or compilation mechanisms, data reactivity, and cross‑platform abstractions.
3.1.1 HTML Templates
Modern frameworks extend HTML syntax to support conditional rendering, loops, and component insertion.
3.1.2 Components
Components encapsulate UI and logic, enabling reuse across pages and platforms.
3.1.3 VDOM / Compiler
Frameworks abstract UI operations (create, update, delete) to support multiple platforms (web, native, mini‑programs) via implementations like DOMUIOperations or NativeUIOperations.
3.1.4 Data Reactivity
Reactive data binding lets developers modify data only; the framework automatically updates the view.
<div>{msg}</div>
<button @click="handleClick">reverse</button>
<script>
let msg = 'hello, world';
const handleClick = () => { msg = msg.split('').reverse().join(''); };
</script>4. Big Front‑End Era
Cross‑platform consistency, performance, and development efficiency drove the “big front‑end” concept, extending front‑end techniques to mobile, desktop, mini‑programs, SSR, and full‑stack development.
4.1 Web Front‑End
Traditional HTML/CSS/JS plus modern frameworks and toolchains.
4.2 Mobile
Three approaches: Web‑UI (e.g., Cordova), native component rendering (React Native, Weex), and HarmonyOS development using TS/eTS + ArkUI.
4.3 Desktop
Custom layout systems (React Native Windows) and Chromium + Node.js environments (Electron, NW.js).
4.4 Mini‑Programs
Mini‑apps built with a DSL on top of web technologies, similar to Electron for mobile.
4.5 Server‑Side Rendering & Full‑Stack
SSR solves first‑paint performance and SEO issues; frameworks like Next.js and Nuxt.js provide out‑of‑the‑box support. Node.js enabled JavaScript full‑stack development, reducing language barriers and simplifying code reuse.
5. Insights for Front‑End Developers
The core driver of front‑end evolution is improving user experience, which pushes standardization, performance optimization, and cross‑platform compatibility. Developers must continuously learn new technologies, focus on performance, and keep the user at the center of design.
MoonWebTeam
Official account of MoonWebTeam. All members are former front‑end engineers from Tencent, and the account shares valuable team tech insights, reflections, and other information.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.