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

Berani Bikin Virtual DOM Sendiri?

Avatar for Fathurozak Buhari Fathurozak Buhari
November 26, 2019
Programming
43
0

Berani Bikin Virtual DOM Sendiri?

Avatar for Fathurozak Buhari

Fathurozak Buhari

November 26, 2019

More Decks by Fathurozak Buhari

See All by Fathurozak Buhari
How No-Code Helps Us Focus on Innovation
Avatar for Fathurozak Buhari rozakbuhari
0
48
Qore: Backend-as-A-Service Workshop
Avatar for Fathurozak Buhari rozakbuhari
0
120
Qore SDK in Action
Avatar for Fathurozak Buhari rozakbuhari
0
120

Other Decks in Programming

See All in Programming
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
140
安いハードウェアでVulkan
Avatar for Fadis fadis
1
960
Make GenAI Production-Ready with Kubernetes Patterns
Avatar for Bilgin Ibryam bibryam
0
110
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
270
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
360
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
330
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
Avatar for Renaud MATHIEU renaudmathieu
0
200
GNU Makeの使い方 / How to use GNU Make
Avatar for kaityo256 kaityo256
PRO
16
5.6k
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
120
ハンズオンで学ぶクラウドネイティブ
Avatar for Tatsuki Minami tatsukiminami
0
120
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.9k
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
320

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
770
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
360
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
370
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
420
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
250
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

Transcript

  1. Virtual DOM

  2. Pesan Sponsor!

  3. Jangan lupa untuk selalu support open-source!

  4. None

  5. Apa itu Virtual DOM?

  6. DOM

  7. Virtual DOM

  8. Kenapa kita butuh Virtual DOM?

  9. DOM manipulation is Expensive!!!

  10. None

  11. ๏ Parse HTML ๏ Destroy existing child nodes ๏ Create

    child nodes ๏ Recompute styles ๏ Recompute layout ๏ Update Javascript variables Browser Reflow https://developers.google.com/speed/docs/insights/browser-reflow

  12. Apa yang Virtual DOM lakukan untuk memecahkan masalah tersebut?

  13. source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html Diffing Algorithm

  14. Bagaimana Virtual DOM di-Implementasi-kan?

  15. None

  16. Beberapa komponen dari Virtual DOM: • DOM Abstraction: createElement() •

    Renderer: renderNode() • Diff checker: diff() • Patcher: patch()

  17. DOM Abstraction

  18. createElement()

  19. None
  20. None

  21. Renderer

  22. renderNode()

  23. None

  24. Diffing Algorithm

  25. None

  26. Patching

  27. None

  28. Full-usage

  29. None

  30. Thank You!

  31. Fathurozak Buhari @rozakbuhari https://github.com/rozakbuhari