Proiectați o dată, rulați peste tot: un fișier UI pe web, iOS și Android
Ce este nevoie cu adevărat pentru a proiecta o singură dată și a rula o interfață de utilizare pe web, iOS și Android: aspect și mișcare partajate, părți specifice platformei, testare și unde se potrivește ExodeUI.
Core Takeaway
Proiectați o dată, rulați peste tot înseamnă că un fișier sursă descrie o componentă a interfeței de utilizare și fiecare platformă o redă cu un timp de rulare, în loc să reconstruiască aceeași mișcare în React, SwiftUI și Flutter. Funcționează atunci când aspectul, stările, mișcarea și intrările se află în fișierul partajat și rămâne sincer atunci când navigarea, accesibilitatea și gesturile sistemului rămân specifice platformei. ExodeUI acceptă acest model cu pachete de rulare pentru React, Vue, Svelte, Angular, Solid, React Native, SwiftUI și Flutter.
Ce necesită de fapt „proiectați o dată, rulați peste tot”.
Este nevoie de mai mult decât un buton de export. Fișierul partajat trebuie să descrie modul în care componenta este așezată la diferite dimensiuni, cum arată în fiecare stare, cum se mișcă între stări și cum o conduce aplicația cu intrări. Fiecare platformă are nevoie, de asemenea, de un timp de rulare care poate reda fișierul și poate conecta acele intrări la evenimente reale. Dacă vreuna dintre acele piese lipsește, promisiunea se transformă într-un alt transfer.
Fișier partajat vs reconstruire pe platformă
Ruta tradițională este de a proiecta o dată și de a reconstrui de trei ori: web în CSS și JavaScript, iOS în SwiftUI și Android în Kotlin sau Flutter. Fiecare reconstrucție introduce mici diferențe de sincronizare, spațiere și manipulare a gesturilor. O rută de fișier partajată păstrează definiția componentei într-un singur loc și permite fiecărei platforme să o joace. Compensația este că un timp de execuție se află între fișier și platformă, așa că renunțați la un control direct asupra redării specifice platformei.
Ce ar trebui să rămână specific platformei
O componentă partajată nu ar trebui să pretindă că fiecare platformă este aceeași. Modelele de navigare, gesturile din spate, dialogurile de sistem, permisiunile și API-urile de accesibilitate diferă. Fișierul partajat ar trebui să dețină componenta vizuală interactivă; aplicația gazdă ar trebui să dețină platforma Chrome și controalele semantice din jurul acesteia. De exemplu, un buton animat partajat poate sta în interiorul unui element de buton nativ care expune rolul și eticheta potrivite.
Cum funcționează timpii de execuție
Un runtime citește fișierul, construiește arborele vizual și îl actualizează pe măsură ce intrările se modifică. Codul aplicației dvs. setează intrări, cum ar fi apăsat, dezactivat sau încărcat, și ascultă evenimente precum confirmarea sau respingerea. Deoarece definiția vizuală este mai degrabă date decât cod scris de mână pe platformă, timpul de execuție este ceea ce face ca același fișier să fie portabil. Timpul de execuție este, de asemenea, o dependență, așa că măsurați-i efectul asupra propriei dvs. build în loc să presupuneți că este gratuit.
Testarea aceluiași fișier în fiecare mediu
Testați fișierul unde va rula, nu numai în editor. Verificați aspectul la cele mai mici și cele mai mari dimensiuni acceptate, verificați fiecare stare cu conținut real și testați separat introducerea prin atingere, mouse și tastatură. Apoi verificați accesibilitatea: ordinea focalizării, etichetele, mișcarea redusă și comportamentul cititorului de ecran. Un fișier partajat reduce deviația vizuală, dar nu elimină necesitatea de a testa fiecare platformă.
Unde se potrivește ExodeUI
ExodeUI stochează o componentă într-un fișier .exode deschis și oferă pachete de rulare pentru React, Vue, Svelte, Angular, Solid, React Native, SwiftUI și Flutter. Fișierul poate include aspect și puncte de întrerupere, cronologie, mașini de stare, fizica primăverii, intrări și evenimente. Același fișier poate fi editat în browser sau editor de desktop, iar instrumentele de codare AI pot lucra la el prin serverul MCP.
Când să nu folosiți un fișier partajat
Un fișier partajat este o potrivire proastă atunci când interfața depinde în mare măsură de API-uri doar pentru platformă, când aveți nevoie de control la nivel de pixeli asupra redării native sau când componenta este în principal o scenă video sau 3D. De asemenea, este o potrivire slabă dacă echipa ta nu poate testa fiecare țintă. În aceste cazuri, codul specific platformei este alegerea sinceră, iar un fișier partajat ar trebui să acopere doar părțile care beneficiază cu adevărat de el.
Fragment de implementare a producției
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()}
/>
);
}Cheie Principles de reținut
- Proiectați o singură dată și rulați peste tot necesită un aspect, stări, mișcare și intrări partajate, plus un timp de rulare per platformă
- API-urile de navigare, permisiuni și accesibilitate ar trebui să rămână specifice platformei
- Un timp de execuție este o dependență; măsurați efectul acesteia asupra construcției dvs
- Testați fiecare țintă pentru aspect, intrare, mișcare și accesibilitate
- ExodeUI oferă timpi de rulare pentru React, Vue, Svelte, Angular, Solid, React Native, SwiftUI și Flutter