The 3 Ways JavaScript Frameworks Render the DOM

Ryan Carniato explains the three primary strategies declarative JavaScript frameworks use to update the DOM: replacement, dirty checking, and virtual DOM.

That's right, there are only 3. There may have been dozens of JavaScript frameworks over the years, but how they render the DOM is almost always identical. In this video, we will look at the approaches all Declarative JavaScript frameworks update the DOM to better understand how they work and their pros and cons. [0:00] Introduction [0:51] Anatomy of a Template [1:39] Render by Replacement [3:23] The DOM is slow? [4:47] Dirty Checking [9:15] Virtual DOM [13:06] Fine-Grained [16:09] Conclusion Examples: Replacement - playground.solidjs.com/anonymous/ba6baa78-37b1-4a60-8a5f-ac3… Dirty Checking - playground.solidjs.com/anonymous/4499a448-3a92-4886-94e2-528… Virtual DOM - playground.solidjs.com/anonymous/b9cdee71-a908-4a00-a36e-b41… Fine-Grained - playground.solidjs.com/anonymous/e89f77f1-19b3-4286-8dff-319…