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 - https://playground.solidjs.com/anonymous/ba6baa78-37b1-4a60-8a5f-ac34b0f47c6b
Dirty Checking - https://playground.solidjs.com/anonymous/4499a448-3a92-4886-94e2-52820817c208
Virtual DOM - https://playground.solidjs.com/anonymous/b9cdee71-a908-4a00-a36e-b41838cb660c
Fine-Grained - https://playground.solidjs.com/anonymous/e89f77f1-19b3-4286-8dff-31902de34bdd

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

The 3 Ways JavaScript Frameworks Render the DOM