One picture is worth a
thousand lines of code
Vlad Știrbu
TampereJS Meetup
08.03.2018

Unified Modeling Language
 General-purpose, developmental, modeling
language in the field of software engineering
 Intended to provide a standard way to visualize
the design of a system

UML Diagrams

Finite State Machines
 States
 Events
 Actions and transitions
 Guards

FSMs and Event-Driven Programming
 Many software systems are event driven
 Event handling explicitly dependent on both the
event-type and on the state of the system
 Reduce the number of execution paths through
the code

FSM JavaScript libraries
 fsm-as-promised
 javascript-state-machine
 machina
 xstate

Live demo in Visual Studio Code…

Architecture

Conclusions
 Standard way to visualize the system
 Compact, easy to follow execution paths
 Direct use as documentation

Resources
 https://github.com/vstirbu/fsm-as-promised
 https://marketplace.visualstudio.com/items?item
Name=vstirbu.fsm-viewer

Questions
vstirbu@gmail.com