Пользовательский интерфейс конечного автомата: создание детерминированных интерфейсов без ошибок
Узнайте, как визуальные конечные автоматы устраняют невозможные состояния пользовательского интерфейса, упрощают сложные интерактивные компоненты и создают детерминированные, безошибочные интерфейсы в React.
Главное
Конечный автомат пользовательского интерфейса — это математическая модель, которая описывает все допустимые состояния, которые может занимать компонент интерфейса, а также явные переходы между этими состояниями, запускаемые пользовательскими событиями или системными условиями. Конечные автоматы устраняют целые категории ошибок пользовательского интерфейса, делая «невозможные состояния невозможными» — ваш индикатор загрузки и галочка успеха не могут появиться одновременно, если ваш конечный автомат запрещает такую комбинацию.
Проблемы, которые решают конечные автоматы
Большинство ошибок пользовательского интерфейса возникают из-за компонентов, которые могут переходить в логически невозможные состояния. Классический пример: кнопка отправки формы, не имеющая явной модели состояния, может одновременно находиться в состоянии «загрузка» и «отключенном» состоянии из-за двух отдельных логических флагов. Конечный автомат предотвращает это, требуя, чтобы компонент в любой момент всегда находился ровно в одном четко определенном состоянии.
- «Адский логический флаг» — isLoading, isDisabled, isError, isSuccess, все конфликтуют.
- Условия гонки, когда быстрые пользователи запускают несколько состояний одновременно
- Ошибки перехода, при которых анимация начинается с неправильных промежуточных позиций.
- Когнитивная нагрузка разработчика от отслеживания комбинаций флагов n × n при проверке кода
Основные понятия конечного автомата
Конечные автоматы состоят из конечного набора состояний, словаря событий, которые могут запускать переходы, и защитных условий, определяющих, разрешен ли переход.
Штаты
Каждое состояние представляет собой определенное состояние компонента. Пример компонента получения данных: простой, загрузка, успех, ошибка, обновление.
События/переходы
События вызывают изменения состояния. «SUBMIT» переводит форму из режима ожидания в режим загрузки. «УСПЕХ» переходит от загрузки к успеху. «ОШИБКА» переходит от загрузки к ошибке.
Охранники
Условия, которые должны выполняться для перехода к огню. Событие «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)}
/>
);
}