Tervezz egyszer, futtasd mindenhol: egyetlen felhasználói felület fájl az interneten, iOS-en és Androidon
Mire van szükség a felhasználói felület egyszeri megtervezéséhez és futtatásához weben, iOS-en és Androidon: megosztott elrendezés és mozgás, platformspecifikus részek, tesztelés és a ExodeUI illeszkedése.
Core Takeaway
Egyszeri tervezés, mindenhol futtatás azt jelenti, hogy egy forrásfájl leír egy UI-összetevőt, és minden platform futási környezettel játssza le, ahelyett, hogy ugyanazt a mozgást újraépítené a React, SwiftUI és Flutter-ben. Akkor működik, ha az elrendezés, az állapotok, a mozgás és a bemenetek a megosztott fájlban élnek, és őszinte marad, ha a navigáció, a kisegítő lehetőségek és a rendszergesztusok platformspecifikusak maradnak. A ExodeUI támogatja ezt a modellt a React, Vue, Svelte, Angular, Solid, React Native, SwiftUI és Flutter futásidejű csomagokkal.
Amit a "tervezz egyszer, fuss mindenhol" valójában megkövetel
Többet igényel, mint egy export gomb. A megosztott fájlnak le kell írnia, hogy az összetevő hogyan helyezkedik el különböző méretekben, hogyan néz ki az egyes állapotokban, hogyan mozog az állapotok között, és hogyan hajtja meg az alkalmazás bemenetekkel. Minden platformnak szüksége van egy futtatókörnyezetre, amely le tudja játszani a fájlt, és összekapcsolja ezeket a bemeneteket a valós eseményekkel. Ha ezek közül bármelyik hiányzik, az ígéret újabb átadássá válik.
Megosztott fájl és platformonkénti újraépítés
A hagyományos út az egyszeri tervezés és háromszori újraépítés: web CSS és JavaScript, iOS SwiftUI és Android Kotlin vagy Flutter. Minden átépítés kis különbségeket vezet be az időzítésben, a térközben és a gesztuskezelésben. A megosztott fájlútvonal egy helyen tartja a komponensdefiníciót, és lehetővé teszi, hogy minden platform lejátssza azt. A kompromisszum az, hogy egy futtatókörnyezet található a fájl és a platform között, így feladja a platform-specifikus renderelés közvetlen irányítását.
Aminek platformspecifikusnak kell maradnia
Egy megosztott összetevő nem tehet úgy, mintha minden platform ugyanaz. A navigációs minták, a visszafelé irányuló gesztusok, a rendszer párbeszédpanelek, az engedélyek és a kisegítő lehetőségek API-k eltérőek. A megosztott fájlnak kell birtokolnia az interaktív vizuális összetevőt; a gazdagép alkalmazásnak kell birtokolnia a platform Chrome-ot és a körülötte lévő szemantikai vezérlőket. Például egy megosztott animált gomb elhelyezhető egy natív gombelemen belül, amely a megfelelő szerepet és címkét jeleníti meg.
Hogyan működnek a futási idők
A futtatókörnyezet beolvassa a fájlt, létrehozza a vizuális fát, és frissíti azt a bemenetek változásával. Az alkalmazás kódja beállítja az olyan bemeneteket, mint például lenyomva, letiltva vagy betöltve, és figyeli az eseményeket, például a megerősítést vagy az elvetést. Mivel a vizuális definíció platformonként adatok helyett kézzel írt kód, a futási idő teszi ugyanazt a fájlt hordozhatóvá. A futási idő is függőség, ezért mérje meg a hatását a saját buildjére, ahelyett, hogy azt feltételezné, hogy ingyenes.
Ugyanazon fájl tesztelése minden környezetben
Tesztelje a fájlt, ahol futni fog, nem csak a szerkesztőben. Ellenőrizze az elrendezést a legkisebb és legnagyobb támogatott méretben, minden állapotot valódi tartalommal, és külön tesztelje az érintés, az egér és a billentyűzet bevitelét. Ezután ellenőrizze a hozzáférhetőséget: fókuszsorrend, címkék, csökkentett mozgás és képernyőolvasó viselkedése. A megosztott fájl csökkenti a vizuális eltolódást, de nem szünteti meg az egyes platformok tesztelésének szükségességét.
Ahová a ExodeUI illik
A ExodeUI egy komponenst egy nyitott .exode fájlban tárol, és futásidejű csomagokat biztosít a React, Vue, Svelte, Angular, Solid, React Native, SwiftUI és Flutter számára. A fájl tartalmazhat elrendezést és töréspontokat, idővonalakat, állapotgépeket, rugófizikát, bemeneteket és eseményeket. Ugyanez a fájl szerkeszthető a böngészőben vagy az asztali szerkesztőben, és az AI kódoló eszközök dolgozhatnak rajta a MCP szerveren keresztül.
Mikor ne használjon egyetlen megosztott fájlt
A megosztott fájl rosszul illeszkedik, ha az interfész nagymértékben függ a csak platformra vonatkozó API-któl, ha pixelszintű vezérlésre van szüksége a natív megjelenítés felett, vagy ha az összetevő többnyire videó vagy 3D jelenet. Az is rosszul illeszkedik, ha a csapat nem tud minden célpontot tesztelni. Ilyen esetekben a platform-specifikus kód az őszinte választás, és egy megosztott fájlnak csak azokat a részeket kell lefednie, amelyek valóban hasznot húznak belőle.
Gyártási megvalósítási részlet
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()}
/>
);
}Kulcs Principle, amit meg kell jegyezni
- Az egyszeri tervezéshez és mindenhol futtatáshoz megosztott elrendezésre, állapotokra, mozgásra és bemenetekre, valamint platformonkénti futási időre van szüksége
- A navigáció, az engedélyek és a kisegítő lehetőségek API-jának platformfüggőnek kell maradnia
- A futási idő függőség; mérje fel a felépítésére gyakorolt hatását
- Teszteljen minden célt az elrendezés, a bevitel, a mozgás és a hozzáférhetőség szempontjából
- A ExodeUI futási időket biztosít a React, Vue, Svelte, Angular, Solid, React Native, SwiftUI és Flutter számára