Marc BackesA 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.
Roadmap 🚘
- Introduction (this post)
- Virtual DOM basics
- Implementing the virtual DOM & rendering
- Building reactivity
- Bringing it all together
The Pieces We Need 🧩
In order to build our prototype, we actually just need two major parts:
- A virtual DOM
- Reactivity
Virtual DOM
💡 DOM = Document Object Model, the HTML structure of a website
💡 VDOM = Representative copy of that structure
In a gist, a virtual DOM (VDOM) is lightweight JavaScript data format to represent what the actual DOM should look like at a given point in time.
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).
Also, having a VDOM makes updating the UI more performant. You can manipulate the virtual DOM with the full power of JavaScript (create nodes, clone nodes, inspect nodes, etc.) which is really fast and when you're finished with the manipulation, just update the elements in the actual DOM.
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).
Reactivity
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 follows ⚡️
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.
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
Original cover photo by Joshua Earle on Unplash, edited by Marc Backes.
