UI State Machine: Vytváranie deterministických rozhraní bez chýb
Zistite, ako vizuálne stavové stroje eliminujú nemožné stavy používateľského rozhrania, zjednodušujú zložité interaktívne komponenty a vytvárajú deterministické rozhrania bez chýb v React.
Core Takeaway
Stavový automat používateľského rozhrania je matematický model, ktorý popisuje všetky platné stavy, ktoré môže komponent rozhrania zaberať, a explicitné prechody medzi týmito stavmi spúšťané používateľskými udalosťami alebo systémovými podmienkami. Stavové automaty eliminujú celé kategórie chýb používateľského rozhrania tým, že znemožnia „nemožné stavy“ – váš číselník načítania a začiarknutie úspešnosti sa nemôžu zobraziť súčasne, ak váš stavový automat túto kombináciu zakazuje.
Problémový stav automaty riešia
Väčšina chýb používateľského rozhrania pochádza z komponentov, ktoré sa môžu dostať do logicky nemožných stavov. Klasický príklad: tlačidlo odoslania formulára, ktoré nemá žiadny explicitný model stavu, môže byť súčasne v stave „načítavanie“ a stave „vypnuté“ z dvoch samostatných boolovských príznakov. Stavový automat tomu bráni tým, že vyžaduje, aby bol komponent v každom okamihu vždy presne v jednom presne definovanom stave.
- "Boolean flag hell" — isLoading, isDisabled, isError, isSuccess all konfliktné
- Závodné podmienky, pri ktorých rýchli používatelia spúšťajú viacero stavov súčasne
- Chyby pri prechode, kedy animácie začínajú z nesprávnych medzipoloh
- Kognitívna záťaž vývojára zo sledovania n × n kombinácií príznakov pri kontrole kódu
Základné koncepty štátnych strojov
Stavové automaty pozostávajú z konečnej množiny stavov, slovníka udalostí, ktoré môžu spustiť prechody, a ochranných podmienok, ktoré určujú, či je prechod povolený.
štátov
Každý stav predstavuje špecifický stav komponentu. Príklad komponentu na načítanie údajov: nečinný, načítavanie, úspech, chyba, obnovovanie.
Udalosti / Prechody
Udalosti spúšťajú zmeny stavu. "ODOSLAŤ" prepne formulár z nečinnosti na načítavanie. „ÚSPECH“ prechádza z načítania k úspechu. "ERROR" prechádza z načítania do chyby.
Stráže
Podmienky, ktoré musia byť splnené pre prechod do ohňa. Udalosť „SUBMIT“ môže spustiť prechod nečinnosti → načítavanie iba vtedy, ak prejde strážca overenia formulára.
Kontext / Rozšírený stav
Pomocné údaje, ktoré stroj prenáša (hodnoty zadané používateľom, chybové hlásenia, načítané údaje) spolu s názvom aktuálneho stavu.
Stavové stroje v ExodeUI
ExodeUI poskytuje vizuálny editor stavového automatu uzlov. Stavy nakreslíte ako kruhy, spojíte ich s označenými šípkami predstavujúcimi udalosti a ku každému stavu pripojíte jarné animácie a zmeny vizuálnych vlastností. Stroj je uložený v súbore .exode: v React ho načítate pomocou ExodeUICanvas a prejdete cez vstupy a v Swifte cez ExodeUIController.
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 AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}