Design én gang, kjør overalt: Én UI-fil på nettet, iOS og Android
Hva som virkelig trengs for å designe én gang og kjøre et brukergrensesnitt på web, iOS og Android: delt layout og bevegelse, plattformspesifikke deler, testing og hvor ExodeUI passer.
Kjerne takeaway
Design én gang, kjør overalt betyr at én kildefil beskriver en UI-komponent og hver plattform spiller den med en kjøretid, i stedet for å gjenoppbygge den samme bevegelsen i React, SwiftUI og Flutter. Den fungerer når layout, tilstander, bevegelser og innganger er i den delte filen, og den forblir ærlig når navigasjon, tilgjengelighet og systembevegelser forblir plattformspesifikke. ExodeUI støtter denne modellen med kjøretidspakker for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI og Flutter.
Hva "design en gang, løp overalt" faktisk krever
Det krever mer enn en eksportknapp. Den delte filen må beskrive hvordan komponenten ligger i forskjellige størrelser, hvordan den ser ut i hver tilstand, hvordan den beveger seg mellom tilstander og hvordan appen driver den med innganger. Hver plattform trenger også en kjøretid som kan spille av filen og koble disse inngangene til virkelige hendelser. Hvis noen av disse brikkene mangler, blir løftet til en ny overlevering.
Delt fil kontra gjenoppbygging per plattform
Den tradisjonelle ruten er å designe én gang og bygge om tre ganger: web i CSS og JavaScript, iOS i SwiftUI og Android i Kotlin eller Flutter. Hver ombygging introduserer små forskjeller i timing, avstand og gesthåndtering. En delt filrute holder komponentdefinisjonen på ett sted og lar hver plattform spille den. Avveiningen er at en kjøretid sitter mellom filen og plattformen, så du gir opp litt direkte kontroll over plattformspesifikk gjengivelse.
Hva bør forbli plattformspesifikk
En delt komponent skal ikke late som om hver plattform er den samme. Navigasjonsmønstre, tilbakebevegelser, systemdialoger, tillatelser og tilgjengelighets-API-er er forskjellige. Den delte filen skal eie den interaktive visuelle komponenten; vertsappen skal eie plattformen krom og de semantiske kontrollene rundt den. For eksempel kan en delt animert knapp sitte inne i et innebygd knappeelement som viser den riktige rollen og etiketten.
Hvordan kjøretider fungerer
En kjøretid leser filen, bygger det visuelle treet og oppdaterer det etter hvert som inngangene endres. Applikasjonskoden angir innganger som trykket, deaktivert eller laster, og lytter etter hendelser som bekrefte eller avvise. Fordi den visuelle definisjonen er data i stedet for håndskrevet kode per plattform, er det kjøretiden som gjør den samme filen portabel. Kjøretiden er også en avhengighet, så mål effekten på din egen konstruksjon i stedet for å anta at den er gratis.
Tester den samme filen i alle miljøer
Test filen der den skal kjøres, ikke bare i redigeringsprogrammet. Sjekk oppsettet med de minste og største støttede størrelsene, verifiser hver stat med ekte innhold, og test berørings-, mus- og tastaturinndata separat. Sjekk deretter tilgjengelighet: fokusrekkefølge, etiketter, redusert bevegelse og skjermleseroppførsel. En delt fil reduserer visuell drift, men den fjerner ikke behovet for å teste hver plattform.
Hvor ExodeUI passer
ExodeUI lagrer en komponent i en åpen .exode-fil og gir kjøretidspakker for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI og Flutter. Filen kan inkludere layout og bruddpunkter, tidslinjer, tilstandsmaskiner, vårfysikk, innganger og hendelser. Den samme filen kan redigeres i nettleseren eller skrivebordsredigereren, og AI-kodingsverktøy kan fungere på den gjennom MCP-serveren.
Når du ikke skal bruke én delt fil
En delt fil passer dårlig når grensesnittet i stor grad avhenger av API-er som bare er plattform, når du trenger kontroll på pikselnivå over innebygd gjengivelse, eller når komponenten for det meste er en video- eller 3D-scene. Det passer også dårlig hvis laget ditt ikke kan teste hvert mål. I disse tilfellene er plattformspesifikk kode det ærlige valget, og en delt fil bør kun dekke de delene som virkelig drar nytte av den.
Snippet for produksjonsimplementering
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()}
/>
);
}Tast Principles å huske
- Design én gang og kjør overalt trenger delt layout, tilstander, bevegelse og innganger, pluss en kjøretid per plattform
- Navigasjon, tillatelser og tilgjengelighets-APIer bør forbli plattformspesifikke
- En kjøretid er en avhengighet; måle effekten på bygget ditt
- Test hvert mål for layout, input, bevegelse og tilgjengelighet
- ExodeUI gir kjøretider for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI og Flutter