Interfejs maszyny stanowej: budowanie deterministycznych, wolnych od błędów interfejsów
Dowiedz się, jak maszyny stanu wizualnego eliminują niemożliwe stany interfejsu użytkownika, upraszczają złożone komponenty interaktywne i tworzą deterministyczne, wolne od błędów interfejsy w React.
Rdzeń na wynos
Maszyna stanów interfejsu użytkownika to model matematyczny opisujący wszystkie prawidłowe stany, jakie może zajmować komponent interfejsu, oraz wyraźne przejścia między tymi stanami wyzwalane przez zdarzenia użytkownika lub warunki systemowe. Maszyny stanowe eliminują całe kategorie błędów interfejsu użytkownika, uniemożliwiając „stany niemożliwe” — pokrętło ładowania i znacznik sukcesu nie mogą pojawić się jednocześnie, jeśli maszyna stanów zabrania tej kombinacji.
Maszyny stanowe problemu rozwiązują
Większość błędów interfejsu użytkownika ma swoje źródło w komponentach, które mogą wejść w logicznie niemożliwe stany. Klasyczny przykład: przycisk wysyłania formularza, który nie ma jawnego modelu stanu, może jednocześnie znajdować się w stanie „ładowania” i „wyłączonym” z powodu dwóch oddzielnych flag boolowskich. Automat stanów zapobiega temu, wymagając, aby komponent był zawsze w dokładnie jednym, dobrze zdefiniowanym stanie w dowolnym momencie.
- „Piekło flagi logicznej” — isLoading, isDisabled, isError, isSuccess, wszystkie są sprzeczne
- Warunki wyścigu, w których szybcy użytkownicy wyzwalają wiele stanów jednocześnie
- Błędy przejścia, w których animacje rozpoczynają się od nieprawidłowych pozycji pośrednich
- Obciążenie poznawcze programisty wynikające ze śledzenia kombinacji flag n × n podczas przeglądu kodu
Podstawowe koncepcje maszyn stanowych
Maszyny stanowe składają się ze skończonego zestawu stanów, słownika zdarzeń, które mogą wyzwalać przejścia, oraz warunków ochronnych, które określają, czy przejście jest dozwolone.
Stany
Każdy stan reprezentuje określony stan komponentu. Przykład komponentu pobierającego dane: bezczynność, ładowanie, sukces, błąd, odświeżanie.
Wydarzenia / Przejścia
Zdarzenia powodują zmiany stanu. „WYŚLIJ” powoduje przejście formularza ze stanu bezczynności do ładowania. „SUKCES” przechodzi od załadowania do sukcesu. „BŁĄD” powoduje przejście z ładowania do błędu.
Gwardia
Warunki, które muszą być spełnione, aby doszło do przejścia w ogień. Zdarzenie „SUBMIT” może wywołać przejście bezczynności → ładowania tylko wtedy, gdy przejdzie kontrola sprawdzania poprawności formularza.
Kontekst/stan rozszerzony
Dane pomocnicze przenoszone przez maszynę (wartości wprowadzone przez użytkownika, komunikaty o błędach, załadowane dane) wraz z nazwą bieżącego stanu.
Maszyny stanowe w ExodeUI
ExodeUI zapewnia wizualny edytor maszyn stanu wykresów węzłów. Rysujesz stany jako okręgi, łączysz je z oznaczonymi strzałkami przedstawiającymi zdarzenia i dołączasz animacje sprężyn i zmiany właściwości wizualnych do każdego stanu. Maszyna jest zapisana w pliku .exode: w React ładujesz ją za pomocą ExodeUICanvas i sterujesz przez wejścia, a w Swift przez ExodeUIController.
Fragment wdrożenia produkcyjnego
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)}
/>
);
}