Create Your Own Vue.js From Scratch
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 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.