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

React + Statecharts: Repensando seu frontend co...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
310
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
3.8k
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k
ChromeでローカルLLM
Avatar for ryu ryu1013
0
140
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
220
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
430
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
1.1k
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.2k
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
160
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
180
3回つくってわかった、
定期実行ジョブ基盤の本質情報
Avatar for Naoto Takai takai
0
510

Featured

See All Featured
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
890
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
410
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
330

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!