Build a Frontend Web Framework (From Scratch)

3 Rendering and the virtual DOM

This chapter covers

• Defining the virtual DOM
• Understanding the problems the virtual DOM solves
• Implementing functions to create virtual DOM nodes
• Defining the concept of a stateless component

As you saw in chapter 2, mixing application and Document Object Model (DOM) manipulation code gets unwieldy quickly. If for every event resulting from the user’s interaction with the application, we have to implement not only the business logic—the one that gives value to the application—but also the code to update the DOM, the codebase becomes a hard-to-maintain mess. We’re mixing two different levels of abstraction: the application logic and the DOM manipulation. What a maintenance nightmare!

Manipulating the DOM ...