Statecharts for modern web application state management

Web applications are amounting to unprecedented relevance and importance as more and more businesses provide their products and services via the web platform. Because of the reactive and context-sensitive nature, the web applications require intricate efforts of effective consuming and manipulating the application states (state management). While the proposition of an explicit, central representation of the application states from modern frameworks was a major step forward, the actual effort in modelling this representation remained largely unstructured and ad-hoc. The consequence is compounding difficulty to reason and implement effective state management as complexity grows. Finite state machine is a rigorous mathematical model invented to tackle the challenges in reasoning about the transformation of states. Amongst many benefits it provides are the ability to have a diagrammatic view on most of the possible values via State Transition Diagram, the relation of those possible values, and the evolution path (transition graph). The graph nature of the transition diagram enables the analysis by the use algorithms and serves as an effective documentary, which improves the long-term maintenance of the software. For this reason, finite state machine has been the core enabler for applications of various scales, complexity, and criticality, from spaceship control system to artificial intelligence in games, and now web applications. While being appropriate for web applications, the sheer complexity typically cripples the benefits of Finite state machine and state transition diagrams by a phenomenon called state explosion. Statecharts is a formalism built on top of the former two in order to retain the benefits while avoiding state explosion. The thesis introduces the ins and outs of Statecharts and its foundation – Finite state machines and State transition diagrams. It then demonstrates the concrete steps in how to utilize Statecharts in a modern case study web application: a local music player. In more details, it elaborates on the modelling of the central representation of the application states, designing the manipulation and consumption of this model, and the integration with other frameworks. The final section evaluates the claims on the benefits of Statecharts over the popular ad-hoc approach.Repository link: https://github.com/StormBlade97/xstate-music-playe