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

How to write your own Virtual DOM

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Cheesecake Labs Cheesecake Labs
December 21, 2017
Technology
0
130

How to write your own Virtual DOM

Avatar for Cheesecake Labs

Cheesecake Labs

December 21, 2017
Tweet

More Decks by Cheesecake Labs

See All by Cheesecake Labs
Cats' wellness & care
Avatar for Cheesecake Labs cheesecakelabs
0
56
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
65
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
81
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
66
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
96
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
76
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
53
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
53
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
150

Other Decks in Technology

See All in Technology
今日から始める Amazon Bedrock AgentCore
Avatar for Har1101 har1101
4
410
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
470
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
130
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
970
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
110
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
17k
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
650
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
260
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
240

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
290
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
250
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
110
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
48
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420

Transcript

  1. How to write your own Virtual DOM Daniel Leite de

    Oliveira

  2. This image cannot currently be displayed. Two Myths about VDOM

  3. This image cannot currently be displayed.

  4. This image cannot currently be displayed.

  5. This image cannot currently be displayed.

  6. This image cannot currently be displayed.

  7. This image cannot currently be displayed.

  8. This image cannot currently be displayed.

  9. This image cannot currently be displayed.

  10. This image cannot currently be displayed.

  11. This image cannot currently be displayed.

  12. This image cannot currently be displayed.

  13. This image cannot currently be displayed.

  14. This image cannot currently be displayed. Sorry… it is the

    JS World

  15. This image cannot currently be displayed. What is a DOM?

  16. Document Object Model "DOM is a programming interface for HTML

    and XML documents." "The DOM represents the document as nodes and objects. "
  17. None

  18. This image cannot currently be displayed. Virtual DOM

  19. "Virtual DOM is any kind of representation of a real

    DOM" "The Virtual DOM is an abstraction of the HTML DOM. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction." "The Virtual DOM was not invented by React"

  20. This image cannot currently be displayed. Render Process

  21. None

  22. This image cannot currently be displayed. DOM vs Virtual DOM

  23. None

  24. This image cannot currently be displayed. The last concept… I

    promise
  25. None
  26. None

  27. This image cannot currently be displayed. Let's bake it together!

  28. None

  29. Thank you!