Elevator Pitch
We are developing our app based on two major thoughts: (1) What does the current state look like? (2) How does the state change according to the events? That’s basically a STATE MACHINE! We draw it in our minds and let it drives the code. Elm can make this routine reach the next level. 😎🚀
Description
State container is the most popular solution of state management nowadays. Redux and its descendants are strong evidence, no question. With state container as our backbone, we are developing our web app based on two major thoughts:
- How does the current state look like?
- How does the state change according to the specific set of events?
It is a STATE MACHINE.
We have this state machine in our minds while writing our code. Many of us usually draw the machine first and let it drives how we should write our code — that’s state-machine-driven development — which works pretty well with state container pattern.
JavaScript is not a good candidate to describe your state machine, unfortunately. While the state container pattern makes it easier to think about how to solve the problem we have, the language we are using to implement the solution doesn’t help much.
The mismatch between our mental model and the language can be harmful, especially in the long term — when you totally forgot about the code and need to build your mental model again by reading the language that cannot describe it pretty well…that sounds not promising at all.
Elm, on the other hand, comes with the architecture built-in that conform state container pattern. The language features are carefully crafted to help you describe your solution in mind to the code very smoothly.
Not every Elm developers come to this state-machine-driven development though. This talk comes from our experience in developing with Elm for years, transformed all of our projects from React, Angular to Elm, work through enormous sprint numbers. This development approach is a battle-proven one. This talk will demonstrate how to think about the state using a state machine as a building block, and how to implement it in Elm. Also, what is the benefit and also the disadvantage when using Elm this way.