menu

Statecharts

Statecharts are a precise, visual way of modeling the behaviour of complex reactive systems. They describe how things work, and can help you get your code doing exactly what you want.

Channels
Team

"Landing page"

March 2, 2019 at 8:55pm

Hi!

I've been toying with the idea of adding a few live demos of statecharts to the front page. Perhaps the Flickr search or a login flow, but I'm a bit hesitant because developers who visit will often have opinions on how search should work or how login screens should work, and I don't want to lose them as readers just because we disagree on UIs.

So I'm thinking of adding a small game or something. Something that's easy to grasp, and that would require a large number booleans. Maybe a tic-tac-toe game, or a game of chance. A three-card monte (or shell game) might be the right level of complexity, but might evoke the wrong feelings. I'm not hustling anyone! Ian Horrocks' calculator also springs to mind, althought that statechart is quite a beast!

I'd love some suggestions from y'all for small, easy-to-grasp, yet complicated to implement UIs, especially ones that developers typically won't have strong opinions of how should work.


March 2, 2019 at 9:51pm

You could make some nice visuals with 3-card monte with little effort. A down-side might be that people are unfamiliar with the game. I agree that the calculator might be too complicated. 1 example that people would be familiar with & could have varying complexity would be a phone. You could model on / off, changing volume & opening / closing apps.

like-fill
1
  • reply
  • like

A Japanese abacus with digital readout on the top would be interactive and as minimal or complex as you feel like making it (could implement only 100s, 10s, and 1s columns for example). I think the state machine would benefit from lots of repetition that would make statecharts shine versus regular state machine.

like-fill
1
  • reply
  • like

Perhaps there’s room for experimentation in building Tower of Hanoi with a statechart. Here is a non-statechart explanation from our colleague, Kirupa https://www.kirupa.com/html5/tower_of_hanoi_puzzle.htm

like-fill
1
  • reply
  • like

March 3, 2019 at 6:13pm

Perhaps there’s room for experimentation in building Tower of Hanoi with a statechart. Here is a non-statechart explanation from our colleague, Kirupa https://www.kirupa.com/html5/tower_of_hanoi_puzzle.htm

If you do the Tower of Hanoi problem, you could add in a timer with a digital readout to demonstrate "delayed events and transitions".

like-fill
2
  • reply
  • like

March 4, 2019 at 5:32am

Rather than implement the (recursive) algorithm, how about an interactive version? With taps/clicks, dragging&dropping to move discs, and so on?

like-fill
1
  • reply
  • like

And maybe a "solve" mode that can be an invoked service that interacts with the statechart by sending events, and can be paused, canceled when the user drags/taps again.

  • reply
  • like
  • reply
  • like

Haha, this was fun. This mathsisfun was the first hit when I searched for Tower of Hanoi, and it has a nice state bug: I can drag'n'drop the discs while the solver is running and it produced some weird results.

like-fill
3
  • reply
  • like

Here's Tic-Tac-Toe with XState + React: https://codesandbox.io/s/j750nqvo2y The statechart is pretty straightforward.

like-fill
3
  • reply
  • like

March 4, 2019 at 10:03pm

All these games have got me thinking. Great suggestions. A +1 for the login form and possibly search UI, is that we could have the same base code (actions, guards, events) and simply switch out the statechart to provide a completely different behaviour. That might not work for a game.

like-fill
1
  • reply
  • like

March 11, 2019 at 9:34pm

@mogsie I think your idea is good (specially that of using a game), but I would not think it is necessary for that game to be 'complicated', e.g. having a lot of booleans.

  • reply
  • like

This for example is a hierarchical state machine for a chess game

  • reply
  • like
  • reply
  • like

well I keep getting an internal server error when I try to upload the png file so I won't post it but a chess game is pretty well known and the corresponding machine can be made relatively simple (you can make it complicated too if you want to).

  • reply
  • like

well I keep getting an internal server error when I try to upload the png file so I won't post it but a chess game is pretty well known and the corresponding machine can be made relatively simple (you can make it complicated too if you want to).

  • reply
  • like

March 12, 2019 at 3:26pm

My point about it being complicated was more something that evokes "Oh my, that would require a fair amount of boolean logic to pull off" in the minds of the reader, so that if they dive into the backing article that describes the solution, they'll see delightful images that depict the statecharts, and nothing messy. One interesting thought is to be able to show how statecharts handles a changing requirement, one that (in a non-statechart solution) would require a lot of special case handling in many if-tests, but where (in our case) the change is isolated to the statechart, and is easy to grasp and test.

  • reply
  • like

March 13, 2019 at 12:28am

I understand that, but that in itself is complex. You ask reader to understand a game, then a game implementation with lots of bool, and then a state chart and then the difference between the two and then the practical consequences of that. Feels like a lot to me.

  • reply
  • like

also note that the complexity of the statechart may not correlate with the complexity of the game. The chess game has some complex rules, but you can write the game with a reasonably simple chart (though you can also write with a chart with as many states as pieces on the board).

  • reply
  • like
  • reply
  • like

yay

  • reply
  • like

well no yay I failed again to include a picture.

  • reply
  • like

anyways I would advise the chess game, because everybody knows the games and the rules (that's as much you don't have to explain). There are many implementations of it with any framework you can think of, with the booleans and all. You would then only have to do the statechart implementation and compare with the existing code you did not have to write. Additionally you could write it reasonably quickly by reusing the css, icons, etc. but also logic (say chess moves) of the existing implementation.

  • reply
  • like

I am actually debating myself between doing that to showcase my machine library or do something like boulder dash which is a full scale 'strategy' game.

  • reply
  • like

March 13, 2019 at 8:06am

I have had the pleasure of trying to implement a chess game at an event, and I found it surprising that a lot of the attendees didn't know anything about chess. But yes, any turn-based game would suffice for this idea.

  • reply
  • like
Show more messages