谈谈我对前端技术发展的了解和对未来发展的展望

一、前端发展阶段

1. 静态页面阶段

互联网发展的早期，网站的前后端开发是一体的，即前端代码是后端代码的一部分。

1. 后端收到浏览器的请求
2. 生成静态页面
3. 发送到浏览器

那时的前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能，脚本的作用只是增加一些特殊效果，比如那时很流行用脚本控制页面上飞来飞去的广告。

那时的网站开发，采用的是后端 MVC 模式。

• Model（模型层）：提供/保存数据
• Controller（控制层）：数据处理，实现业务逻辑
• View（视图层）：展示数据，提供用户界面

前端只是后端 MVC 的 V。

2. AJAX 阶段

2004年，AJAX 技术诞生，改变了前端开发。Gmail 和 Google 地图这样革命性的产品出现，使得开发者发现，前端的作用不仅仅是展示页面，还可以管理数据并与用户互动。

AJAX 技术指的是脚本独立向服务器请求数据，拿到数据以后，进行处理并更新网页。整个过程中，后端只是负责提供数据，其他事情都由前端处理。前端不再是后端的模板，而是实现了从“获取数据 --》 处理数据 --》展示数据”的完整业务逻辑。

就是从这个阶段开始，前端脚本开始变得复杂，不再仅仅是一些玩具性的功能。

3. 前端 MVC 阶段

前端代码有了读写数据、处理数据、生成视图等功能，因此迫切需要辅助工具，方便开发者组织代码。这导致了前端 MVC 框架的诞生。

2010年，第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端，但是只有 M （读写数据）和 V（展示数据），没有 C（处理数据）。因为，Backbone 认为前端 Controller 与后端不同，不需要、也不应该处理业务逻辑，只需要处理 UI 逻辑，响应用户的一举一动。所以，数据处理都放在后端，前端只用事件响应处理 UI 逻辑（用户操作）。

后来，更多的前端 MVC 框架出现。另一些框架提出 MVVM 模式，用 View Model 代替 Controller。MVVM 模式也将前端应用分成三个部分。

• Model：读写数据
• View：展示数据
• View-Model：数据处理

View Model 是简化的 Controller，所有的数据逻辑都放在这个部分。它的唯一作用就是为 View 提供处理好的数据，不含其他逻辑。也就是说，Model 拿到数据以后，View Model 将数据处理成视图层（View）需要的格式，在视图层展示出来。

这个模型的特点是 View 绑定 View Model。如果 View Model 的数据变了，View（视图层）也跟着变了；反之亦然，如果用户在视图层修改了数据，也立刻反映在 View Model。整个过程完全不需要手工处理。

4. SPA 阶段

前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page application）。

SPA是指在一张网页（single page）上，通过良好的体验，模拟出多页面应用程序（application）。用户的浏览器只需要将网页载入一次，然后所有操作都可以在这张页面上完成，带有迅速的响应和虚拟的页面切换。

随着 SPA 的兴起，2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。

前端领域风起云涌，框架层出不穷。目前，前端三大马车 Vue、Angular、React ，都属于 SPA 开发框架。

同时我们也注意到在众多前端框架中，由 Rich Harris (Ractive, Rollup 和 Bubble 的作者) 开发的 Svelte 有较于 React 更小的体积、更高的开发效率和性能，有望成为一批黑马，在前端框架中脱颖而出。

二、前端新标准

2014年，W3C正式发布HTML5.0标准让前端技术蓬勃发展。HTML6.0目前处于提案阶段。

Web1.0到2.0的转变，由静态互联网过渡到Web应用程序，极大地改变了前端技术。

Web3.0时代，可能是去中心化，可能是物联网，可能是人工智能，值得每个前端开发去关注。

三、框架选择

1、视图框架

React，Vue，Angular 是前端强势铁三角。由于新版本推出如Vue3.x和React18，占有率会变得更高。

2、UI 框架

由于模块化CSS、摇树、MVVM 的流行，UI 框架的选择其实没有那么重要了。适合的UI才是好的UI。

四、新工具的诞生和发展

1. 构建工具

随着nodejs和Babel的成功，构建工具也有了很多的突破。打包器大概可以分为传统编译和 ESM 混合编译，从 webpack 到 vite ，说明原生 ES 模块的接纳一直在继续。

Vite： “快”是它的核心，它主要解决的痛点就是项目开发启动缓慢。

ESM 混合编译：在开发环境编译时，使用 Server 动态编译 + 浏览器的 ESM，基本上实现了“开发环境 0 编译”的功能。而生产环境编译时，则会调用其他编译工具来完成（如 Vite 使用 Rollup）。

另一方面，出于对性能的考虑，越来越多的前端工具开始用其他语言 (Rust、Go) 来构建。

2. 混合式开发工具

将JavaScriptCore引擎当做虚拟机的方案，代表框架React Native；

另一种是使用非JavaScriptCore虚拟机的方案，代表框架是Flutter。相比于 React Native框架, Flutter的优势最主要体现在性能、开发效率和体验这两大方面。但从编程语言角度来说，JavaScript的历史和流行程度都远超Dart，生态也更加完善，开发者也远多于Dart程序 员。所以，从编程语言的角度来看，虽然Dart语言入门简单，但从长远考虑，还是选择 React Native会更好一些。

另外为了使用H5开发移动端应用，使得相应出现了一些混合式开发（Hybrid App）的构建工具，如uniapp、Taro等。

3. 桌面应用

• Electron: 我们的老熟人，Chromium + Nodejs，深受大家喜爱
• Tauri: 异军突起的新星，Webview + Rust (可替换)。对比 Electron 因为不用打包 Chromium 和 Nodejs 运行时，产物体积小，内存占用小，运行性能好

4. 类型化语言

TypeScript 使用率近年来稳健增长，目前已经是前端项目的标配了，可以预计未来将会有更多强大的配套工具提高生产力还有提升使用体验。

5. 包管理工具

从 yarn 再到现在的 pnpm，解决了很多npm存在的诟病。

pnpm 可以说是 npm 的超级加强版，或者 yarn 的加强版。其独特的软连接和硬链接的设计，使得装依赖很快（Yarn 从缓存中复制文件，而 pnpm 只是从全局存储中链接它们），解决了多个项目依赖包缓存问题，避免了重复下载。

五、智能平台

1. 低代码平台

低代码发展初期，厂商的类型多样化，传统软件厂商、互联网大厂均涉及低代码领域，通用型厂商相对垂直型厂商应用场景更加广泛，因此厂商数量更多。但随着市场成熟，通用类型厂商竞争加剧，垂直型厂商在细分的领域将会呈现优势明显趋势，可以进一步挖掘用户场景，提升产品能力和用户满意度。

及早布局低代码产业生态，多维度拓展厂商优势，才能在未来占据高地。

2. AI 与图形化的探索

人工智能作为跨时代技术在各个领域大放异彩，近些年 AI 能力在前端领域的尝试与应用带来新一轮的技术革命。

游戏引擎和3D技术的不断发展，给前端注入了新的活力。

阿里的 Imgcook 可以通过识别设计稿（Sketch / PSD /图片）智能生成 React、Vue、Flutter、小程序等不同种类的前端代码，目前可以生成 70% 以上的代码，智能生成代码不再只是一个线下实验产品，而是真正产生了价值。但这个只能说是减轻静态页面的工作量而已，无法取代前端。

六、跨平台技术

随着从 PC 时代向移动互联网时代演进，原生客户端因为自身天花板的原因也在逐渐向跨平台方案倾斜，当然这得益于跨平台方案的明显优势。对于开发者而言，可以做到一次开发多端复用，这在很大程度上能够降低研发成本，提高产品效能。但是，移动端的跨平台技术并不是仅仅考虑一套代码能够运行在不同场景即可，还需要解决性能、动态性、研发效率以及一致性的问题。

1. React Native 和 Flutter

React Native 是以 Web 技术开发原生移动应用的典型框架。但是与众多基于 Html 的跨平台框架相比，Flutter 绝对是体验最好，性能与构建思路几乎最接近原生开发的框架。

Flutter 目前虽然有着跨端最好的性能和体验但是关注人数和 React Native 不相上下。React Native 由于先出优势加上 React 的影响力和 Flutter 的学习成本（Dart语言）导致目前很多 APP 都已经进入存量阶段，少有新的 APP 出现，所以在没有足够的收益情况下，大部分 APP 是不会进行技术变更的。

2. 小程序

目前主流小程序平台有很多，包括：

• 腾讯的微信小程序、QQ 小程序；
• 阿里的支付宝小程序、淘宝轻店铺；
• 字节跳动的头条小程序、抖音小程序；
• 百度小程序等；

不同平台的实现标准各不相同，开发者需要学习不同平台的开发规范做定制化开发。所以在 2019 年 9 月阿里巴巴主导发起并联合 W3C 中国及国内外厂商起草了 MiniApp 标准化白皮书（MiniApp Standardization White Paper），旨在制定共同标准减少平台差异，并成立了相关工作组。

但从目前来看各平台对这些标准的实现度还很低，并未实现统一，所以这么来看标准化的路看着还很长。在当下，解决跨平台开发问题最有效的手段是使用转换框架进行转换。

