Architektúra používateľského rozhrania State Machine: Posun za hranicu Rive WebAssembly
Preskúmajte architektúru používateľského rozhrania štátneho stroja. Ako sa stroje s vizuálnym stavom, rozloženie a fyzika odosielajú z jedného súboru do React, Vue a natívnych aplikácií.
Core Takeaway
Zatiaľ čo Rive bol priekopníkom vizuálnych konečných strojov pre interaktívnu vektorovú grafiku, jeho spoliehanie sa na izolované WebGL/Skia plátno vytvára prekážky v dostupnosti a veľkosti balíkov pre produkčné webové aplikácie. Moderné používateľské rozhranie stavového automatu uchováva graf vizuálneho stavu v jednom súbore, ktorý aplikácia riadi prostredníctvom vstupov a udalostí.
Prečo štátne stroje zmenili pohybový dizajn
Pred stavovými automatmi bola interakčná logika chaotickou sieťou boolovských premenných (isHovered, isClicked, isExpanded, isError). Stavové automaty poskytujú formálnu matematickú jasnosť: komponent má definované stavy, diskrétne prechody a deterministické spúšťače.
Snippet implementácie výroby
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function CheckoutButton() {
return (
<ExodeUICanvas
src="/checkout.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}