State Machine UI: Determinisztikus, hibamentes interfészek építése
Ismerje meg, hogyan szüntetik meg a vizuális állapotgépek a lehetetlen felhasználói felület állapotokat, egyszerűsítik le az összetett interaktív komponenseket, és hogyan hozhatnak létre determinisztikus, hibamentes interfészek a React-ben.
Core Takeaway
A felhasználói felület állapotgépe egy matematikai modell, amely leírja az összes érvényes állapotot, amelyet egy interfész-összetevő elfoglalhat, és az ezen állapotok közötti explicit átmeneteket, amelyeket a felhasználói események vagy rendszerfeltételek váltanak ki. Az állapotgépek a felhasználói felületi hibák teljes kategóriáit kiküszöbölik azáltal, hogy „lehetetlen állapotokat” tesznek – a betöltési pörgettyű és a siker pipa nem jelenhet meg egyszerre, ha az állapotgép tiltja ezt a kombinációt.
A probléma állapota gépek megoldása
A legtöbb UI hiba olyan összetevőkből származik, amelyek logikailag lehetetlen állapotokba léphetnek. Klasszikus példa: egy űrlapbeküldő gomb, amelynek nincs kifejezett állapotmodellje, egyszerre lehet „betöltési” és „letiltott” állapotban két külön logikai jelzőből. Az állapotgép ezt úgy akadályozza meg, hogy megköveteli, hogy a komponens mindig pontosan egy jól meghatározott állapotban legyen.
- "Boolean flag pokol" – isBetöltés, isLetiltva, isError, isSuccess minden ütközik
- Versenykörülmények, ahol a gyors felhasználók egyszerre több állapotot váltanak ki
- Átmeneti hibák, ahol az animációk helytelen köztes helyekről indulnak
- Fejlesztői kognitív terhelés n × n jelzőkombináció követéséből a kód áttekintése során
Alapvető állapotgép-koncepciók
Az állapotgépek állapotok véges halmazából, az átmeneteket kiváltó események szókincséből és olyan védőfeltételekből állnak, amelyek meghatározzák, hogy az átmenet megengedett-e.
államok
Minden állapot az összetevő egy meghatározott állapotát jelenti. Példa adatlekérő összetevőre: tétlen, betöltés, siker, hiba, frissítés.
Események / Átmenetek
Az események állapotváltozásokat váltanak ki. A „KÜLDÉS” átállítja az űrlapot tétlen állapotból betöltésbe. A „SIKER” átmenet a betöltésről a sikerre. Az „ERROR” betöltésről hibára vált át.
Gárdisták
Feltételek, amelyeknek igaznak kell lenniük a tűzre való átmenethez. A "BEADÁS" esemény csak akkor válthatja ki az üresjárati → betöltési átmenetet, ha az űrlapellenőrzési őr átmegy.
Kontextus / Kiterjesztett állapot
A gép által hordozott segédadatok (felhasználói bemeneti értékek, hibaüzenetek, betöltött adatok) az aktuális állapotnév mellett.
Állapotgépek ExodeUI-ben
A ExodeUI vizuális csomópont-gráf állapotgép-szerkesztőt biztosít. Az állapotokat körökként rajzolja, eseményeket ábrázoló címkézett nyilakkal kapcsolja össze őket, és minden állapothoz rugós animációkat és vizuális tulajdonságváltozásokat csatol. A gép a .exode fájlba van mentve: a React-ben a ExodeUICanvas-szal tölti be és hajtja át a bemeneteken, a Swiftben pedig a ExodeUIControlleren keresztül.
Gyártási megvalósítási részlet
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 AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}