The complexity that lives in the GUI
I&#x27;m fairly sure I&#x27;ve said this before here and elsewhere, but bears repeating, especially for this post.<p>Statecharts is currently probably the most undervalued tool when it comes to programming GUIs with state. Statecharts are a continuation of state machines, but with less footguns and better abstractions to be able to build larger systems.<p>In the end, you either build a GUI that are using state machines implicitly, or explicitly. Tends to be less prone to bugs if you do so explicitly.<p>If you&#x27;re interested, here is some starting points (copied from an older comment of mine):<p>Here is the initial paper from David Harel: STATECHARTS: A VISUAL FORMALISM FOR COMPLEX SYSTEMS (1987) - <a href="https:&#x2F;&#x2F;www.inf.ed.ac.uk&#x2F;teaching&#x2F;courses&#x2F;seoc&#x2F;2005_2006&#x2F;res" rel="nofollow">https:&#x2F;&#x2F;www.inf.ed.ac.uk&#x2F;teaching&#x2F;courses&#x2F;seoc&#x2F;2005_2006&#x2F;res</a>...<p>Website with lots of info and resources: <a href="https:&#x2F;&#x2F;statecharts.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;statecharts.github.io&#x2F;</a><p>And finally a very well made JS library by David Khourshid that gives you lots of power leveraging statecharts: <a href="https:&#x2F;&#x2F;github.com&#x2F;davidkpiano" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;davidkpiano</a><p>While we&#x27;re at it, here are some links to previous submissions on HN regarding statecharts with lots of useful and interesting information&#x2F;experiences:<p>- <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18483704" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18483704</a><p>- <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=15835005" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=15835005</a><p>- <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=21867990" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=21867990</a><p>- <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=16606379" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=16606379</a><p>- <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22093176" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22093176</a>