Planning, Collaborating, And Finite State Machines

Lucas Reis

Currently at Zocdoc in NYC 🇺🇸

Originally from Brazil 🇧🇷

@iamlucasmreis

Did you go from

Infinite Planning

to

No Planning At All

?

In the agile world we tend to jump into code too soon

Planning for a couple of hours will do wonders!

(or even a couple of days for more complex components)

The reasoning:

  1. Coding is more costly than planning
  2. We are able to solve big problems and catch bugs with planning
  3. During planning we're able to leverage knowledge of non-coders too

The best planning tools are:

  • High-level enough to be able to be developed by non-coders
  • Low-level enough to actually help you with your code

Finite State Machines Satisfy These Requirements!

(more specifically Statecharts)

Statecharts deal better with complexity

  • Add modularity to regular FSMs
  • Easier to design complex UIs
  • Avoid state explosions

Let's implement a UI component using statecharts!

Health Insurance Picker (inspired by Zocdoc)

  • Patient needs to choose a Carrier and a Plan accepted by the Carrier
  • The lists are fetched asynchronously
  • Clicking in the input opens a dropdown with the options
  • Clicking outside the dropdown closes it
  • It is possible to reset the selection
  • It is possibe to have a partial selection

SketchSystems

Great starting point for sketching your Statechart

xstate/xviz

Is becoming the JS standard for working with Statecharts, framework agnostic

{
  "key": "Oven",
  "initial": "off",
  "states": {
    "off": {
      "on": {
        "BAKE_PRESSED": "heating"
      }
    },
    "heating": {
      "on": {
        "OFF_PRESSED": "off"
      }
    }
  }
}

React Automata

Uses xstate to actually manage your React components

const InsurancePicker = withStateMachine(statechart)(Container);
class Container extends React.Component {
  state = {
    selectedCarrier: null,
    selectedPlan: null,
    carriers: [],
    plans: []
  };

AND WE'RE DONE!

Key Takeaways

Preciseness of specs

Correctness of code

  • More time collaborating with non-coders!
  • Less noise in code, less unimportant state handling
  • More declarative code, no if statements

Future

  • More vizualization tools
  • More ways to integrate with JS
  • More tools to assert correctness

Thank you very much!

Lucas Reis

@iamlucasmreis