This is a series about exploring Frontend frameworks' internals. Its purpose is to shed some light on the way these frameworks operate under the hood. It may not be suitable for beginners or those who don't often need to know what's happening underneath their code.
Depending on which land you come from:
watchEffectcan magically re-run every time the reactive states inside it change without explicitly being told? In React, you have to explicitly tell
useEffectof its dependencies.
If you have asked yourself such questions and want to dig deeper to find the answers, you will find this series interesting.
This series will tap into the internals of these libraries/frameworks, part by part, until we can understand and build a simplified version of each library/framework by ourselves. We might not be able to reach that end goal, but we'll surely learn a lot in the process.
And in this first part of the series, let's look into the basic structure of Frontend frameworks.
The currently popular Frontend frameworks can be divided into two categories: those with Virtual DOM and those without.
First, we'll go with the Frontend libraries/frameworks that use Virtual DOM (e.g. Vue, React). The basic structure of these frameworks can be depicted as such:
At a high level, the roles of each unit in the structure is as follows:
What about the frameworks that don't use Virtual DOM? Well, the virtual DOM renderer/reconciler and the virtual DOM tree simply no longer exist:
There's a few points worth noting here:
In fact, you can completely replace the reactivity system with another without changing the renderer and vice versa. For example:
- mobx-jsx is using MobX as the reactivity system together with Solid's DOM renderer.
- vuerx-jsx is using Vue's reactivity system (@vue/reactivity) with Solid's DOM renderer. Both offer blazingly fast performance, (much) faster than their original usage.
<div>Hello World</div>in the template/JSX when your targeted environment is Canvas or native mobile apps.
Now that we've explored the basic structure of frontend frameworks, we'll proceed to explore each of the units inside the structure for each library/framework. My plan is to explore those aforementioned units in Vue 3 as it is currently the framework I'm using extensively for my projects (though I have also used React, Solid, and Svelte to a large degree and I do plan to include them in this series).
In this part of the series, we've explored the basic structure of Frontend frameworks. In the next part, we'll continue to explore Vue 3's reactivity with an oversimplified versions of
I hope that you find this useful somehow. If you have any suggestion or advice, please don't hesitate to reach out to me in the comment section.