Build a Frontend Web Framework (From Scratch)

7 The reconciliation algorithm: Diffing virtual trees

This chapter covers

• Comparing two virtual DOM trees
• Finding the differences between two objects
• Finding the differences between two arrays
• Finding a sequence of operations that transforms one array into another

Picture this: you’re in the supermarket, using the shopping list your partner gave you. You walk around the aisles, picking up the items one by one and putting them in the cart. When you’re done, you head to the checkout counter, but at that very moment your phone vibrates in your pocket; it’s a message from your partner. She realized that there are already a dozen eggs in the fridge; what’s missing is a bottle of wine for that fancy dinner you’re going to have tonight with some ...