In looking at Angular 9 and the latest release of the Ivy Angular compiler, we may benefit from going back and reminding ourselves of the differences between Virtual DOM, Incremental DOM and Shadow DOM. By the way, DOM stands for Document Object Model and is an Object-Oriented API that represents the actual HTML or XML content of a web page. Note that under normal conditions, any page repaints (content changes) are queued on a dedicated queue for RequestAnimationFrame calls that may have higher priority than other task queues. We should also keep in mind that repaints/DOM changes impact performance and user experience and therefore need to be minimized. I won’t digress here, but task queues are the way how the browser’s Javascript runtime creates async calls. Imagine us queuing things on the side and picking them up on the next run, that is pretty much how Javascript browser async works for the “most” part.
Now, back to talking about DOM.
Virtual DOM:
A virtual DOM (such as the one implemented in ReactJS) is a Javascript data structure that mirrors the real DOM. Changes are first made to the virtual DOM and then periodically a “DIFF” operation takes place where the real DOM is traversed and compared against the virtual DOM structure. Changes detected in the virtual DOM are applied to the real DOM during that diff cycle. The main advantage of using a virtual DOM is controlling the frequency of the screen repaints which as we said, is an expensive operation. Down side is the mirrored DOM tree takes up more heap memory.
https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
Incremental DOM:
Incremental DOM is a standalone Javascript library. It has a very small footprint and focuses on minimizing heap allocations and therefore has a smaller memory footprint than the Virtual DOM. Angular Ivy compiler transpiles our Angular objects into incremental DOM instructions code. Learn more about incremental DOM in here http://google.github.io/incremental-dom/. Another article comparing incremental and virtual DOM that i recommend reading: https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36
Shadow DOM:
Angular encourages composition (and so does every modern framework, ex: .net CORE, MVC, etc.). Visual element units in Angular are called Components. A component has both markup code that defines how it is rendered visually as well as a Typescript or Javascript code that defines the data model and UI logic driving that UI markup (which we should keep to a minimum and abstract our logic in a services layer). Shadow DOM makes it so all styles applied to a component are scoped to that component. In Angular, we can control that behavior using ViewEncapsulation, which by default emulates the implementation of the one natively supported by modern browsers . More on this in another blog post. For now, I will leave you with a few excellent references for those of us who are curious to read more on Shadow DOM.
https://developers.google.com/web/fundamentals/web-components/shadowdom
https://angular.io/api/core/ViewEncapsulation
PS. Going back and reading my post, I managed to use the word “DOM” 34 times. Not bad, huh? ?
