SlideShare a Scribd company logo
FSM, Games and UI
development
...Once upon a time a front-end engineer
Name
Initial
Editing
Name
Saving
Name
Name
Name
Initial
Name
Click
Initial
Name
Editing
Click
Name
Saving
Name
Initial
...once upon a time a designer
“I forgot a detail, we didn’t treat
the error state”
...once upon a time a designer
“when with errors, the input
should back to editing state. so
the client can try save again”
...Our buddy front-end saw that the solution
wasn’t good enough
1 boolean = True False
isEditing + isSaving + isError
1 2 3 4
5 6 7 8
… so he had a better idea
Keep the state using boolean variables is confuse.
requiring extra treatments of all possible states and
pray to any other edge case never appears
Problem
Have a single state at a time and
define transitions between states
using an event.
Solution
...
FINITE STATE MACHINE
A finite state machine is a mathematical model used to
represent computer programs or logic circuits. The concept is
conceived as an abstract machine that must be in one of a
finite number of states.
https://pt.wikipedia.org/wiki/M%C3%A1quina_de_estados_finita
Estado Atual →
Eventos ↓
Estado A Estado B Estado C
Evento X ... ... ...
Evento Y ... Estado C ...
Evento Z ... ... ...
Table of state transitions
StateCharts
stateChartsActions
Guards
Paralel states
Compound states
Delayed transitions Activity
https://statecharts.github.io/
...and more!
Xstate
https://xstate.js.org/docs/
StateCharts - actions/Activity
https://xstate.js.org/viz/?gist=c6ef8d8e40f74e0bfec9d9683961cf72
StateCharts - Guards
https://xstate.js.org/viz/?gist=35ed12320eb7abf9d3e0f51dfcd24cc0
Memory PG
https://xstate.js.org/viz/?gist=3ffa88ac1c45d1fa45231b428ad847a6
But, how about your web
front-end?
Checkout form / lib
https://xstate.js.org/viz/?gist=bf4a9749bd45bf08313d13945c6597a9
Graphql devtools
https://xstate.js.org/viz/?gist=8637e64f733e467668de542eb86195bc
code is for humans
YOu don’t need any
library to use state
charts.
but...
Xstate
https://xstate.js.org/docs/
Xstate/FSM
https://xstate.js.org/docs/packages/xstate-fsm/
robot
https://thisrobot.life/
what else?
WRITE LESS TESTS
WITH MODEL-BASED
TESTING
define assertsadd a machine add a model choose a path
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, and infographics
& images by Freepik.
Thanks!
questions?
magdiel.kesller@gmail.com
https://github.com/dielduarte
https://twitter.com/diel_duarte
https://www.linkedin.com/in/dielduarte/
Please keep this slide for attribution.

More Related Content

Similar to Fsm, games and ui development

Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
Nattaporn Bunmak
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
Nattaporn Bunmak
 
DataWeave 2.0 Language Fundamentals
DataWeave 2.0 Language FundamentalsDataWeave 2.0 Language Fundamentals
DataWeave 2.0 Language Fundamentals
Joshua Erney
 
JUNit Presentation
JUNit PresentationJUNit Presentation
JUNit Presentation
Animesh Kumar
 
The Black Magic of Ruby Metaprogramming
The Black Magic of Ruby MetaprogrammingThe Black Magic of Ruby Metaprogramming
The Black Magic of Ruby Metaprogramming
itnig
 
111
111111
Introduction of programming
Introduction of programmingIntroduction of programming
Introduction of programming
cnfook 11
 
Cross-platform UI Engines Rendering Performance
Cross-platform UI Engines Rendering PerformanceCross-platform UI Engines Rendering Performance
Cross-platform UI Engines Rendering Performance
Igalia
 
Pyramid of-developer-skills
Pyramid of-developer-skillsPyramid of-developer-skills
Pyramid of-developer-skills
Alexandru Bolboaca
 
Unity3D Scripting: State Machine
Unity3D Scripting: State MachineUnity3D Scripting: State Machine
Unity3D Scripting: State Machine
Sperasoft
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programming
Fulvio Corno
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
iceana
 
All of javascript
All of javascriptAll of javascript
All of javascript
Togakangaroo
 
