Потребителски интерфейс на State Machine: Изграждане на детерминистични интерфейси без грешки
Научете как визуалните държавни машини елиминират невъзможни състояния на потребителския интерфейс, опростяват сложни интерактивни компоненти и създават детерминистични интерфейси без грешки в React.
Ядро за вкъщи
Машината на състоянието на потребителския интерфейс е математически модел, който описва всички валидни състояния, които интерфейсният компонент може да заема, и изричните преходи между тези състояния, задействани от потребителски събития или системни условия. Щатските машини елиминират цели категории грешки в потребителския интерфейс, като правят „невъзможните състояния невъзможни“ — вашият бутон за зареждане и отметка за успех не могат да се появят едновременно, ако вашата държавна машина забранява тази комбинация.
Проблемът се решава от държавни машини
Повечето грешки в потребителския интерфейс произхождат от компоненти, които могат да влязат в логически невъзможни състояния. Класически пример: бутон за подаване на формуляр, който няма изричен модел на състояние, може едновременно да бъде в състояние на „зареждане“ и състояние „забранено“ от два отделни булеви флага. Машината на състоянието предотвратява това, като изисква компонентът винаги да е в точно едно точно дефинирано състояние във всеки момент.
- „Boolean flag hell“ — isLoading, isDisabled, isError, isSuccess всички конфликтни
- Състезателни условия, при които бързите потребители задействат няколко състояния едновременно
- Грешки при прехода, при които анимациите започват от неправилни междинни позиции
- Когнитивно натоварване на разработчиците от проследяване на n × n комбинации от флагове при преглед на кода
Основни концепции за държавна машина
Щатските машини се състоят от краен набор от състояния, речник от събития, които могат да задействат преходи, и предпазни условия, които определят дали преходът е разрешен.
държави
Всяко състояние представлява специфично състояние на компонента. Пример за компонент за извличане на данни: неактивен, зареждане, успех, грешка, опресняване.
Събития / Преходи
Събитията предизвикват промени в състоянието. „ИЗПРАЩАНЕ“ прехвърля формуляр от неактивен към зареждащ се. „УСПЕХ“ преминава от зареждане към успех. „ГРЕШКА“ преминава от зареждане към грешка.
Пазачи
Условия, които трябва да са верни за преход към огън. Събитие „ИЗПРАЩАНЕ“ може да задейства прехода неактивен → зареждане само ако защитата за валидиране на формуляра премине.
Контекст / Разширено състояние
Спомагателни данни, които машината носи (въведени от потребителя стойности, съобщения за грешки, заредени данни) заедно с името на текущото състояние.
Държавни машини в 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)}
/>
);
}