StateCharts

ThoughtStorms Wiki

A 🧵 of tools for building UIs with statecharts https://t.co/yeD1RQVTBe

Statecharts were introduced by Harel (https://t.co/ELT4zMHpA3) as an extension of state machines for modeling stateful, reactive systems. What makes statecharts more powerful is that they can be composed. This allows you to model and view a system at different levels. https://t.co/p01eeGcHhS

He envisioned statecharts not just as a notation for designing a system on paper but as the basis for a visual programming environment. https://t.co/l4AnUo6UDM

Let’s explore some programming environments that allow you to use statecharts today!

https://t.co/zhiCg6nN6z is a prototyping tool for thinking about complex product behavior. With this tool, you can define statecharts through a simple DSL and then use the simulator to go through the states by clicking on actions. https://t.co/X88j0M0fYT

It’s possible to define a view function with Javascript to render a preview of your application. Still, it’s only meant for prototyping, and you can’t build complete applications with it.

@statelyai is a visual editor for defining statecharts. It’s based on the XState Javascript library, so you can export statechart definitions as code and use them directly in your application. https://t.co/7EFbFHCEat

Stately also has a plugin for Visual studio code, so you can edit statecharts directly in your project either visually or as text.

https://t.co/MLFTfSTWpD

Bookmarked at 2022-05-02T23:30:52.066109 https://sketch.systems/

No Backlinks