Інтерфейс кінцевого автомата: створення детермінованих інтерфейсів без помилок
Дізнайтеся, як автомати візуального стану усувають неможливі стани інтерфейсу користувача, спрощують складні інтерактивні компоненти та створюють детерміновані інтерфейси без помилок у React.
Основний винос
Машина стану користувальницького інтерфейсу — це математична модель, яка описує всі дійсні стани, які може перебувати компонент інтерфейсу, і явні переходи між цими станами, викликані подіями користувача або умовами системи. Конечні автомати усувають цілі категорії помилок інтерфейсу користувача, роблячи «неможливі стани неможливими» — ваш лічильник завантаження та галочка успіху не можуть з’явитися одночасно, якщо ваш кінцевий автомат забороняє цю комбінацію.
Проблему розв’язують автомати стану
Більшість помилок інтерфейсу користувача виникають через компоненти, які можуть входити в логічно неможливий стан. Класичний приклад: кнопка надсилання форми, яка не має явної моделі стану, може одночасно перебувати в стані «завантаження» та «вимкненому» стані з двох окремих логічних прапорів. Кінцевий автомат запобігає цьому, вимагаючи, щоб компонент завжди перебував в точно одному чітко визначеному стані в будь-який момент.
- "Boolean flag hell" — isLoading, isDisabled, isError, isSuccess усі конфліктні
- Умови перегонів, коли швидкі користувачі запускають кілька станів одночасно
- Помилки переходів, через які анімація починається з неправильних проміжних позицій
- Когнітивне навантаження розробника від відстеження комбінацій прапорців n × n під час перегляду коду
Основні концепції кінцевого автомата
Кінцеві автомати складаються з кінцевого набору станів, словника подій, які можуть ініціювати переходи, і захисних умов, які визначають, чи дозволений перехід.
держави
Кожен стан представляє певний стан компонента. Приклад для компонента отримання даних: неактивний, завантаження, успіх, помилка, оновлення.
Події / Переходи
Події викликають зміни стану. "ВІДПРАВИТИ" перемикає форму з режиму очікування в режим завантаження. «УСПІХ» переходить від завантаження до успіху. "ПОМИЛКА" переходить від завантаження до помилки.
Охоронці
Умови, які повинні бути істинними для переходу до вогню. Подія «SUBMIT» може ініціювати перехід «неактивний → завантаження», лише якщо захист перевірки форми пройде.
Контекст/розширений стан
Допоміжні дані, які передає машина (значення, введені користувачем, повідомлення про помилки, завантажені дані) поряд із назвою поточного стану.
Конечні автомати в ExodeUI
ExodeUI надає візуальний редактор кінцевого автомата графа вузлів. Ви малюєте стани у вигляді кіл, з’єднуєте їх позначеними стрілками, що представляють події, і додаєте пружинні анімації та зміни візуальних властивостей до кожного стану. Машина зберігається у файлі .exode: у React ви завантажуєте її за допомогою ExodeUICanvas і керуєте нею через введення, а в Swift — через ExodeUIController.
Фрагмент впровадження виробництва
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)}
/>
);
}