Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React behind the scenes
Search
Igor Halfeld
March 15, 2019
Programming
0
37
React behind the scenes
How React.js works behind the scenes
Igor Halfeld
March 15, 2019
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
100
How to migrate legacy frontend?
igorhalfeld
1
78
Patterns for perfect components in Vue.js
igorhalfeld
0
97
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
35
Step by step I followed a career in software
igorhalfeld
0
630
Using AI to create memes
igorhalfeld
0
480
Deninho, the TS children
igorhalfeld
1
190
Micro Front-ends, what's anyone says...
igorhalfeld
0
320
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
82
Other Decks in Programming
See All in Programming
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
LPIXEL×CADDi_kaerururu
kaerururu
3
300
document.write再考
brn
5
2.5k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
260
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
PHP で読む楽しいコアダンプ
sji
0
240
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
330
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
7
2.1k
TCA魔法学入門🪄
dazy
0
280
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
160
13k
We Have a Design System, Now What?
morganepeng
42
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Debugging Ruby Performance
tmm1
68
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Bash Introduction
62gerente
604
210k
Transcript
React behind the scenes. Virtual DOM, reconciliation phase, diff algorithm..
Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
None
None
None
None
Vamos começar suavão..
Browser É mágica!
User interface Browser Engine Render Engine Data persistence Networking JavaScript
Interpreter UI Back-end
DOM Document Object Model
None
Virtual DOM “Virtual” Document Object Model
None
None
Até agora, tudo legal…
Beleza, e então? O front-end moderno começa depois do Angular
1.x
Watcher DOM Watcher State Watcher
Virtual DOM Wrapper
Deu bom
Vamos imaginar… …a construção de uma interface.
<p> <div> <section>
Recursivo!
None
Render e eventos usam a main thread! Imagina se tivesse
muitos childrens e fazer handling de eventos ao mesmo tempo!
None
Precisamos ter o controle! A main thread precisa estar disponível
para updates prioritários.
section div button return children sibling Fiber
None
None
None
Onde eu quero chegar com tudo isso?
Obrigado! igorluiz.me/talks - @IgorHalfeld