前端技术演化史

跨端与全栈演进史

Properties1
tags跨端, 全栈, 总览, reactnative, 小程序, electron, bff, rsc

12分钟阅读

🗺️ 跨端与全栈演进史

一句话定性

这是一部前端的领土扩张史。前端没有满足于浏览器这块原生疆域,而是带着同一套 JS/TS 技能栈,先后向移动端、桌面端、小程序、服务端四个方向殖民。母题只有一句:用一种语言、一种心智、一支团队,统一一切运行平台。 代价同样只有一句:当边界被吞噬,职责也随之膨胀,复杂度从”跨系统”内化成了”跨一行代码”。

〇、为什么会有这个专题:前端的”不安分”

回顾前端三十年(前端框架演进史),会发现一个反复出现的冲动:前端总想跳出浏览器。 这不是偶然,而是由两条结构性力量驱动的:

扩张的两台引擎

引擎 A:技能复用的经济学。 一旦一家公司养了一支会 React/Vue 的前端团队,养了一套 npm + 构建 + 组件库的基础设施,那么”能不能用同一批人、同一套工具去做移动 App / 桌面应用 / 后端 API”就成了天然的诱惑。每多征服一个平台,就摊薄一次学习成本。

引擎 B:JavaScript 的普适性。 Node.js 让 JS 跑出了浏览器,TypeScript 给了它工程级的可靠性。JS 从此成为唯一一门能在浏览器、服务器、移动端、桌面端、边缘节点全平台运行的语言。语言的普适,直接转化为前端的扩张能力。

于是前端的版图沿着两条主线同时推进——一条横向(跨端),一条纵向(全栈)。

一、主线①:跨端 —— 横向征服更多平台

动机:复用 Web 技能,一次开发、多端运行。 浏览器只是 JS 的第一块殖民地;凡是有 UI 的地方,前端都想用自己的方式去画。

                  浏览器(原生疆域)
                        │
        ┌───────────────┼───────────────┐
        ↓               ↓               ↓
     移动端           桌面端          小程序
        │               │               │
  Cordova/PhoneGap   Electron      微信小程序 2017
  (WebView 套壳)     (Chromium+    (双线程+受限
        ↓             Node 2013)    WebView+私有DSL)
  React Native 2015      │               │
  (JS 写原生组件)     Tauri(Rust,     Taro / uni-app
        ‖              系统WebView)   (一套语法编译多端)
   Flutter(非JS,         │
   重要参照系)            ↓
                    "每个App带个浏览器"的反思
平台代表技术核心思路专题
移动端Cordova → React Native(2015)从”WebView 套壳”到”JS 驱动原生组件”React-Native与移动跨端
小程序微信小程序(2017)、Taro/uni-app平台定义的”双线程 + 受限 WebView + 私有 DSL”小程序生态
桌面端Electron(2013)、Tauri把浏览器内核打包成桌面 AppElectron与桌面端

跨端的本质张力:复用 vs. 原生

每一种跨端方案都在同一根光谱上权衡:越靠近”复用 Web”,开发越快、体验越打折;越靠近”原生”,体验越好、复用越少。 WebView 套壳是一个极端(全复用、体验最差),Flutter 自绘引擎是另一个极端(几乎不复用 Web、体验接近原生)。React Native 站在中间:JS 写逻辑,但渲染交给原生组件。 这条光谱,就是整部跨端史的坐标轴。

二、主线②:全栈化 —— 纵向向后端扩张

动机:掌控数据获取、SSR 需要、类型贯通。 如果说跨端是”前端向旁边长”,全栈化就是”前端向下扎根”——把过去属于后端的职责,一寸寸收进前端项目里。

[[Node.js]](2009):JS 能写后端了 —— 全栈化的物理前提
        │
        ↓
Express 时代:前后端分离,前端团队也能维护一个 Node 服务
        │
        ↓
元框架的 API routes(Next.js / Nuxt):前后端同一个项目、同一个仓库
        │  "pages/api/*.ts 里写后端,和组件并排"
        ↓
BFF(Backend for Frontend):为前端量身定制的聚合层
        │  "前端自己掌控一个后端,按 UI 需求裁剪数据"
        ↓
tRPC:端到端类型安全 —— 删掉 API schema,函数直接跨网络调用
        │  依赖 [[TypeScript]] 的类型在前后端间贯通
        ↓
RSC(React Server Components):前后端边界从"网络请求"
   变成"组件树里的一条线" —— 边界彻底模糊
阶段技术前端吞下了什么后端职责专题
全栈基础Node.js”写服务端”这件事本身全栈框架与BFF
同仓全栈Next.js / Nuxt API routesAPI 端点与前端同项目全栈框架与BFF
数据聚合BFF 模式为 UI 定制的数据编排层全栈框架与BFF
类型贯通tRPC免写 API schema,类型直接穿透网络全栈框架与BFF
边界消融RSC”哪段在服务端跑”成了组件级决定RSC与前后端边界模糊

