Illarion Koperski
Web developer, eCommerce specialist, Shopify expert
“On Wizards
and State Machines” [EN]
Illarion Koperski
2019-02-13
A wizard is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.
— Raluca Budiu, Nielsen Norman Group
A state machine is a mathematical model of computation that can have different states, but fulfils only one of them at a given time.
— Krasimir Tsonev, creator of Stent
A perfect wizard would:
- be deterministic
- insulate itself from external factors
- support logical step "jumping"
- save and restore user progress
- handle asynchronous actions
- be self-documenting and easy to test
What didn't work for me
- Route-based wizards
- Redux-only implementation
- History blocking or preventing the user from navigating away
Links
Krasimir Tsonev. "The Rise Of The State Machines"
David Khourshid. "Reactive State Machines & Statecharts"
Raluca Budiu. "Wizard Design Recommendations"
Stent, finite state machine library
xstate, popular alternative to Stent
Reach Router's ServerLocation or React Router's StaticRouter
Bicycle Shop Demo
See you next month at WarsawJS
On Wizards and State Machines
By Illarion Koperski
On Wizards and State Machines
My experience building a reliable and predictable wizard UI, i.e., a multi-step form, with state machines and React.
