設計一次，到處運行：跨 Web、iOS 和 Android 的一個 UI 文件
設計一次並在 Web、iOS 和 Android 上運行 UI 真正需要什麼：共享佈局和動作、特定於平台的部分、測試以及 ExodeUI 適合的位置。
核心要點
設計一次，到處運行意味著一個原始檔案描述一個 UI 元件，每個平台都在運行時播放它，而不是在 React、SwiftUI 和 Flutter 中重建相同的動作。當佈局、狀態、動作和輸入存在於共享文件中時，它會起作用；當導航、可訪問性和系統手勢保持特定於平台時，它會保持誠實。 ExodeUI 透過 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 的運行時包支援此機型。
「設計一次，到處運行」實際上需要什麼
它需要的不僅僅是一個導出按鈕。共用檔案必須描述元件如何以不同大小佈局、每個狀態下的外觀、它如何在狀態之間移動以及應用程式如何透過輸入驅動它。每個平台還需要一個可以播放檔案並將這些輸入連接到真實事件的運行時。如果其中任何一個部分缺失，承諾就會變成另一次交接。
共享文件與每個平台重建
傳統的路線是設計一次，重建三次：Web 為 CSS 和 JavaScript，iOS 為 SwiftUI，Android 為 Kotlin 或 Flutter。每次重建都會在時間、間距和手勢處理方面引入微小的差異。共享檔案路由將元件定義保留在一處，並讓每個平台都可以播放它。權衡是運行時位於文件和平台之間，因此您放棄了對特定於平台的渲染的一些直接控制。
什麼應該保持特定於平台
共用元件不應假裝每個平台都是相同的。導航模式、後退手勢、系統對話方塊、權限和輔助功能 API 有所不同。共享文件應擁有互動式視覺組件；主機應用程式應該擁有平台鑲邊及其周圍的語義控制。例如，共用動畫按鈕可以位於公開正確角色和標籤的本機按鈕元素內。
運行時如何運作
運行時讀取文件，建立視覺化樹並在輸入更改時更新它。您的應用程式程式碼設定按下、停用或載入等輸入，並偵聽確認或關閉等事件。由於視覺化定義是資料而不是每個平台的手寫程式碼，因此在運行時使相同檔案可移植。運行時也是一個依賴項，因此請衡量它對您自己的構建的影響，而不是假設它是免費的。
在每個環境上測試相同的文件
測試檔案將在哪裡運行，而不僅僅是在編輯器中。檢查支援的最小和最大尺寸的佈局，用真實內容驗證每個狀態，並分別測試觸控、滑鼠和鍵盤輸入。然後檢查可訪問性：焦點順序、標籤、減少運動和螢幕閱讀器行為。共享檔案可以減少視覺漂移，但並不能消除測試每個平台的需要。
ExodeUI 適合的地方
ExodeUI 將元件儲存在開啟的 .exode 檔案中，並為 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 ZQX44X 提供運行時套件。此文件可以包括佈局和斷點、時間軸、狀態機、彈簧物理、輸入和事件。可以在瀏覽器或桌面編輯器中編輯相同文件，AI編碼工具可以透過MCP伺服器進行處理。
何時不使用一個共享文件
當介面嚴重依賴純平台 API、需要對本機渲染進行像素級控製或元件主要是視訊或 3D 場景時，共用檔案不太合適。如果您的團隊無法測試每個目標，那麼它也不適合。在這些情況下，特定於平台的程式碼是誠實的選擇，並且共享文件應該僅涵蓋真正從中受益的部分。
生產實施片段
import { ExodeUICanvas } from 'exodeui';
// The same component file can be played by the runtime your app already uses.
// Web, React Native, SwiftUI and Flutter packages read the same .exode source.
export function ShareSheet({ open, progress, onClose }) {
return (
<ExodeUICanvas
src="/share_sheet.exode"
inputs={{ open, progress }}
onTrigger={(name) => name === 'close' && onClose()}
/>
);
}要記住的關鍵 Principle
- 設計一次，隨處運行需要共享佈局、狀態、運動和輸入，以及每個平台的運行時
- 導航、權限和輔助功能 API 應保持特定於平台
- 運行時是一種依賴；衡量它對您的建置的影響
- 測試每個目標的佈局、輸入、運動和可訪問性
- ExodeUI 為 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 提供運行時