David Khourshid - Formal Forms with State Machines | React Next 2019

ReactNext 2019
www.react-next.com
Tel Aviv, Israel
@reactnext
Developing forms can quickly become complex, and the myriad of approaches and libraries only highlights the problem - there's so many different use-cases and no one-size-fits-all solution. It's time to formally model our forms. In this talk, we'll explore the current React form landscape and learn how hooks and state machines can be used to create abstract models of complex forms that greatly reduce dependencies on restrictive form libraries or complex custom components. With these abstract models, form logic can be automatically tested, simulated, analyzed, and visualized.
David Khourshid is a software engineer for Microsoft, a tech author, and speaker. He is passionate about statecharts and software modeling (and created the XState library), reactive animations, innovative user interfaces, and cutting-edge front-end technologies When not behind a computer keyboard, he’s behind a piano keyboard or traveling.

[@CoryTheSimmons]

Really nice David. Thank you for your work.

[@mcspud]

4:08 - 4:17 - LOL!

[@nateadams4770]

mcspud you could hear the crickets chirping

[@satvistayou]

There is simple name for what is described here - Elm.
That’s right, use it to escape from complexity hell

[@tom_fales]

no link to the form project in codesandbox :(

[@nnslife]

I am not sold on XState. How is it better than Redux? Seems just like an extra layer.
27:25 - is visualisation the only advantage?
Redux/Elm hold the whole state in a single object and in order to change it, you just create a new object and update some fields.
In XState the whole state is separated into State-Machine-State and Context(extra properties = everything else).
Manipulating State-Machine-State is beautiful and XState might be cool in some very basic use-cases, but in the majority of applications you need context and manipulating the context is awkward: as at 25:23, you have to write "actions: assign({ two: (_, e) => e.value })" to update property "two".

[@n8morse]

like you said, it is easy to update state in Redux, "you just create a new object and update some fields." The combination of just a few fields makes for a large state space that may include impossible states. xState restricts the allowed states to just well defined ones. Additionally it prescribes the sequence of those possible states. It takes more work to be that specific about what those states and transitions are. So, you would only want to use xState if you can envision your app (or some portion) as paths through a set of states.

[@ehsankhorasani_]

your last name is a Persian word (خورشید) which means sun