Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React + Statecharts: Repensando seu frontend co...

Avatar for Filipe Monteiro Filipe Monteiro
June 02, 2018
Programming
560
0

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

Avatar for Filipe Monteiro

Filipe Monteiro

June 02, 2018

More Decks by Filipe Monteiro

See All by Filipe Monteiro
React + Statecharts - Repensando seu frontend com máquina de estados
Avatar for Filipe Monteiro filipemonteiroth
1
110

Other Decks in Programming

See All in Programming
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.2k
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
28
33k
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
3.8k
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
750
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
npm との違いを手がかりにGo の依存管理を理解したい
Avatar for OPTiM optim
0
620
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
210
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
350
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
160
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
970
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
190

Featured

See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
630
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
16k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
400
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
910
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.5k

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
  5. None
  6. None
  7. None

  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

  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None

  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!