A lot of developers see these reactive frameworks such as Vue.js, React.js, Angular.js as "magic" since they do - well as it seems magic. But that's not the case. In fact, recreating Vue-like functionality is not all that difficult, and I want to prove it to you in this series where we create step-by-step a reactive framework (or at least a prototype of it), similar to how Vue 2 works in the inside.
*I only have 1 year of professional experience working with Vue.js, but I attended an 8-hour course given by Evan You himself (as part of Vue.js Amsterdam where I learned how Vue.js works on the inside and made me really understand how the "magic" behind the scenes works. This blog series is meant to teach everyone who is interested what I learned on that fantastic workshop, in a comprehensive way.*
- Introduction (this post)
- Virtual DOM basics
- Implementing the virtual DOM & rendering
- Building reactivity (coming soon)
- Bringing it all together (coming soon)
The Pieces We Need 🧩
In order to build our prototype, we actually just need two major parts:
- A virtual DOM
💡 DOM = Document Object Model, the HTML structure of a website 💡 VDOM = Representative copy of that structure
It is meant to decouple the rendering logic from the actual DOM. This is helpful to reuse it in non-browser contexts (think about server-side rendering for example).
In our little project, we'll create our own functionality to create a virtual DOM and how to render it to the actual DOM (renderer).
Once we have our VDOM, we need to write our reactivity. This is a set of functions and classes to have our system react to a state change.
So in simple terms, when the state changes, we get notified so we can do something. That something at the end is rendering the VDOM to the actual DOM. And that it where our experiment stops. It will be the proof-of-concept the our own tiny Vue.js
What's next ⚡️
In the next couple of weeks I'll try to write a guide as comprehensive as possible so you can get a good grasp on what the magic of Vue.js is actually about. Once you understand what's going on under the hood, you'll definitely have a better time understanding the framework as a whole.
Next chapter: Virtual DOM basics
Stay tuned 😉
If you like my content and updates, your best bet would be to follow me on Twitter. That's where I usually hang out under the handle @_marcba