> For the complete documentation index, see [llms.txt](https://weekly-essay.mikey.wang/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://weekly-essay.mikey.wang/zh-hant/2026/w12-d2-observation-frontend-vitality-in-the-ai-wave/2026-d2-key-takeaways-review.md). # 2026-D2要點回顧 大會議程： 一般一個月後官方會分享 PPT，不提供直播和錄屏。 一天之內幾十場分享同時進行，一定會 Miss 很多內容。我選擇了一些專業實力深厚的分享者，以下只是我參與的會場，並認為值得回味的。 開始前介紹一下現如今的 JS 生態，因為我發現即使是很多職業前端，對自己所處的語言生態也不是很熟悉，或者還停留在剛入行的認知。如今的主要玩家是 Vercel、VoidZero、Bun、Biome 等。我讓 ChatGPT 生成了一張 ASCII 圖，表達力很好，供參考。 ``` ┌──────────────────────────────────────────────────────────────────────┐ │ JavaScript Ecosystem │ └──────────────────────────────────────────────────────────────────────┘ ┌──────────────┐ │ Developers │ └──────┬───────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ① AI / Coding Entry Layer │ │----------------------------------------------------------------------│ │ Cursor / Claude Code / Copilot / Windsurf / Zod │ │ │ │ 作用： │ │ - 代码生成 │ │ - agent 工作流 │ │ - IDE 内交互 │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ② Framework / Application Layer │ │----------------------------------------------------------------------│ │ React / Vue / Svelte / Solid │ │ Next.js / Nuxt / Remix / Astro │ │ │ │ 代表公司 / 项目： │ │ - Vercel → Next.js │ │ - NuxtLabs → Nuxt │ │ - Vue / Evan You ecosystem │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ③ Toolchain Layer ← 现在竞争最激烈 │ │----------------------------------------------------------------------│ │ Bundler / Dev Server / Compiler / Linter / Formatter / Test │ │ │ │ 主要玩家： │ │ - Vite / Rollup / Rolldown → VoidZero 阵营 │ │ - Turbopack → Vercel │ │ - Rspack → ByteDance │ │ - Webpack → 旧时代核心基础设施 │ │ - Biome → lint / format │ │ - esbuild → 高性能构建基础件 │ │ - SWC / OXC → 编译基础设施 │ │ │ │ 这里决定： │ │ - 本地开发体验 │ │ - 构建速度 │ │ - 配置模型 │ │ - AI 能否直接操作工程系统 │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ④ Runtime Layer │ │----------------------------------------------------------------------│ │ Node.js / Bun / Deno / Browser / Edge Runtime │ │ │ │ 主要玩家： │ │ - Node.js Foundation / OpenJS │ │ - Bun │ │ - Deno │ │ - Vercel Edge Runtime │ │ - Cloudflare Workers │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ⑤ Deploy / Cloud / Delivery Layer │ │----------------------------------------------------------------------│ │ Vercel / Netlify / Cloudflare / AWS / Azure / GCP │ │ │ │ 作用： │ │ - 部署 │ │ - 托管 │ │ - 边缘分发 │ │ - Serverless / AI App Runtime │ └──────────────────────────────────────────────────────────────────────┘ ``` #### 一、**Vite+: 一體化 JS 工具鏈——尤雨溪** 繼續推廣 Rust 重寫前端工具鏈，Rust 寫前端基礎設施基本已經是行業共識了。除了 TSC。 | **工具類型** | **老一代（JavaScript）** | **新一代（Rust）** | | -------- | ------------------------------- | ------------- | | 腳手架 | Vue Cli / Create React App | Vite 8 | | 打包工具 | Webpack (編譯 ts-loader) / Rollup | Rolldown | | TS 構建 | tsup（基於 esbuild） | tsdown | | 代碼檢查 | ESLint | Oxlint | | 代碼格式化 | Prettier | Oxfmt | | 測試框架 | Jest | Vitest | ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228125441867?contentType=1\&isNewContent=false) Vite+是把工具鏈上各種配置文件統一成一個文件，簡化配置工作。 ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228143018714?contentType=1\&isNewContent=false) 他做的工作為什麼重要？為什麼 AI 時代需要一個統一高效的工具鏈？ **核心觀點：寫代碼不是瓶頸了，AI 需要不斷的檢查驗證自己的代碼，如果你不能給 AI 提供一個乾淨高效的工具鏈，那麼未來會阻礙你生產力的大幅提升。** ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228145264077?contentType=1\&isNewContent=false) 最後提了一嘴 VoidZero 正在內測的產品。主要做自動部署，全棧的端到端類型安全。有點像要開展雲服務了，和 Vercel 的方向一致。 ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228143392739?contentType=1\&isNewContent=false) #### 二、**Google A2UI - LLM Generated UI for Agents & A2A——**Jennie 感受一下Google 的影響力： ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228154026954?contentType=1) ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228178285513?contentType=1\&isNewContent=false) 這個主題就是在介紹A2UI。解決的是 為用戶動態生成 UI，除了 A2UI，還有很多。 | **維度** | **AG-UI** | **ChatKit** | **MCP UI** | **Vercel AI UI** | **Google A2UI** | | -------- | --------- | ----------- | ---------- | ---------------- | ----------------- | | **定位屬性** | 前端狀態驅動 | OpenAI 專用 | Agent 遠程渲染 | 垂直棧集成 | **聲明式通用協議** | | **核心機制** | 共享客戶端狀態 | 專有組件庫 | 沙盒 iframe | Shadcn + SDK | **JSON 渲染描述** | | **信噪比** | 極高 (原生性能) | 中 | 中 (跨域通信開銷) | 高 (開發效率) | **極高 (樣式一致性)** | | **安全性** | 高 (前端受控) | 高 | 極高 (環境隔離) | 高 | **極高 (禁止代碼執行)** | | **跨平臺性** | 弱 (需重寫前端) | 弱 | 強 (Web 優先) | 弱 (Web 優先) | **極強 (支持原生/Web)** | **Google A2UI的特點：UI 即結構化數據** 與 Vercel 直接從服務器發送 React 組件片段（代碼）不同，A2UI 堅持 Agent 不發送代碼，只發送 JSON 描述。 * Agent 輸出一套扁平化的流式 JSON，描述 UI 的意圖（如：`{type: "chart", data: [...]}`）。客戶端接收後，調用本地預設的受信任組件（Angular、Flutter 或 Lit 等）進行渲染。 * 這種“數據與渲染分離”的架構，徹底解決了 LLM 生成惡意腳本（XSS）的風險，同時也讓 Agent 的回覆能在手機原生 App 和 Web 頁面上呈現出完全一致的視覺風格。 AG-UI 的底層邏輯是：“Agent 只負責思考和決策，UI 邏輯必須留在前端。” * 狀態同步機制 (Shared State)：它在 Agent 與前端之間建立了一個實時的、雙向同步的狀態對象（State Object）。Agent 可以直接通過指令修改狀態（例如：`state.selectedItems = [...]`），前端框架（React/Vue）監聽到狀態變化後，以毫秒級速度更新本地組件。 * 動作觸發 (Action System)：前端開發者向 Agent 暴露一組“能力函數”（Actions）。Agent 決定什麼時候調用，但如何執行完全由前端代碼定義。這保證了業務邏輯的安全性。 MCP UI 的底層邏輯是：“UI 應該像 API 一樣被標準化。Agent 走到哪裡，UI 就跟到哪裡。” * UI 即資源 (UI as Resource)：在 MCP 協議中，UI 不再是前端預寫的代碼，而是由 Agent 動態提供的“資源”。Agent 通過 `ui://` 協議返回一個 URI（例如 `ui://analytics-dashboard/v1`）。 * 宿主中立 (Host Agnostic)：你寫一個 MCP Server，它提供的 UI 可以在 Claude Desktop、ChatGPT、Cursor 甚至你自己的 App 中直接渲染，無需針對每個平臺重寫前端。（iframe） #### **三、Agentic Coding 構建之路: 從模型到框架——**崔澤宇（麻油）、羅長偉（山果） 阿里內部有很多個 AI Coding 工具，不同部門各搞各的，真的很像十年前的前端。 我就聽了兩場，Qoder 和 Qwen-Code。Qwen-Code更有意思些，fork 的 Gemini Cli，。 只記了兩個觀點，其它都是在介紹，感興趣可以讀倉庫或者下一個玩玩。 Coding 之所以重要，本質在於它是一個“高可驗證性”的任務場景。在很多任務中，生成內容很容易，但驗證正確性卻很困難（如寫文章、主觀判斷），而 Coding 剛好相反：雖然生成難度較高，但可以通過編譯、測試用例、評測系統等方式快速驗證結果。這種“生成難但驗證易”的特性，使得 Coding 成為 AI 最理想的優化對象，也決定了任務價值與可驗證性高度相關。 ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228183240565?contentType=1) 提升模型 Coding 能力的核心路徑是“三個規模化”：一是數據規模（大量高比例代碼數據），二是上下文規模（支持 repo 級、長鏈路理解，如 256K context），三是高質量數據（通過合成數據不斷提升訓練質量）。三者結合，使模型可以在可驗證反饋的閉環中持續進化，從而在工程級複雜任務中實現質的突破。 ![image.png](https://km.sankuai.com/api/file/cdn/2752980249/228162627358?contentType=1\&isNewContent=false) #### 四、**從上下文工程到 Harness Engineering——**周曉 周曉是眾多分享者中技術見地上乘的，在用第一性原理冷靜的分析。 字節的 Web Infra 公眾號分享了實錄，。 摘要： AI Coding 把“寫代碼”的效率提升了一個數量級，但交付並沒加速，因為編碼只佔 30%，剩下 70% 是測試、排障、發佈、溝通。只優化寫代碼，是典型的局部最優：代碼更多，驗證壓力更大，人反而更累。 周曉用 Transformer 自迴歸、KV Cache、Prompt Cache、ReAct 這些“物理現實”做底座：上下文越長，Prefill 越貴、注意力越被稀釋，幻覺越多；追加很便宜，中間修改很昂貴。所以上下文工程的本質，是保護前綴穩定，精心設計 Prompt 結構，而不是瘋狂堆信息；把長對話過程壓縮成 snapshot/AGENTS.md，外包給文件系統存儲，而不是一味塞進上下文。 在這個前提下，工程師的角色要從“寫代碼的人”變為“設計環境和工具的人”：為 Agent 打造對它可讀、延遲低、結構化輸出、帶痛覺反饋的工具鏈。傳統面向人的 GUI、日誌、圖表，對 Agent 來說大多是噪音；好的工具應該是給 Agent 用的 API。MCP 提供原子動作，Skill 把成熟打法固化成 SOP 按需裝載，Sub Agent 把長任務拆成多個獨立沙盒，用結構化摘要通信，避免一個上下文裡熵增到失控。 閉環上，不能停在“AI 寫完我來 Review 代碼”，而是讓 Agent 接入 LSP、測試、沙盒 CLI，自證正確，再把變更範圍、截圖、測試方案打包成報告，人只審閱交付物，而不是追蹤它每一步操作。Spec/Plan、人機協作、何時 AskUser，都是為了減少無謂試錯，把人類的注意力留在定義目標、審查結果上。 整篇的核心結論是：模型是服從物理約束的函數，不是魔法。理解這些約束之後，工程師真正的護城河，不在於誰寫更多行代碼，而在於誰能設計出更好的 Harness——在有限上下文和工具能力下，讓一群 Agent 和少量人組成可控、可驗證、可擴展的工程系統。