JavaScript Finite State Machine

Posted by

As we build more complex single page rich applications, I feel there is a place for a state machine to help us handle transitions between our views.

Jakes Gordon has created a micro framework that gives you a very simple state machine. You config the various states and then get back an object to drive with. He built it to scratch an itch, which was the core structure of a breakout game.

Take a look at this hello world example:

var fsm = StateMachine.create({
  state: 'green',
  events: [
    { name: 'warn', from: 'green', to: 'yellow' },
    { name: 'panic', from: 'yellow', to: 'red' },
    { name: 'calm', from: 'red', to: 'yellow' },
    { name: 'clear', from: 'yellow', to: 'green' }
]});

fsm.onpanic = function() { alert('panic!'); };
fsm.onclear = function() { alert('all clear!'); };
fsm.ongreen = function() { document.body.className = 'green'; };
fsm.onyellow = function() { document.body.className = 'yellow'; };
fsm.onred = function() { document.body.className = 'red'; };

fsm.panic()
fsm.clear()
view raw
statemachine.example.js
This Gist brought to you by GitHub.

The project is hosted on GitHub. I hope someone marries this with some of the modern client side frameworks.