Eén keer ontwerpen, overal uitvoeren: één UI-bestand voor internet, iOS en Android
Wat er echt nodig is om één keer een gebruikersinterface te ontwerpen en uit te voeren op internet, iOS en Android: gedeelde lay-out en beweging, platformspecifieke onderdelen, testen en waar ExodeUI past.
Kern afhaalmaaltijd
Eén keer ontwerpen, overal uitvoeren betekent dat één bronbestand een UI-component beschrijft en dat elk platform dit met een runtime afspeelt, in plaats van dezelfde beweging opnieuw op te bouwen in React, SwiftUI en Flutter. Het werkt wanneer lay-out, statussen, beweging en invoer live in het gedeelde bestand staan, en het blijft eerlijk wanneer navigatie, toegankelijkheid en systeemgebaren platformspecifiek blijven. ExodeUI ondersteunt dit model met runtime-pakketten voor React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter.
Wat ‘één keer ontwerpen, overal uitvoeren’ eigenlijk vereist
Het vereist meer dan een exportknop. Het gedeelde bestand moet beschrijven hoe het onderdeel in verschillende groottes is ingedeeld, hoe het er in elke staat uitziet, hoe het tussen staten beweegt en hoe de app het aanstuurt met invoer. Elk platform heeft ook een runtime nodig die het bestand kan afspelen en die invoer kan verbinden met echte gebeurtenissen. Als een van die stukjes ontbreekt, verandert de belofte in een nieuwe overdracht.
Gedeeld bestand versus opnieuw opbouwen per platform
De traditionele route is om één keer te ontwerpen en drie keer opnieuw op te bouwen: web in CSS en JavaScript, iOS in SwiftUI en Android in Kotlin of Flutter. Elke herbouw introduceert kleine verschillen in timing, spatiëring en gebarenverwerking. Een gedeelde bestandsroute houdt de componentdefinitie op één plek en laat elk platform deze afspelen. De wisselwerking is dat er een runtime tussen het bestand en het platform zit, waardoor je enige directe controle over platformspecifieke weergave opgeeft.
Wat moet platformspecifiek blijven
Een gedeelde component mag niet doen alsof elk platform hetzelfde is. Navigatiepatronen, teruggebaren, systeemdialogen, machtigingen en toegankelijkheids-API's verschillen. Het gedeelde bestand moet eigenaar zijn van de interactieve visuele component; de host-app moet eigenaar zijn van het platformchroom en de semantische bedieningselementen eromheen. Een gedeelde geanimeerde knop kan bijvoorbeeld in een native knopelement zitten dat de juiste rol en het juiste label weergeeft.
Hoe looptijden werken
Een runtime leest het bestand, bouwt de visuele boom op en werkt deze bij als de invoer verandert. Uw applicatiecode stelt invoer in zoals ingedrukt, uitgeschakeld of geladen, en luistert naar gebeurtenissen zoals bevestigen of negeren. Omdat de visuele definitie uit gegevens bestaat en niet uit handgeschreven code per platform, is het de runtime die hetzelfde bestand draagbaar maakt. De runtime is ook een afhankelijkheid, dus meet het effect ervan op uw eigen build in plaats van aan te nemen dat deze gratis is.
Hetzelfde bestand testen op elke omgeving
Test het bestand waar het zal worden uitgevoerd, niet alleen in de editor. Controleer de lay-out op de kleinste en grootste ondersteunde formaten, verifieer elke status met echte inhoud en test de aanraak-, muis- en toetsenbordinvoer afzonderlijk. Controleer vervolgens de toegankelijkheid: focusvolgorde, labels, verminderde beweging en schermlezergedrag. Een gedeeld bestand vermindert de visuele drift, maar neemt niet de noodzaak weg om elk platform te testen.
Waar ExodeUI past
ExodeUI slaat een component op in een open .exode-bestand en biedt runtime-pakketten voor React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter. Het bestand kan lay-out en breekpunten, tijdlijnen, toestandsmachines, veerfysica, invoer en gebeurtenissen bevatten. Hetzelfde bestand kan worden bewerkt in de browser of desktop-editor, en AI-coderingstools kunnen eraan werken via de MCP-server.
Wanneer u één gedeeld bestand niet gebruikt
Een gedeeld bestand past niet goed als de interface sterk afhankelijk is van platform-only API's, als je controle op pixelniveau nodig hebt over native rendering, of als de component voornamelijk uit een video- of 3D-scène bestaat. Het past ook niet goed als uw team niet elk doel kan testen. In die gevallen is platformspecifieke code de eerlijke keuze, en zou een gedeeld bestand alleen de delen moeten bestrijken die er echt profijt van hebben.
Productie-implementatiefragment
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()}
/>
);
}Toets Principles in om te onthouden
- Eén keer ontwerpen en overal uitvoeren heeft een gedeelde lay-out, status, beweging en invoer nodig, plus een runtime per platform
- Navigatie-, machtigingen- en toegankelijkheids-API's moeten platformspecifiek blijven
- Een runtime is een afhankelijkheid; meet het effect ervan op uw build
- Test elk doel op lay-out, invoer, beweging en toegankelijkheid
- ExodeUI biedt runtimes voor React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter