DailyJS
Published in

DailyJS

User Interfaces You Can Trust with State Machines

Bringing engineering back to software

The movie search app

Detailed specifications

Implementation

  • events are propagated to a central controller;
  • the controller elicits what actions to do, based on the current value of a model;
  • the controller performs those actions and updates the model.

Refactoring towards state machines

Event-state-action paradigm

State machine formalism

  • events;
  • control states;
  • an extended state variable;
  • transitions between control states, which are mapped to actions to be executed as a result of an event triggering the transition.

Why use state machines

  • find design bugs early
  • reduce implementation bugs
  • iterate on features faster and more reliably
  • have a clear and automatable piece of documentation of the interface for all members of the development team
  • pick and change front-end architecture as the need emerges

Identify design bugs early

Identify and reduce implementation bugs

  • code implementing the behavior modelized by the state machine can be auto-generated (executable state machine)
  • the testing of the state machine can be automated.

Automatic code generation

Automatic test generation

Iterate on features

  • add a back button
  • debounce input
  • query the movie database only after three characters get entered
  • viewing movies may require being logged in depending on the rating (18+ etc.)
  • movie details could have their own route, for linkability purposes

Clearly and economically document the interface behavior

Fits any front-end architecture

The purpose of a good architecture is to defer decisions, delay decisions. The job of an architect is not to make decisions, the job of an architect is to build a structure that allows decisions to be delayed as long as possible. Why? Because when you delay a decision, you have more information when it comes time to make it.

Final state machine implementation

Conclusion

  • Credit to Sari Marton for the original non-machine-based version of the TMDB movie app.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store