Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + Statecharts - Repensando seu frontend c...

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.

Avatar for Filipe Monteiro

Filipe Monteiro

October 06, 2018
Tweet

More Decks by Filipe Monteiro

Other Decks in Programming

Transcript

  1. AutoLogout Component •Definir um estado inicial de logado e trabalhando

    •Observar o mouse move / key down •Uma vez IDLE (Ocioso) •Efetuar o Logout
  2. 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
  3. 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
  4. "Statechart é uma caixa mágica: Você fala o que aconteceu

    (evento) e ela te diz o que fazer” Luca Matteis
  5. Benefícios • Menos bugs • Fácil de entender • O

    funcionamento é definido em um único lugar (não espalhado em todo o componente)
  6. Benefícios “Tendência para 2018: Todo mundo vai começar a usar

    máquina de estados (explícita) para UIs” Max Stoiber