The Magic Behind JavaScript Frameworks: A Peek Under the Hood

How popular JS frameworks actually work and what they’re doing behind the scenes

Photo by Josh Hemsley on Unsplash

JavaScript frameworks like React, Angular, and Vue have become massively popular in recent years. As a web developer, you’ve probably used one or more of these frameworks on projects. But have you ever wondered what’s actually happening behind the scenes when you use that handy React component or directive in Vue?

In this article, we’ll peek under the hood to understand the key concepts that power popular JavaScript frameworks. Knowing what’s happening behind the abstractions these frameworks provide can help you leverage them even more effectively in your projects.

Automagical Re-rendering with Virtual DOM

One of the most useful features of many JavaScript frameworks is that they automagically re-render your UI whenever the underlying data changes. But how do they actually pull this off? The answer lies in something called the “virtual DOM”.

Here’s a quick overview of how it works:

// Current DOM state
<div>
 <p>My name is Sarah</p> 
</div>
// We update the name 
let name = 'Michael';
// Framework creates updated virtual DOM
<div> 
 <p>My name is…