随着一些跨端框架（Uniapp、Taro）的出现部分跨端转换器基本已经定型。另外还有其他一些跨端转换器相关的内容：

• wept: 微信小程序实时运行工具，目前支持 Web、iOS 两端的运行环境；
• hera-cli: 用小程序方式来写跨平台应用的开发框架，可以打包成 Android 、 iOS 应用，以及 H5；
• weweb-cli: 兼容小程序语法的前端框架，可以用小程序的写法来写 web 应用

跨端这项技术并非为了完全替代原生开发，针对每个场景我们都可以用原生写出性能最佳的代码。但是这样做工作量太大，实际项目开发中需要掌握效率与优化之间的平衡。跨端的优势在于能让我们在尽可能保障性能的前提下书写更有效率的代码。

七、泛前端方向

“前端开发”的发展历史像是一直在找寻自己的定位；从切图仔、写 HTML 模板的“石器时代”，到前后端分离、大前端的“工业时代”，再到现在跨端技术、低代码的“电气时代”。前端研发的职责一直在改变，同时前端研发需要掌握的技术也在迭代更新。

1. 全栈

“全栈开发者”是指“同时掌握前端、后端以及其他网站开发相关技能的开发者”。全栈开发者能够胜任产品开发的全流程，从前端到后端，从架构设计到代码落地，从自动化测试到运维等。对于公司来说，全栈工程师可以减小公司的用人成本，减少项目沟通成本；对于个人来说，拥有全链路技术有益于技术的闭环，扩展全局思维，提升个人能力和价值。

2. DevOps

DevOps（Development 和 Operations 的组合词）是一种重视“软件开发人员（Dev）”和“IT 运维技术人员（OPS）”之间沟通合作的模式。透过自动化“软件交付”和“架构变更”的流程，来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。可以把 DevOps 理解为一个过程、方法与系统的总称。

在Docker自动化部署和流水线发版工具的发展下，DevOps越来越被开发人员所重视。

八、5G场景带来的新趋势

5G 的到来对于技术研发工作者的我们而言意味深远。它的出现是数据传输速度、响应速度和连接性的一次巨大飞跃。

5G 将与超高清视频、VR、AR、消费级云计算、智能家居、智慧城市、车联网、物联网、智能制造等产生深度融合，这些都将为前端技术的发展带来新的增长和机遇。

1. WebAR & WebVR

元宇宙概念火爆全球，目前的 WebAR 和 WebVR 技术距离实现元宇宙的愿景似乎还很遥远，但借助于以 URL 的格式进行传播的优势，通过社交媒体分享形式进行推广，WebAR 和 WebVR 无疑是用户接触到元宇宙门槛的最便捷的方式，不需要购买昂贵的 VR 设备，不需要安装 APP，通过手机网页就可以进行体验。在 5G 技术逐渐普及的当今，现有的一些体验问题，例如：3D 模型体积较大，初次资源加载耗时长之类的问题也能够得到一些缓解。

那么，问题来了：前端人在这块能够做些什么？从技术上来讲，需要我们通过机器学习算法，实时地将虚拟图像覆盖到用户屏幕，并且和真实世界中的位置进行对齐，结合 WebRTC 技术实现网页浏览器实时获取和展示视频流，再利用 WebGL 的能力，进行 3D 人物模型加载，渲染和播放动画。

2. Web 3D

随着 5G 技术发展，视频加载速度会非常快，简单的实时渲染会被视频直接替代。复杂的可以通过服务器渲染，将画面传回网页中，只要传输够快，手机的性能就不再是问题。

降低 web 3D 研发成本应该是将来的一个重要发展路线，随着技术门槛的降低，会吸引更多感兴趣的人加入促使其正向发展。所以 Web 3D 可能会朝着平台化的方向发展，能提供简单高效的工具将成为核心竞争力。

3. WebRTC

WebRTC 是一项实时通讯技术，它为前端打开了信息传递的新世界大门，对于绝大多数前端开发者来说，对于信息的传递还局限于 XMLHttpRequest，升级到全双工大家会用到 WebSocket ，对于能力闭塞的前端来说，WebRTC 无疑拓宽了前端的技术门路。

九、前端未来展望

未来是留给下一代的，我们已然老了。干不动了。

1. 桌面应用 - 前端开发的下一个战场

自 2014 年 Github 推出 Electron 开源框架开始，前端跳出 Web 客户端局限，开发桌面应用的能力成为了可能，近年来，依托 Electron、React Native、Flutter 等应用框架，前端跨端开发桌面应用的概念持续升温。尽管这些方案和传统的 QT、Xaramrin 等技术栈相比，性能未必最优，但它意味着一些极具性价比的可选方案出现，大大降低了开发桌面应用的门槛。

