Navrhnite raz, spustite všade: Jeden súbor používateľského rozhrania na webe, iOS a Androide
Čo skutočne znamená navrhnúť a spustiť používateľské rozhranie na webe, iOS a Androide: zdieľané rozloženie a pohyb, časti špecifické pre platformu, testovanie a kam sa zmestí ExodeUI.
Core Takeaway
Navrhnite raz, spustite všade znamená, že jeden zdrojový súbor popisuje komponent používateľského rozhrania a každá platforma ho prehrá s runtime, namiesto toho, aby prebudoval rovnaký pohyb v React, SwiftUI a Flutter. Funguje to, keď sa rozloženie, stavy, pohyb a vstupy nachádzajú v zdieľanom súbore, a zostane úprimné, keď navigácia, dostupnosť a systémové gestá zostávajú špecifické pre platformu. ExodeUI podporuje tento model s runtime balíkmi pre React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter.
Čo si vlastne vyžaduje „navrhnúť raz, spustiť všade“.
Vyžaduje si to viac ako len tlačidlo exportu. Zdieľaný súbor musí popisovať, ako je komponent rozmiestnený v rôznych veľkostiach, ako vyzerá v každom stave, ako sa pohybuje medzi stavmi a ako ho aplikácia riadi pomocou vstupov. Každá platforma tiež potrebuje runtime, ktoré dokáže prehrať súbor a prepojiť tieto vstupy so skutočnými udalosťami. Ak niektorý z týchto kúskov chýba, sľub sa zmení na ďalšie odovzdanie.
Zdieľaný súbor vs prebudovanie podľa platformy
Tradičnou cestou je raz navrhnúť a trikrát prebudovať: web v CSS a JavaScript, iOS v SwiftUI a Android v Kotlin alebo Flutter. Každá prestavba prináša malé rozdiely v načasovaní, rozostupoch a manipulácii s gestami. Zdieľaná trasa súboru uchováva definíciu komponentu na jednom mieste a umožňuje každej platforme ju prehrať. Kompromisom je, že medzi súborom a platformou sa nachádza runtime, takže sa vzdávate určitej priamej kontroly nad vykresľovaním špecifickým pre platformu.
Čo by malo zostať špecifické pre platformu
Zdieľaný komponent by nemal predstierať, že každá platforma je rovnaká. Vzory navigácie, gestá späť, systémové dialógy, povolenia a rozhrania API na zjednodušenie ovládania sa líšia. Zdieľaný súbor by mal vlastniť interaktívny vizuálny komponent; hostiteľská aplikácia by mala vlastniť platformu Chrome a sémantické ovládacie prvky okolo nej. Napríklad zdieľané animované tlačidlo môže byť umiestnené vo vnútri natívneho prvku tlačidla, ktorý odhaľuje správnu rolu a označenie.
Ako fungujú runtime
Runtime prečíta súbor, vytvorí vizuálny strom a aktualizuje ho podľa zmeny vstupov. Váš aplikačný kód nastavuje vstupy, ako je stlačenie, vypnutie alebo načítanie, a počúva udalosti, ako je potvrdenie alebo odmietnutie. Pretože vizuálna definícia je skôr dáta než ručne písaný kód na platforme, runtime je to, čo robí ten istý súbor prenosným. Runtime je tiež závislosť, takže zmerajte jeho vplyv na svoju vlastnú zostavu namiesto toho, aby ste predpokladali, že je zadarmo.
Testovanie rovnakého súboru v každom prostredí
Otestujte súbor, kde sa bude spúšťať, nielen v editore. Skontrolujte rozloženie pri najmenšej a najväčšej podporovanej veľkosti, overte každý stav so skutočným obsahom a otestujte vstup dotykom, myšou a klávesnicou samostatne. Potom skontrolujte dostupnosť: poradie zaostrenia, štítky, znížený pohyb a správanie čítačky obrazovky. Zdieľaný súbor znižuje vizuálny posun, ale neodstraňuje potrebu testovania každej platformy.
Kde sa zmestí ExodeUI
ExodeUI ukladá komponent do otvoreného súboru .exode a poskytuje runtime balíčky pre React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter. Súbor môže obsahovať rozloženie a body prerušenia, časové osi, stavové automaty, fyziku pružiny, vstupy a udalosti. Rovnaký súbor je možné upravovať v prehliadači alebo editore na ploche a nástroje na kódovanie AI s ním môžu pracovať prostredníctvom servera MCP.
Kedy nepoužívať jeden zdieľaný súbor
Zdieľaný súbor nie je vhodný, keď rozhranie do veľkej miery závisí od rozhraní API iba pre platformu, keď potrebujete kontrolu na úrovni pixelov nad natívnym vykresľovaním, alebo keď komponentom je väčšinou video alebo 3D scéna. Je to tiež zlé, ak váš tím nemôže otestovať každý cieľ. V týchto prípadoch je kód špecifický pre platformu čestnou voľbou a zdieľaný súbor by mal pokrývať iba časti, ktoré z neho skutočne profitujú.
Snippet implementácie 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()}
/>
);
}Kľúč Principle na zapamätanie
- Dizajn raz a spustenie kdekoľvek si vyžaduje zdieľané rozloženie, stavy, pohyb a vstupy, plus runtime pre každú platformu
- Navigácia, povolenia a rozhrania API by mali zostať špecifické pre platformu
- Runtime je závislosť; zmerajte jeho vplyv na vašu stavbu
- Otestujte každý cieľ z hľadiska rozloženia, vstupu, pohybu a dostupnosti
- ExodeUI poskytuje runtime pre React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter