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

Statecharts não são novos e nós definitivamente deveríamos estar usando em nossas aplicações. Nesta palestra irei explicar um pouco dos conceitos de Statecharts com alguns exemplos usando React.

Transcript

1. Filipe Monteiro Software Engineer @ Instinct Science Github @filipemonteiroth Twitter @filipemonteiroc
2. React + Statecharts Repensando seu frontend com máquina de estados
3. "Gerenciar estado é difícil!” (Michele Bertoli)
4. AutoLogout Component •Definir um estado inicial de logado e trabalhando •Observar o mouse move / key down •Uma vez IDLE (Ocioso) •Efetuar o Logout
10. 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
11. Statecharts
13. Statechart NÃO é um novo framework!
14. “Statecharts: um conceito visual para sistemas complexos” David Harel, 1987
16. Statechart É uma extensão ou uma máquina de estados finitos melhorada / mais robusta.
17. Máquina de Estados Finitos • Uma máquina abstrata que está em um ÚNICO estado em determinado momento • Que pode mudar de um estado para o outro a partir de uma entrada/evento
18. Máquina de Estados Finitos A B B C C
19. Explosão da Máquina de Estados
20. Explosão da Máquina de Estados
21. Statecharts ao resgate •Estados aninhados •Ortogonalidade (Máquinas de estados paralelas) •Condições nas transições •Ações nas transições
22. "Statechart é uma caixa mágica: Você fala o que aconteceu (evento) e ela te diz o que fazer” Luca Matteis
24. xstate + react- automata
29. https://musing-rosalind-2ce8e7.netlify.com/
31. E os testes?
32. “A melhor estratégia de testes é não escrever testes” (Michele Bertoli)
33. E os testes?
36. Benefícios • Menos bugs • Fácil de entender • O funcionamento é definido em um único lugar (não espalhado em todo o componente)
37. Benefícios “Statechart is a hammer and everything is a nail”
38. Benefícios “Tendência para 2018: Todo mundo vai começar a usar máquina de estados (explícita) para UIs” Max Stoiber
39. Quer saber mais? github.com/davidkpiano/xstate github.com/MicheleBertoli/react-automata https:#//statecharts.github.io/ https:#//spectrum.chat/statecharts
40. Obrigado! github.com/filipemonteiroth/autologout github.com/filipemonteiroth/ autologout-with-statechart