Navrhněte jednou, spusťte všude: Jeden soubor uživatelského rozhraní na webu, iOS a Androidu
Co skutečně znamená navrhnout a spustit uživatelské rozhraní na webu, iOS a Androidu: sdílené rozvržení a pohyb, části specifické pro platformu, testování a kam se ExodeUI hodí.
Core Takeaway
Navrhněte jednou, spusťte všude znamená, že jeden zdrojový soubor popisuje komponentu uživatelského rozhraní a každá platforma jej přehrává s běhovým prostředím, namísto přestavby stejného pohybu v React, SwiftUI a Flutter. Funguje, když jsou rozložení, stavy, pohyb a vstupy živé ve sdíleném souboru, a zůstává poctivý, když navigace, přístupnost a systémová gesta zůstávají specifické pro platformu. ExodeUI podporuje tento model s runtime balíčky pro React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter.
Co vlastně vyžaduje „design jednou, běž všude“.
Vyžaduje více než jen tlačítko exportu. Sdílený soubor musí popisovat, jak se komponenta rozkládá v různých velikostech, jak vypadá v každém stavu, jak se pohybuje mezi stavy a jak ji aplikace řídí pomocí vstupů. Každá platforma také potřebuje runtime, které dokáže přehrát soubor a propojit tyto vstupy se skutečnými událostmi. Pokud některý z těchto kusů chybí, slib se změní v další předání.
Sdílený soubor vs přestavba na platformě
Tradiční cestou je navrhnout jednou a třikrát znovu sestavit: web v CSS a JavaScript, iOS v SwiftUI a Android v Kotlin nebo Flutter. Každá přestavba přináší malé rozdíly v načasování, rozestupech a manipulaci s gesty. Sdílená trasa souboru udržuje definici komponenty na jednom místě a umožňuje každé platformě ji přehrát. Kompromisem je, že mezi souborem a platformou je umístěn běhový modul, takže se vzdáváte určité přímé kontroly nad vykreslováním specifickým pro platformu.
Co by mělo zůstat specifické pro platformu
Sdílená komponenta by neměla předstírat, že každá platforma je stejná. Vzory navigace, gesta zpět, systémová dialogová okna, oprávnění a rozhraní API pro usnadnění se liší. Sdílený soubor by měl vlastnit interaktivní vizuální komponentu; hostitelská aplikace by měla vlastnit platformu chrome a sémantické ovládací prvky kolem ní. Například sdílené animované tlačítko může být umístěno uvnitř prvku nativního tlačítka, který odhaluje správnou roli a popisek.
Jak fungují runtime
Běhové prostředí načte soubor, vytvoří vizuální strom a aktualizuje jej podle změny vstupů. Váš aplikační kód nastavuje vstupy, jako je stisknuté, deaktivované nebo načítání, a naslouchá událostem, jako je potvrzení nebo zamítnutí. Protože vizuální definicí jsou data spíše než ručně psaný kód na platformě, je běhové prostředí tím, co dělá stejný soubor přenositelným. Runtime je také závislost, takže měřte jeho vliv na své vlastní sestavení místo toho, abyste předpokládali, že je zdarma.
Testování stejného souboru v každém prostředí
Otestujte soubor, kde poběží, nejen v editoru. Zkontrolujte rozložení v nejmenší a největší podporované velikosti, ověřte každý stav se skutečným obsahem a otestujte vstup dotykem, myší a klávesnicí samostatně. Poté zkontrolujte přístupnost: pořadí zaměření, štítky, omezený pohyb a chování čtečky obrazovky. Sdílený soubor snižuje vizuální posun, ale neodstraňuje nutnost testovat každou platformu.
Kam se hodí ExodeUI
ExodeUI ukládá komponentu do otevřeného souboru .exode a poskytuje runtime balíčky pro React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter. Soubor může obsahovat rozvržení a body přerušení, časové osy, stavové automaty, fyziku pružin, vstupy a události. Stejný soubor lze upravovat v prohlížeči nebo desktopovém editoru a nástroje pro kódování AI s ním mohou pracovat prostřednictvím serveru MCP.
Kdy nepoužít jeden sdílený soubor
Sdílený soubor se nehodí, když rozhraní silně závisí na rozhraní API pouze pro platformu, když potřebujete kontrolu na úrovni pixelů nad nativním vykreslováním nebo když je komponenta většinou video nebo 3D scéna. Je to také špatné, pokud váš tým nemůže otestovat každý cíl. V těchto případech je kód specifický pro platformu čestnou volbou a sdílený soubor by měl pokrývat pouze části, které z něj skutečně těží.
Fragment implementace výroby
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()}
/>
);
}Klíč Principle k zapamatování
- Navrhnout jednou a spustit všude vyžaduje sdílené rozvržení, stavy, pohyb a vstupy a navíc běhové prostředí pro každou platformu
- Navigace, oprávnění a rozhraní API pro usnadnění by měla zůstat specifická pro platformu
- Runtime je závislost; změřte jeho vliv na vaši stavbu
- Otestujte každý cíl z hlediska rozvržení, vstupu, pohybu a dostupnosti
- ExodeUI poskytuje běhové prostředí pro React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter