Profile picture of Marc Backes (very handsome) Profile picture of Marc Backes (very handsome)
Marc Backes

Create Your Own Vue.js From Scratch

March 8, 2020 · by Marc Backes
Profile picture of Marc Backes (very handsome) Profile picture of Marc Backes (very handsome)
Create Your Own Vue.js From Scratch 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
  • 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 a 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 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.