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

Front-end Frameworks, what's anyone says...

Avatar for Igor Halfeld Igor Halfeld
January 31, 2019
Programming
74
0

Front-end Frameworks, what's anyone says...

Avatar for Igor Halfeld

Igor Halfeld

January 31, 2019

More Decks by Igor Halfeld

See All by Igor Halfeld
Modular monoliths with fastify
Avatar for Igor Halfeld igorhalfeld
0
210
How to migrate legacy frontend?
Avatar for Igor Halfeld igorhalfeld
1
140
Patterns for perfect components in Vue.js
Avatar for Igor Halfeld igorhalfeld
0
130
Clean Architecture no Front-end (update 2021-05-11)
Avatar for Igor Halfeld igorhalfeld
0
74
Step by step I followed a career in software
Avatar for Igor Halfeld igorhalfeld
0
710
Using AI to create memes
Avatar for Igor Halfeld igorhalfeld
0
540
Deninho, the TS children
Avatar for Igor Halfeld igorhalfeld
1
230
Micro Front-ends, what they don't tell you
Avatar for Igor Halfeld igorhalfeld
0
410
CSS in JavaScripto, the anti-pattern that is good
Avatar for Igor Halfeld igorhalfeld
1
110

Other Decks in Programming

See All in Programming
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
280
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
720
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
590
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
150
「人を評価する AI」の 設計と実装 
Avatar for 奈良亮耶 ryoyanara
0
240
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
730
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
480
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
330
Loosening the Reins: Go Generics Get More Flexible
Avatar for kuro kuro_kurorrr
0
300
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
2
1k
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
180
Cloudflare is Agents
Avatar for chimame chimame
0
180

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
310
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
390
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
340
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k

Transcript

  1. Front-end Frameworks O que ninguém te fala..

  2. Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld

  3. O que eu vim falar aqui?

  4. None

  5. Falar sobre o funcionamento deles…

  6. None
  7. None

  8. Browser É mágica!

  9. User interface Browser Engine Render Engine Data persistence Networking JavaScript

    Interpreter UI Back-end

  10. DOM Document Object Model

  11. None

  12. Virtual DOM “Virtual” Document Object Model

  13. None
  14. None

  15. Até agora, tudo legal…

  16. Beleza, e então? O front-end moderno começa depois do Angular

    1.x

  17. Watcher DOM Watcher State Watcher

  18. Virtual DOM Wrapper

  19. Deu bom

  20. Vamos imaginar… …a construção de uma interface.

  21. <p> <div> <section>

  22. Recursivo!

  23. None

  24. Render e eventos usam a main thread! Imagina se tivesse

    muitos childrens e fazer handling de eventos ao mesmo tempo!
  25. None

  26. Precisamos ter o controle! A main thread precisa estar disponível

    para updates prioritários.

  27. section div button return children sibling Fiber

  28. None

  29. Tudo ficou bem… Temos uma história feliz, mas então..

  30. Tudo complexo O desenvolvimento ficou complexo e nada divertido :(

    Complexidade instrumentar VS Complexidade inerente

  31. Virtual DOM Data-binding baseado em observers Wrapper

  32. Data-binding baseado em observers Wrapper /Compiler

  33. Apesar de tudo.. Todos são ótimos pra entregar o que

    você quer fazer e é importante saber os internos pra resolver os problemas.

  34. Obrigado! igorluiz.me/talks - @IgorHalfeld