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

Berani Bikin Virtual DOM Sendiri?

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Fathurozak Buhari Fathurozak Buhari
November 26, 2019
Programming
48
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
54
Qore: Backend-as-A-Service Workshop
Avatar for Fathurozak Buhari rozakbuhari
0
120
Qore SDK in Action
Avatar for Fathurozak Buhari rozakbuhari
0
130

Other Decks in Programming

See All in Programming
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
290
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
610
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
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
280
Next.js: The final boss of Web Performance
Avatar for Estela Franco guaca
0
260
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
150
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
160
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
590
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
110
Workers Cache を知る
Avatar for syumai syumai
0
360

Featured

See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
4
4.4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.8k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
360
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
620
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600

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