Modern app development with Jetpack Compose.pptx
Modern app development with Jetpack Compose.pptxModern app development with Jetpack Compose.pptx
Modern app development with Jetpack Compose.pptx
Md Shamsul Arafin Mahtab
 
Beyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript GeneratorsBeyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript Generators
Darren Cruse
 
Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...
Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...
Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...
Dadangsachir WANDA ir.mba
 
Clean Code JavaScript
Clean Code JavaScriptClean Code JavaScript
Clean Code JavaScript
Riza Fahmi
 
How To Use IO Monads in Scala?
 How To Use IO Monads in Scala? How To Use IO Monads in Scala?
How To Use IO Monads in Scala?
Knoldus Inc.
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
fahsai imjai
 
Dead codepresentation 0
Dead codepresentation 0Dead codepresentation 0
Dead codepresentation 0
drewz lin
 

Similar to Fsm, games and ui development (20)

Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
 
DataWeave 2.0 Language Fundamentals
DataWeave 2.0 Language FundamentalsDataWeave 2.0 Language Fundamentals
DataWeave 2.0 Language Fundamentals
 
JUNit Presentation
JUNit PresentationJUNit Presentation
JUNit Presentation
 
The Black Magic of Ruby Metaprogramming
The Black Magic of Ruby MetaprogrammingThe Black Magic of Ruby Metaprogramming
The Black Magic of Ruby Metaprogramming
 
111
111111
111
 
Introduction of programming
Introduction of programmingIntroduction of programming
Introduction of programming
 
Cross-platform UI Engines Rendering Performance
Cross-platform UI Engines Rendering PerformanceCross-platform UI Engines Rendering Performance
Cross-platform UI Engines Rendering Performance
 
Pyramid of-developer-skills
Pyramid of-developer-skillsPyramid of-developer-skills
Pyramid of-developer-skills
 
Unity3D Scripting: State Machine
Unity3D Scripting: State MachineUnity3D Scripting: State Machine
Unity3D Scripting: State Machine
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programming
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
 
All of javascript
All of javascriptAll of javascript
All of javascript
 
Modern app development with Jetpack Compose.pptx
Modern app development with Jetpack Compose.pptxModern app development with Jetpack Compose.pptx
Modern app development with Jetpack Compose.pptx
 
Beyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript GeneratorsBeyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript Generators
 
Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...
Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...
Enrich enriching mathematics conversi biner 16 pada sisikomputerize indoensia...
 
Clean Code JavaScript
Clean Code JavaScriptClean Code JavaScript
Clean Code JavaScript
 
How To Use IO Monads in Scala?
 How To Use IO Monads in Scala? How To Use IO Monads in Scala?
How To Use IO Monads in Scala?
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
 
Dead codepresentation 0
Dead codepresentation 0Dead codepresentation 0
Dead codepresentation 0
 

Recently uploaded

Wearable antenna for antenna applications
Wearable antenna for antenna applicationsWearable antenna for antenna applications
Wearable antenna for antenna applications
Madhumitha Jayaram
 
PPT on GRP pipes manufacturing and testing
PPT on GRP pipes manufacturing and testingPPT on GRP pipes manufacturing and testing
PPT on GRP pipes manufacturing and testing
anoopmanoharan2
 
Technical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prismsTechnical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prisms
heavyhaig
 
Generative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of contentGenerative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of content
Hitesh Mohapatra
 
Embedded machine learning-based road conditions and driving behavior monitoring
Embedded machine learning-based road conditions and driving behavior monitoringEmbedded machine learning-based road conditions and driving behavior monitoring
Embedded machine learning-based road conditions and driving behavior monitoring
IJECEIAES
 
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...
University of Maribor
 
Series of visio cisco devices Cisco_Icons.ppt
Series of visio cisco devices Cisco_Icons.pptSeries of visio cisco devices Cisco_Icons.ppt
Series of visio cisco devices Cisco_Icons.ppt
PauloRodrigues104553
 
bank management system in java and mysql report1.pdf
bank management system in java and mysql report1.pdfbank management system in java and mysql report1.pdf
bank management system in java and mysql report1.pdf
Divyam548318
 
sieving analysis and results interpretation
sieving analysis and results interpretationsieving analysis and results interpretation
sieving analysis and results interpretation
ssuser36d3051
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
Victor Morales
 
DfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributionsDfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributions
gestioneergodomus
 
ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024
Rahul
 
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMS
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMSA SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMS
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMS
IJNSA Journal
 
Properties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptxProperties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptx
MDSABBIROJJAMANPAYEL
 
ML Based Model for NIDS MSc Updated Presentation.v2.pptx
ML Based Model for NIDS MSc Updated Presentation.v2.pptxML Based Model for NIDS MSc Updated Presentation.v2.pptx
ML Based Model for NIDS MSc Updated Presentation.v2.pptx
JamalHussainArman
 
Question paper of renewable energy sources
Question paper of renewable energy sourcesQuestion paper of renewable energy sources
Question paper of renewable energy sources
mahammadsalmanmech
 
Exception Handling notes in java exception
Exception Handling notes in java exceptionException Handling notes in java exception
Exception Handling notes in java exception
Ratnakar Mikkili
 
Recycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part IIIRecycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part III
Aditya Rajan Patra
 
IEEE Aerospace and Electronic Systems Society as a Graduate Student Member
IEEE Aerospace and Electronic Systems Society as a Graduate Student MemberIEEE Aerospace and Electronic Systems Society as a Graduate Student Member
IEEE Aerospace and Electronic Systems Society as a Graduate Student Member
VICTOR MAESTRE RAMIREZ
 
Swimming pool mechanical components design.pptx
Swimming pool  mechanical components design.pptxSwimming pool  mechanical components design.pptx
Swimming pool mechanical components design.pptx
yokeleetan1
 

Recently uploaded (20)

Wearable antenna for antenna applications
Wearable antenna for antenna applicationsWearable antenna for antenna applications
Wearable antenna for antenna applications
 
PPT on GRP pipes manufacturing and testing
PPT on GRP pipes manufacturing and testingPPT on GRP pipes manufacturing and testing
PPT on GRP pipes manufacturing and testing
 
Technical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prismsTechnical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prisms
 
Generative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of contentGenerative AI leverages algorithms to create various forms of content
Generative AI leverages algorithms to create various forms of content
 
Embedded machine learning-based road conditions and driving behavior monitoring
Embedded machine learning-based road conditions and driving behavior monitoringEmbedded machine learning-based road conditions and driving behavior monitoring
Embedded machine learning-based road conditions and driving behavior monitoring
 
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...
 
Series of visio cisco devices Cisco_Icons.ppt
Series of visio cisco devices Cisco_Icons.pptSeries of visio cisco devices Cisco_Icons.ppt
Series of visio cisco devices Cisco_Icons.ppt
 
bank management system in java and mysql report1.pdf
bank management system in java and mysql report1.pdfbank management system in java and mysql report1.pdf
bank management system in java and mysql report1.pdf
 
sieving analysis and results interpretation
sieving analysis and results interpretationsieving analysis and results interpretation
sieving analysis and results interpretation
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
 
DfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributionsDfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributions
 
ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024ACEP Magazine edition 4th launched on 05.06.2024
ACEP Magazine edition 4th launched on 05.06.2024
 
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMS
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMSA SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMS
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMS
 
Properties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptxProperties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptx
 
ML Based Model for NIDS MSc Updated Presentation.v2.pptx
ML Based Model for NIDS MSc Updated Presentation.v2.pptxML Based Model for NIDS MSc Updated Presentation.v2.pptx
ML Based Model for NIDS MSc Updated Presentation.v2.pptx
 
Question paper of renewable energy sources
Question paper of renewable energy sourcesQuestion paper of renewable energy sources
Question paper of renewable energy sources
 
Exception Handling notes in java exception
Exception Handling notes in java exceptionException Handling notes in java exception
Exception Handling notes in java exception
 
Recycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part IIIRecycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part III
 
IEEE Aerospace and Electronic Systems Society as a Graduate Student Member
IEEE Aerospace and Electronic Systems Society as a Graduate Student MemberIEEE Aerospace and Electronic Systems Society as a Graduate Student Member
IEEE Aerospace and Electronic Systems Society as a Graduate Student Member
 
Swimming pool mechanical components design.pptx
Swimming pool  mechanical components design.pptxSwimming pool  mechanical components design.pptx
Swimming pool mechanical components design.pptx
 

Fsm, games and ui development