The Virtual DOM: enabling declarative thinking on the client-side

Georgy Shabunin

21 Jul 2019 Development, React

Georgy Shabunin

3 mins
The Virtual DOM: enabling declarative thinking on the client-side

Despite some controversial opinions on React.js, a JavaScript library for building user interfaces, many will agree that certain underlying concepts have changed the game for client-side development. React.js brings back the delightful experience to client-side development, attracting both frontend and backend developers alike.

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.

Motivation

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.

Implementation

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.

The concept of Virtual DOM is popularized by the React.js library. It is an implementation detail that allows developers to create declarative UI components without sacrificing performance. It does not require to manually handle the changes to the DOM on every update. Each element is represented as a JavaScript object in the Virtual DOM. An update of an object in the Virtual DOM eventually mutates the original DOM:

Virtual DOM code

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:

DOM reconciliation

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.

Discussion

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.

You may also like

Let’s redefine
eCommerce together.