Build a Frontend Web Framework (From Scratch)

8 The reconciliation algorithm: Patching the DOM

This chapter covers

• Implementing the patchDOM() function
• Using the objectsDiff() function to find the differences in attributes and styles
• Using the arraysDiff() function to find the differences between CSS classes
• Using the arraysDiffSequence() function to find the differences between virtual DOM children
• Using the Document API to patch DOM changes

In chapter 7, you saw how the reconciliation algorithm works in two phases: finding the differences between two virtual Document Object Model (DOM) trees and patching those differences in the real DOM. You implemented the three key functions to find differences between two objects or two arrays: objectsDiff(), arraysDiff(), and arraysDiffSequence() ...