Jeden súbor pre návrh používateľského rozhrania: Ako jeden otvorený súbor nahrádza odovzdanie
Pracovný postup návrhu používateľského rozhrania s jedným súborom uchováva rozloženie, stavy, pohyb, logiku a dátové väzby v jednom otvorenom súbore. Čo mení, čo nerieši a ako to ExodeUI využíva.
Core Takeaway
Pracovný postup návrhu používateľského rozhrania s jedným súborom uchováva rozloženie, stavy interakcií, pohyb, logiku a dátové väzby komponentu v jednom otvorenom súbore, namiesto toho, aby sa rozprestieral v súbore návrhu, prototype a kódovej základni. Súbor sa stáva vecou, ktorú dizajnéri upravujú, vývojári kontrolujú a môžu čítať agenti AI. ExodeUI používa tento model: súbor .exode popisuje komponent a runtime balíčky ho prehrávajú v aplikácii.
Čo znamená „jeden súbor“ v dizajne používateľského rozhrania?
To znamená, že komponent má jeden autoritatívny zdroj. Umelecké plátna, stavy visu a stlačenia, hodnoty pružiny, podmienky, ktoré rozhodujú o tom, ktorý stav nastane ako ďalší, a vstupy, ktoré môže vaša aplikácia nastaviť, to všetko funguje v rovnakom dokumente. Nič dôležité nie je ponechané v samostatnej poznámke. Keď sa súbor zmení, zmení sa aj komponent.
Problém s odovzdaním jeden súbor odstráni
Pri typickom odovzdávaní návrhár dodá statický súbor plus prototyp a písomný popis pohybu. Vývojár prebuduje tento pohyb v kóde a obe verzie sa okamžite posunú. Pracovný postup s jedným súborom odstraňuje krok prestavby pre časti, ktoré súbor pokrýva. Neodstraňuje potrebu recenzie, ale dáva recenzentom rovnaký artefakt namiesto dvoch jeho popisov.
Čo ide do otvoreného súboru s návrhom používateľského rozhrania
Presná štruktúra závisí od nástroja, ale užitočný súbor pokrýva rovnaké úlohy:
- Rozloženie vrátane bodov prerušenia a spôsobu preformátovania komponentu
- Stavy interakcie, ako je nečinnosť, vznášanie sa, stlačenie, načítanie, úspech a chyba
- Pohyb vrátane časových línií, fyziky jari a prechodov medzi stavmi
- Logika a podmienky, ktoré rozhodujú o tom, ktorý stav je aktívny
- Vstupy a udalosti, aby kód aplikácie mohol riadiť komponent a reagovať naň
- Dátové väzby pre hodnoty, ktoré pochádzajú z aplikácie pri spustení
Čo zostáva mimo súboru
Komponentný súbor nie je celá aplikácia. Smerovanie, autentifikácia, načítanie údajov, povolenia, analytika a obal na zjednodušenie ovládania okolo interaktívneho ovládacieho prvku zostávajú vo vašej kódovej základni. Navigácia na platforme a systémové gestá zvyčajne zostávajú špecifické pre platformu. Jasné o tejto hranici je dôležité: jednosúborový pracovný tok sa ľahšie osvojuje, keď spracováva interaktívny komponent a ponecháva obavy týkajúce sa aplikácie na aplikáciu.
Môže tím skontrolovať jeden súbor?
Áno, ak je formát otvorený a čitateľný. ExodeUI ukladá komponent do otvoreného súboru .exode JSON, takže zmeny možno porovnávať, kontrolovať a uchovávať v správe verzií. To je praktická výhoda oproti súborom binárneho dizajnu: recenzent môže vidieť, čo sa v súbore zmenilo, a nástroj na kódovanie AI to môže prečítať bez vlastného dekodéra. Otvorenosť neodpovedá na každú otázku riadenia, ale umožňuje kontrolu.
Ako ExodeUI používa jeden súbor
V ExodeUI môže súbor .exode obsahovať rozloženie, body prerušenia, časové osi, stavové stroje, fyziku pružiny, logiku, vstupy a dátové väzby. Runtime balíky prehrajú súbor v React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter. Váš kód odovzdáva vstupy a prijíma udalosti späť namiesto toho, aby opakoval pohyb. Rovnaký súbor je možné otvoriť v prehliadači alebo editore počítača a nástroje na kódovanie AI ho môžu upravovať prostredníctvom servera MCP.
Keď je jeden súbor nesprávna voľba
Jeden súbor sa nehodí na prácu, ktorá nie je interaktívnym komponentom: dlhé video, ťažké 3D scény alebo tabuľa voľného tvaru pre skoré nápady. Nevhodná je aj situácia, keď tím nemá žiadny proces kontroly a potrebuje jeden súbor na presadzovanie noriem sám. Formát môže uľahčiť osvedčené postupy. Nemôže nahradiť prax.
Snippet implementácie výroby
import { ExodeUICanvas } from 'exodeui';
// One component, one file. Layout, states, motion and logic stay in the
// .exode file; the app only supplies inputs and handles events.
export function CheckoutButton({ loading, disabled, onComplete }) {
return (
<ExodeUICanvas
src="/checkout_button.exode"
inputs={{ loading, disabled }}
onTrigger={(name) => name === 'complete' && onComplete()}
/>
);
}Kľúč Principle na zapamätanie
- Pracovný postup s jedným súborom uchováva rozloženie, stavy, pohyb, logiku a vstupy v jednom autoritatívnom dokumente
- Odstraňuje krok prestavby pre interaktívny komponent, nie potrebu kontroly
- Aplikačné záležitosti, ako je smerovanie, overenie a načítanie údajov, zostávajú vo vašej kódovej základni
- Otvorený zdrojový súbor JSON možno porovnávať, verzovať a čítať pomocou nástrojov AI
- ExodeUI prehráva rovnaký súbor .exode cez runtime na webe, v mobilných a desktopových frameworkoch