Download as PDF, PPTX
Fsm, games and ui development
- 1. FSM, Games andUI development
- 3. ...Once upon atime a front-end engineer Name
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 12. ...once upon atime a designer “I forgot a detail, we didn’t treat the error state”
- 13. ...once upon atime a designer “when with errors, the input should back to editing state. so the client can try save again”
- 17. ...Our buddy front-endsaw that the solution wasn’t good enough
- 18. 1 boolean =True False
- 19. isEditing + isSaving+ isError 1 2 3 4 5 6 7 8
- 21. … so hehad a better idea
- 27. Keep the stateusing boolean variables is confuse. requiring extra treatments of all possible states and pray to any other edge case never appears Problem
- 28. Have a singlestate at a time and define transitions between states using an event. Solution
- 29.
- 30. A finite statemachine 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
- 31. Estado Atual → Eventos↓ Estado A Estado B Estado C Evento X ... ... ... Evento Y ... Estado C ... Evento Z ... ... ... Table of state transitions
- 32.
- 33. stateChartsActions Guards Paralel states Compound states Delayedtransitions Activity
- 34.
- 35.
- 36.
- 37.
- 38.
- 40. But, how aboutyour web front-end?
- 41. Checkout form /lib https://xstate.js.org/viz/?gist=bf4a9749bd45bf08313d13945c6597a9
- 42.
- 46. code is forhumans
- 47. YOu don’t needany library to use state charts.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. WRITE LESS TESTS WITHMODEL-BASED TESTING
- 55. define assertsadd amachine add a model choose a path
- 58. CREDITS: This presentationtemplate 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.