React + Statecharts: Repensando seu frontend com máquina de estados finitos

Transcript

1. Filipe Monteiro
2. React + Statecharts Repensando seu frontend com máquina de estados
3. Gerenciar estado é difícil
4. AutoLogout component •Definir um estado inicial de logado e trabalhando •Observa o mouse move / key down •Uma vez idle, após algum tempo definido •Logout
8. Bottom-up •Foca em transições lineares •Difícil de entender •Mais suscetível a bugs a medida que o código cresce •Cria estados não previsíveis
9. Statecharts
10. Máquina de estados finitos “ Uma máquina abstrata que está em um único estado em determinado momento”
11. Máquina de estados finitos “ Que pode mudar de um estado para outro de acordo com uma entrada/evento”
12. Máquina de estados finitos A B B C C
13. Statecharts
14. “ Um conceito visual para sistemas complexos” David Harel, 1987
15. Statecharts São uma extensão ou uma máquina de estados melhorada.
16. Statecharts •Estados aninhados (clustering) •Ortogonalidade •Condições nas transações (guards) •Ações (onEntry, onExit)
17. Statecharts “ Um statechart é uma caixa mágica: Você fala o que aconteceu e ela te diz o que fazer” Luca Matteis, 2018
18. xstate + react-automata
27. “Tendência para 2018: Todo mundo vai começar a usar máquina de estado (explícita) para UIs” Max Stoiber, 2018
28. Obrigado!