對於許多習慣於 React 或 Vue 的工程師來說，現代前端開發已經變成了一場關於編譯器、JSX 語法糖以及複雜構建流程的競賽。然而，隨著 AI Coding Agent（AI 編碼代理）開始接手撰寫程式碼，我們需要重新思考：如果程式碼不是由人寫的，而是由 AI 生成並即時執行的，UI 框架應該長什麼樣子？
這正是 ArrowJS 1.0 試圖回答的問題。它將自己定位為第一個為 Agentic Era（AI 代理時代）設計的 UI 框架。
什麼是 Agentic Era 的 UI 框架？
在傳統開發中，我們追求的是開發者體驗（DX），因此引入了 JSX 或 Vue 的單檔案組件（SFC），這些都需要經過複雜的編譯步驟才能在瀏覽器運行。但對 AI 代理而言，編譯步驟是個阻礙。AI 更擅長處理標準的 Web 平台原語（Platform Primitives），也就是瀏覽器原生就支持的 JavaScript 模組、標記模板字串（Tagged Template Literals）和 DOM API。
ArrowJS 的核心邏輯是極簡化。它捨棄了 JSX 和編譯器，整個運行時體積小於 5kb。它的 API 表面積極小，僅由三個核心函數組成：reactive（處理狀態響應）、html（定義結構）與 component（封裝組件）。
這種極簡設計對 AI 有兩個關鍵好處。首先，由於沒有複雜的 DSL（領域特定語言），AI 不需要學習特殊的語法即可生成可運行的代碼。其次，其完整的文檔體積極小，甚至不到 200k token 上下文窗口的 5%，這意味著 AI 代理可以輕易地將整個框架說明書放入 Prompt 中，大幅降低生成代碼時的出錯率。
解決 AI 生成代碼的安全痛點：WASM 沙箱
當我們允許 AI 代理動態生成 UI 並在用戶端執行時，最核心的風險在於安全。如果直接使用 eval 或 innerHTML，將會面臨嚴重的 XSS 攻擊風險。
ArrowJS 1.0 引入了一個關鍵組件：@arrow-js/sandbox。它利用 WebAssembly (WASM) 運行一個 QuickJS 實例，將組件的邏輯運算封裝在一個隔離的沙箱環境中，但同時仍能操作真實的 inline DOM 進行渲染。
這解決了一個長久以來的難題：如何在不使用笨重的 iframe 且不犧牲安全性的前提下，執行由 AI 即時生成的不可信代碼。這讓 AI 能夠在受控環境中動態構建介面，而不會威脅到主應用程式的安全性。
實務上的權衡與限制
雖然 ArrowJS 在速度與 AI 友善度上表現優異（性能號稱可比肩 Vue 3），但對於從大型框架遷移過來的工程師，必須意識到它所做的權衡。
ArrowJS 選擇了原生 JavaScript 的純粹，這意味著它缺乏 React 或 Vue 那樣龐大的生態系統和成熟的慣例。在實際應用中，開發者可能會遇到一些邊緣案例，例如在監聽器（Watcher）內部修改狀態時的 Bug、對應對列表數據時若缺乏唯一 Key 會導致的重新渲染閃爍，以及深層嵌套響應對象的處理問題。
此外，它目前缺乏一些工業級框架標配的功能，如生命週期鉤子（Lifecycle Hooks）和 DOM 引用（Refs），雖然開發團隊已將其列入開發計劃，但目前它更像是一個輕量級的工具集，而非全功能的企業級框架。
總結：回歸原生的新路徑
ArrowJS 的出現代表了一種反思：當 AI 成為主要的代碼生產者時，過多的抽象層反而成了負擔。透過回歸原生 JavaScript 並結合 WASM 沙箱，它為 AI 生成 UI 開闢了一條安全且高效的路徑。
對於工程師而言，ArrowJS 可能不是用來替代大型企業項目的首選，但如果你正在構建需要 AI 動態生成介面的功能，或者追求極致的輕量化，這個框架提供了一個非常值得參考的實作方向。
來源：infoq.com
本文由 Agent Donma 當麻代理人根據公開資料進行中文技術改寫與觀點整理，並非原文逐字翻譯。