Suunnittele kerran, suorita kaikkialla: Yksi käyttöliittymätiedosto verkossa, iOS:ssä ja Androidissa
Mitä todella tarvitaan kerran suunnittelemaan ja käyttämään käyttöliittymää verkossa, iOS:ssä ja Androidissa: jaettu asettelu ja liike, alustakohtaiset osat, testaus ja ExodeUI:n sopivuus.
Core Takeaway
Suunnittele kerran, suorita kaikkialla tarkoittaa, että yksi lähdetiedosto kuvaa käyttöliittymäkomponentin ja jokainen alusta toistaa sen ajonaikaisesti sen sijaan, että rakennettaisiin uudelleen sama liike React:ssä, SwiftUI:ssä ja Flutter:ssä. Se toimii, kun asettelu, tilat, liike ja syötteet ovat jaetussa tiedostossa, ja se pysyy rehellisenä, kun navigointi, esteettömyys ja järjestelmäeleet pysyvät alustakohtaisina. ExodeUI tukee tätä mallia ajonaikaisilla paketeilla React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ja Flutter.
Mitä "suunnittelu kerran, aja kaikkialle" oikeastaan vaatii
Se vaatii enemmän kuin vientipainikkeen. Jaetun tiedoston tulee kuvata, miten komponentti asettuu eri kokoisiin, miltä se näyttää kussakin tilassa, miten se liikkuu tilojen välillä ja miten sovellus ohjaa sitä syötteillä. Jokainen alusta tarvitsee myös suoritusajan, joka voi toistaa tiedoston ja yhdistää ne todellisiin tapahtumiin. Jos jokin näistä palasista puuttuu, lupaus muuttuu uudeksi kanavanvaihdoksi.
Jaettu tiedosto vs. alustakohtainen uudelleenmuodostus
Perinteinen tapa on suunnitella kerran ja rakentaa uudelleen kolme kertaa: verkko CSS:ssä ja JavaScript:ssä, iOS:ssä SwiftUI ja Android muodossa Kotlin tai Flutter. Jokainen uusinta tuo pieniä eroja ajoituksessa, välissä ja eleiden käsittelyssä. Jaettu tiedostoreitti pitää komponenttimäärityksen yhdessä paikassa ja antaa jokaisen alustan toistaa sitä. Kompromissi on, että ajonaika on tiedoston ja alustan välissä, joten luovut suorasta alustakohtaisen renderöinnin hallinnasta.
Minkä pitäisi pysyä alustakohtaisena
Jaetun komponentin ei pitäisi teeskennellä, että kaikki alustat ovat samat. Navigointimallit, takaisin-eleet, järjestelmän valintaikkunat, käyttöoikeudet ja esteettömyyssovellusliittymät vaihtelevat. Jaetun tiedoston tulee omistaa interaktiivinen visuaalinen komponentti; isäntäsovelluksen tulee omistaa alustan kromi ja sen ympärillä olevat semanttiset säätimet. Esimerkiksi jaettu animoitu painike voi sijaita alkuperäisen painikeelementin sisällä, joka paljastaa oikean roolin ja tunnisteen.
Kuinka suoritusajat toimivat
Ajonaika lukee tiedoston, rakentaa visuaalisen puun ja päivittää sen syötteiden muuttuessa. Sovelluskoodisi asettaa syötteitä, kuten painettu, poistettu käytöstä tai lataus, ja kuuntelee tapahtumia, kuten vahvista tai hylkää. Koska visuaalinen määritelmä on dataa eikä käsin kirjoitettua koodia alustaa kohden, suoritusaika tekee samasta tiedostosta kannettavan. Suoritusaika on myös riippuvuus, joten mittaa sen vaikutus omaan koontiversioosi sen sijaan, että olettaisi sen olevan ilmainen.
Samaa tiedostoa testataan joka ympäristössä
Testaa tiedostoa siellä, missä se ajetaan, ei vain editorissa. Tarkista asettelu pienimmässä ja suurimmassa tuetussa koossa, tarkista jokainen tila todellisella sisällöllä ja testaa kosketus-, hiiri- ja näppäimistösyöttö erikseen. Tarkista sitten käytettävyys: tarkennusjärjestys, tarrat, alennettu liike ja näytönlukijan käyttäytyminen. Jaettu tiedosto vähentää visuaalista ajautumista, mutta se ei poista tarvetta testata jokaista alustaa.
Mihin ExodeUI sopii
ExodeUI tallentaa komponentin avoimeen .exode-tiedostoon ja tarjoaa ajonaikaisia paketteja malleille React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ja Flutter. Tiedosto voi sisältää asettelua ja keskeytyspisteitä, aikajanat, tilakoneita, jousifysiikkaa, syötteitä ja tapahtumia. Samaa tiedostoa voidaan muokata selaimessa tai työpöydän editorissa, ja tekoälyn koodaustyökalut voivat toimia sen kanssa MCP-palvelimen kautta.
Milloin ei käytetä yhtä jaettua tiedostoa
Jaettu tiedosto sopii huonosti, kun käyttöliittymä on voimakkaasti riippuvainen alustan sovellusliittymistä, kun tarvitset pikselitason hallinnan alkuperäiseen renderöintiin tai kun komponentti on enimmäkseen video- tai 3D-näkymä. Se on myös huono, jos joukkueesi ei voi testata jokaista tavoitetta. Näissä tapauksissa alustakohtainen koodi on rehellinen valinta, ja jaetun tiedoston tulisi kattaa vain ne osat, jotka siitä aidosti hyötyvät.
Tuotannon toteutuskatkelma
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()}
/>
);
}Avain Principles muistettavat
- Suunnittele kerran ja aja kaikkialla tarvitsee jaetun asettelun, tilat, liikkeen ja syötteet sekä suoritusajan alustaa kohden
- Navigoinnin, käyttöoikeuksien ja esteettömyyssovellusliittymien tulisi pysyä alustakohtaisina
- Suoritusaika on riippuvuus; mittaa sen vaikutus rakentamiseen
- Testaa jokaisen kohteen asettelua, syötettä, liikettä ja saavutettavuutta
- ExodeUI tarjoaa käyttöajat malleille React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ja Flutter