Onur Dayıbaşı
Sep 21 · 2 min read

First of all Why we need Virtual DOM? What is the problem with DOM? The problem first presents John Resig who is the creator of JQuery The DOM is a Mess. He discusses the DOM API and its weirds

Main flow examples

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

(Vue, React) developed Single Page Applications has lots of divs and div hierarchy on one page. and it’s hard to manage to access divs. How to manage DOM manipulation(add, delete or update). It’s too difficult. Lots of event handling also required. Virtual DOM provides an abstraction to DOM so you don’t think browser-specific details. Developers thinks only on component-level events.

React Component Lifecycle

Mounting

Updating

Unmounting

Error Handling

The state diagram shows how component lifecycle flows and events trigger according to states

https://vuejsfeed.com/blog/learn-the-differences-between-shadow-dom-and-virtual-dom

Diffing Algorithm

Hold the same DOM hierarchy in memory and when you make some updates Virtual DOM node changes. In the background, the diffing algorithm runs and finds different nodes and apply to real DOM. The cycles continue in same logic.

https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060

Virtual DOM

Shadow DOM vs Virtual DOM

Frontend Development With JS

Frontend Development With Javascript

Onur Dayıbaşı

Written by

Senior Frontend Developer at Thundra

Frontend Development With JS

Frontend Development With Javascript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade