Дизайн один раз, запуск скрізь: один файл інтерфейсу користувача в Інтернеті, iOS і Android
Що насправді потрібно, щоб один раз спроектувати та запустити інтерфейс користувача в Інтернеті, на iOS та Android: спільний макет і рух, частини, що стосуються платформи, тестування та де підходить ExodeUI.
Основний винос
Дизайн один раз, запуск скрізь означає, що один вихідний файл описує компонент інтерфейсу користувача, і кожна платформа відтворює його з часом виконання, замість того, щоб перебудовувати той самий рух у React, SwiftUI і Flutter. Він працює, коли макет, стани, рух і введення знаходяться в спільному файлі, і він залишається чесним, коли навігація, доступність і системні жести залишаються залежними від платформи. ExodeUI підтримує цю модель за допомогою пакетів часу виконання для React, Vue, Svelte, Angular, Solid, React Native, SwiftUI і Flutter.
Що насправді вимагає «спроектуй один раз, запусти скрізь».
Для цього потрібно більше, ніж кнопка експорту. Спільний файл має описувати, як компонент розміщується в різних розмірах, як він виглядає в кожному стані, як він переміщується між станами та як програма керує ним за допомогою вхідних даних. Кожна платформа також потребує середовища виконання, яке може відтворювати файл і підключати ці вхідні дані до реальних подій. Якщо якась із цих частин відсутня, обіцянка перетворюється на іншу передачу.
Спільний файл проти відновлення для кожної платформи
Традиційний шлях полягає в тому, щоб спроектувати один раз і тричі перебудувати: веб у CSS і JavaScript, iOS у SwiftUI і Android у Kotlin або Flutter. Кожна перебудова вносить невеликі відмінності в часі, інтервалі та обробці жестів. Спільний маршрут файлу зберігає визначення компонента в одному місці та дозволяє кожній платформі відтворювати його. Компроміс полягає в тому, що середовище виконання знаходиться між файлом і платформою, тому ви відмовляєтеся від певного прямого контролю над відтворенням на платформі.
Що має залежати від платформи
Спільний компонент не повинен вдавати, що всі платформи однакові. Шаблони навігації, жести назад, системні діалоги, дозволи та API спеціальних можливостей відрізняються. Спільний файл повинен володіти інтерактивним візуальним компонентом; хост-додаток має володіти хромом платформи та семантичними елементами керування навколо нього. Наприклад, спільна анімована кнопка може розташовуватися всередині власного елемента кнопки, який показує правильну роль і мітку.
Як працюють середовища виконання
Середа виконання читає файл, створює візуальне дерево та оновлює його, коли змінюються вхідні дані. Ваш код програми встановлює такі введення, як натиснуто, вимкнено або завантаження, і прослуховує такі події, як підтвердження або відхилення. Оскільки візуальне визначення — це дані, а не рукописний код для кожної платформи, середовище виконання — це те, що робить той самий файл переносимим. Середовище виконання також є залежністю, тому вимірюйте його вплив на вашу власну збірку, а не припускайте, що вона безкоштовна.
Тестування того самого файлу в кожному середовищі
Перевірте файл там, де він буде працювати, а не тільки в редакторі. Перевірте макет у найменшому та найбільшому підтримуваних розмірах, перевірте кожен стан із реальним вмістом і перевірте введення дотиком, мишею та клавіатурою окремо. Потім перевірте доступність: порядок фокусування, мітки, зменшення руху та поведінку програми зчитування з екрана. Спільний файл зменшує візуальний дрейф, але не усуває необхідності тестувати кожну платформу.
Куди підходить ExodeUI
ExodeUI зберігає компонент у відкритому файлі .exode і надає пакети часу виконання для React, Vue, Svelte, Angular, Solid, React Native, SwiftUI і Flutter. Файл може містити макет і точки зупину, часові шкали, кінцеві автомати, весняну фізику, вхідні дані та події. Той самий файл можна редагувати в браузері або редакторі робочого столу, а інструменти кодування AI можуть працювати з ним через сервер 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