搭上 Rust 的东风的 Tauri 受到非常多的关注，对标 Electron，主要有以下 4 点优势：

• 包体积大小更小
• 运行时内存占用更小
• 安全摆在第一位
• 真正的开源

但是理性思考，对于前端开发来说，有三个致命的缺点：

• Tauri 使用系统 webview，会有兼容性问题，这也是 Electron 重点解决的问题
• 抛弃了 nodejs，生态圈目前来说还是很难比得上 Electron 的
• 底层开发要用 Rust，有一定的上手成本

但是随着 Rust 的生态起来，浏览器兼容性渐小之后，胜负犹未可知。

2. 低代码将持续成为热点话题

自从 2020 技术趋势中谈及 “低代码” 之后，低代码领域一直在持续升温。

低代码引擎的核心目标，是提供一套基础标准、设施，帮助上层平台更有效地建设。而其思路的关键，在于引擎模型及能力的完备性、以及针对不同场景下的可扩展性。

腾讯内部的低代码 Oteam 也在 21 年开始组织起来，主要的目标也是底层核心的共建。从整个行业看，低代码引擎已经开始崭露头角，且可预见到趋势还将上升。只是这个细分赛道更多可能只是大厂参与，因为其需要大量的场景支撑验证，而这是小厂或独立开发者不具备的。

之前我曾发过一篇文章，详细探讨了低代码的崛起和程序员之间的关系，有兴趣的朋友可以看个乐子：

https://code.zuifengyun.com/2021/05/2346.html

3. Rust - 前端人员是时候掌握一门新语言了

随着前端生态工具的逐渐完善，大家除了探索前端的新领域之外，同时还在思考如何提高工具的性能，众所周知，JavaScript 的性能一直是被大家所诟病的点，但是前端的基础设施却是十分要求性能的，比如构建等，所以大家开始考虑是否能够用别的语言来编写前端工具，于是 Rust 吸引了大家的眼球，Rust 语言自诞生以来，就以它的安全性、性能、现代化的语法吸引了大批的开发者，在 stackoverflow 最受喜爱的编程和语言中连续多年获得榜首的位置，并且已经有众多领域都出现了 Rust 重写的项目，Linux 项目也表示正在使用 Rust 重写一部分功能，可以说 Rust 进入前端领域也是一种必然的趋势。

在前端构建领域，2021 年出现了一个十分突出的项目 —— swc，它是由 Rust 编写的构建工具，可以用来编译、压缩、打包，目前它已经被一些知名项目使用，比如 Next.js、Parcel、Deno 等，Next.js 12 直接使用了 swc 替代 babel，并在他们的官网博客表示说使用了 swc 之后，热更新速度提升到了原来的三倍，构建速度提升到了 5 倍，由此可见，Rust 性能的强大。

除了构建方面，在前端的其他领域也是有着 Rust 的身影，比如 Deno 的运行时引擎也是用的 Rust 编写的 V8 引擎；前端的下一代工具全家桶 Rome 宣布使用 Rust 重写；Node.js 可以通过 napi-rs 来调用 Rust 模块，实现高性能扩展；使用 Rust 编写的 dprint 规范代码器，要比 Prettier 快 30 倍；Rust 也可以编译成 WASM，并且出现了像 yew、percy 这样的 WASM 前端框架。

推特上，Redux 作者 Dan Abramov 在某个提问 “未来三年最值得学习的语言是什么” 下回答了 “Rust”，这或许是对前端人员的一个启发，我们也是时候学习一门新语言来让前端生态圈再次焕发活力了。

例子：现在很多的前端构建工具和项目使用Rust语言。

• Deno（新一代的JS运行时）底层是Rust
• Next.js（React服务端渲染框架）使用Rust编译器，能实现更快速的构建
• Swc是一个基于rust语言开发的js编译器，利用了rust的安全无gc以及系统级语言的特性，保证了性能是接近原生开发，并且可以充分利用多核cpu。swc 对比 babel有至少 10 倍以上的性能优势

语法：

在语法上 Rust 也是极具现代化语言的特点，借鉴了函数式编程、结构化语言的特点，并且在它们的基础上也创造了许多更为先进的语法。在函数式编程的地方，也有着不少 JavaScript 的身影，比如 JS 的箭头函数对应了 Rust 的闭合函数；Rust 的数组同样也有着 map、reduce、filter 等方法；Rust 的函数也可以赋值给一个变量。

在Deno的诞生发展以及于Nodejs的角逐下，Rust 可能会是 JS 基础设施的未来。

本文固定连接：https://code.zuifengyun.com/2022/08/2619.html，转载须征得作者授权。