Visual programming and executable models
Farzad Yousefzadeh
Farzad Yousefzadeh
Lead Engineer @Stately
Humans learn like a scripting interpreter with much limited capacity.
Use pictures for a more effective medium of communication
Flowcharts
Flowcharts
Weighted Flowcharts
Sequence diagrams
Class Blueprints
Flowcharts are GRAPHS
Vertices and Edges
Your entire software can be a collection of graphs
Stately.ai
Examples executable diagrams
State orchestration
Actors
Canvas item actor: selection, highlighting, per item commands
Canvas actor: permissions (read-only), modes (embed)
Keyboard actor: delete item, select all items, copy pasting items
URL actor: update query params, navigate, feed initial data to the canvas
Ad-hoc UI actors: Toast actor, Popover actor
Supervisor
Focus actor: register focusable items and focus them on demand by message passing
Actors
Component tree vs Actor tree
Diagrams to the next level
👉🏻 Generate event sequences
👉🏻 Collaborative
👉🏻 Smart reshaping by analytics
Recap
👉🏻 See breadth of features better
👉🏻 Event based architecture
👉🏻 Discover edge cases upfront
👉🏻 Focus on behavior than implementation
👉🏻 Visual model: onboarding, learning code,
documentation, et al
👉🏻 Test generation and property based testing
Recap
👉🏻 Model a new feature
👉🏻 Refactor an existing feature
👉🏻 Learn a feature by modeling it
at a higher level
👉🏻 Test a feature by modeling it
for the test scenarios
👉🏻 Eliminate accidental complexity