Проектирайте веднъж, работете навсякъде: Един UI файл в мрежата, iOS и Android
Какво наистина е необходимо, за да проектирате веднъж и да стартирате потребителски интерфейс в мрежата, iOS и Android: споделено оформление и движение, специфични за платформата части, тестване и къде ExodeUI пасва.
Ядро за вкъщи
Проектирай веднъж, изпълнявай навсякъде означава, че един изходен файл описва UI компонент и всяка платформа го възпроизвежда с време за изпълнение, вместо да изгражда отново същото движение в React, SwiftUI и Flutter. Работи, когато оформлението, състоянията, движението и входовете са живи в споделения файл, и остава честно, когато навигацията, достъпността и системните жестове остават специфични за платформата. ExodeUI поддържа този модел с пакети за изпълнение за React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter.
Какво всъщност изисква „дизайни веднъж, работи навсякъде“.
Изисква повече от бутон за експортиране. Споделеният файл трябва да описва как компонентът се разполага с различни размери, как изглежда във всяко състояние, как се движи между състояния и как приложението го управлява с входове. Всяка платформа също се нуждае от време за изпълнение, което може да възпроизведе файла и да свърже тези входове с реални събития. Ако някоя от тези части липсва, обещанието се превръща в друго предаване.
Споделен файл срещу повторно изграждане на платформа
Традиционният път е да се проектира веднъж и да се реконструира три пъти: уеб в CSS и JavaScript, iOS в SwiftUI и Android в Kotlin или Flutter. Всяка реконструкция въвежда малки разлики във времето, разстоянието и обработката на жестове. Маршрутът на споделен файл поддържа дефиницията на компонента на едно място и позволява на всяка платформа да го възпроизвежда. Компромисът е, че време за изпълнение седи между файла и платформата, така че вие се отказвате от някакъв директен контрол върху рендирането, специфично за платформата.
Какво трябва да остане специфично за платформата
Споделеният компонент не трябва да се преструва, че всяка платформа е една и съща. Моделите за навигация, жестовете назад, системните диалози, разрешенията и API за достъпност се различават. Споделеният файл трябва да притежава интерактивния визуален компонент; хост приложението трябва да притежава платформата chrome и семантичните контроли около нея. Например, споделен анимиран бутон може да седи вътре в естествен елемент на бутон, който излага правилната роля и етикет.
Как работят времената за изпълнение
Средата за изпълнение чете файла, изгражда визуалното дърво и го актуализира при промяна на входовете. Кодът на вашето приложение задава входове като натиснат, деактивиран или зареждане и слуша за събития като потвърждение или отхвърляне. Тъй като визуалната дефиниция е по-скоро данни, отколкото ръчно написан код за всяка платформа, времето за изпълнение е това, което прави същия файл преносим. Времето за изпълнение също е зависимост, така че измервайте ефекта му върху вашата собствена компилация, вместо да приемате, че е безплатно.
Тестване на един и същ файл във всяка среда
Тествайте файла, където ще работи, не само в редактора. Проверете оформлението при най-малките и най-големите поддържани размери, проверете всяко състояние с реално съдържание и тествайте въвеждането с докосване, мишка и клавиатура отделно. След това проверете достъпността: ред на фокусиране, етикети, намалено движение и поведение на екранния четец. Споделеният файл намалява визуалното отклонение, но не премахва необходимостта от тестване на всяка платформа.
Където ExodeUI пасва
ExodeUI съхранява компонент в отворен файл .exode и предоставя пакети за изпълнение за React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter. Файлът може да включва оформление и точки на прекъсване, времеви линии, автомати, пролетна физика, входове и събития. Същият файл може да се редактира в браузъра или в редактора на работния плот, а инструментите за кодиране с изкуствен интелект могат да работят върху него чрез 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