三、两条主线的交汇:一切都收敛到”全栈元框架”

跨端和全栈不是平行的两条线,它们在当代正在合流。看一眼今天的 Next.js:它既是全栈框架(API routes + RSC),又通过 React Native / Expo 体系延伸到移动端;Vue 的 Nuxt 同理,而 uni-app/Taro 又让 Vue/React 语法直达小程序。

当代终局:一套技能栈,四面通吃 

                   ┌──────────────────────────┐
                   │   React / Vue 组件心智     │
                   │   + TypeScript 类型贯通    │
                   └────────────┬─────────────┘
         ┌──────────┬──────────┼──────────┬──────────┐
         ↓          ↓          ↓          ↓          ↓
       浏览器     移动端      桌面端     小程序     服务端
      (原生)   RN/Expo    Electron   Taro/uni   RSC/API
                                      -app       routes

这正是 2018-2023 工程化时代 留下的最大遗产:当工具链、包管理、类型系统都统一了,平台之间的墙就被同一套技能栈推倒了。

四、贯穿全程的二阶代价:边界模糊 = 职责膨胀

扩张的阴影

前端每征服一块新领土,都要付出代价,而且代价越来越隐蔽:

  1. 跨端的代价:抽象泄漏。 WebView 套壳泄漏出性能问题,RN 泄漏出原生模块维护、版本碎片,Electron 泄漏出”每个 App 带一个浏览器”的内存与体积。你逃不开你想抹平的那个平台。
  2. 全栈的代价:职责无限膨胀。 前端工程师如今要同时懂组件、状态、SSR、缓存、数据库查询、边缘部署、类型贯通……”前端”这个词的外延膨胀到几乎失去意义。
  3. RSC 的终极代价:边界内化。 当前后端边界从”一次网络请求”(显眼、可调试)变成”组件树里的一条线”(隐形、难追踪),复杂度没有消失,只是从系统间转移到了一行代码里。详见 RSC与前后端边界模糊。

第一性原理上的拷问:“用一套技能统一一切”省下的学习成本,是否被”一套技能要懂一切”的认知成本吃掉了? 这是整部扩张史尚未解决的悖论。

五、母题与因果总图

flowchart TD
    js["JS 的普适性<br/>+ 技能复用经济学"]
    node["[[Node.js]] 2009<br/>JS 跑出浏览器"]

    subgraph 跨端["主线① 跨端(横向)"]
        cordova["Cordova/PhoneGap<br/>WebView 套壳"]
        rn["React Native 2015<br/>JS 写原生组件"]
        flutter["Flutter(非 JS 参照)<br/>自绘引擎"]
        mp["微信小程序 2017<br/>双线程+私有DSL"]
        taro["Taro/uni-app<br/>一套语法编译多端"]
        electron["Electron 2013<br/>Chromium+Node"]
        tauri["Tauri<br/>系统WebView+Rust"]
    end

    subgraph 全栈["主线② 全栈化(纵向)"]
        api["元框架 API routes"]
        bff["BFF 模式"]
        trpc["tRPC 端到端类型安全"]
        rsc["RSC 边界模糊"]
    end

    js --> 跨端
    js --> node
    node --> 全栈
    cordova -->|"性能差, 要碰原生"| rn
    rn -.->|"另一条路: 不复用Web"| flutter
    cordova -.->|"中国变体"| mp
    mp -->|"碎片化, 一码多端"| taro
    node --> electron
    electron -->|"太重, 每App带浏览器"| tauri
    api --> bff
    bff -->|"免写 schema"| trpc
    trpc --> rsc
    rsc -->|"边界从网络→组件树"| future["边界彻底模糊<br/>职责膨胀"]
    taro -.-> future
    tauri -.-> future

    future --> dir["[[未来5到10年前端发展方向]]"]

    classDef next fill:#eceff1,stroke:#607d8b,stroke-dasharray:4 3;
    class future,dir next;

历史地位

跨端与全栈,是前端从”浏览器里的一个图层”成长为”软件世界的通用 UI 与交付层”的关键一跃。它让前端工程师从”画页面的人”变成”端到端交付产品的人”。但这份权力的扩张,也让”前端”这个职业的边界变得空前模糊——这究竟是前端的黄金时代,还是它作为一个独立工种的黄昏? 答案,藏在 RSC与前后端边界模糊 和 未来5到10年前端发展方向 里。

🔗 跨端:React-Native与移动跨端 | 小程序生态 | Electron与桌面端 🔗 全栈:全栈框架与BFF | RSC与前后端边界模糊 🔗 时代:2013-2018 SPA时代 | 2018-2023 工程化时代 | 2023-未来 AI时代 🔗 框架:React | Vue | 前端框架演进史 | Angular-2+ 🔗 运行时:Node.js | Deno | Bun | 渲染:渲染模式演进史 | 语言:TypeScript 🔗 深度:为什么Vue在中国崛起 | 未来5到10年前端发展方向

关系图谱

反向链接