The Virtual DOM: enabling declarative thinking on the client-side
Composing applications from pre-built, highly coherent and loosely-coupled software components is indeed an intriguing idea. Stop! Integrating systems by assembling prefabricated software components is not a new concept. So what is so special about React components?
If the word “declarative” crosses your mind, you got it right. Construction of UI views as a set of declarations - that is the novelty. Declaring that the view must be in a certain way given a certain state - is the mode of thinking introduced by React that put jQuery into question.
Instead of diving into a discussion of the declarative programming paradigm, this article explores the critical element that enables construction of performant UIs through declarations. That is, the following examines the Virtual DOM as the foundation for declarative UI components rendered on nearly any platform.
Modern web applications are highly dynamic and require substantial interaction with the Document Object Model (DOM) - an abstract tree representation of HTML and XML documents. Since DOM is a tree representation of a web page, changes to the DOM are quick, but each update of the DOM triggers a subsequent reflow of contained elements, which entails recalculation of the page layout, dimensions, and position of the elements. Further, the repaint process goes through all the elements and determine their visibility, color, and other visual style properties. Eventually, relevant parts of the screen are updated. Reflows and repaints are expensive and are common performance bottlenecks.
The Virtual DOM is a lightweight implementation of the DOM. Its primary aim is to minimize the frequency of reflows and repaints, thereby optimizing the overall performance of the application. The Virtual DOM is built on top of the actual DOM and utilizes it in small, efficient operations. Manipulating in-memory representation of the DOM is faster and more efficient than manipulating the original browser DOM.
React maintains two versions of the Virtual DOM at any point in time. Once an element is updated, a completely new Virtual DOM representation of the application is created. It is then compared to a Virtual DOM snapshot created just before the update; this process is known as diffing. A minimal set of DOM mutations is computed, and an update patch is created. React then reconciles the browser DOM, applying the patch updating only the element that actually changed:
The Virtual DOM is an abstraction, which has the advantage of being platform agnostic. This allows React components to be mapped to different technologies, including HTML DOM and native mobile platforms.
A declarative approach to software construction certainly seems attractive as it enables developers to focus on the ultimate goal, leaving the low-level decision making to the machine. However, any declarative program is eventually transformed into a sequence of imperative steps. Thus, the success of a declarative paradigm implementation lies in the efficiency of the transformer.
In this article, we saw how the declarative paradigm shines in the context of client-side development, without sacrificing performance, by introducing an abstraction layer - the Virtual DOM.