Create Your Own Vue.js From Scratch - Part 1 (Introduction)
Tags: vue, javascript
Published: 2020-03-08 14:29:25

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](https://evanyou.me/) himself (as part of [Vue.js Amsterdam](https://vuejs.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 🚘

1. Introduction (this post)
2. [Virtual DOM basics](https://dev.to/_marcba/create-your-own-vue-js-from-scratch-part-2-virtual-dom-basics-58fm)
3. [Implementing the virtual DOM & rendering](https://dev.to/_marcba/create-your-own-vue-js-from-scratch-part-2-building-the-vdom-3bp2)
4. [Building reactivity](https://dev.to/_marcba/create-your-own-vue-js-from-scratch-part-3-building-the-reactivity-5162)
5. [Bringing it all together](https://dev.to/_marcba/create-your-own-vue-js-from-scratch-part-5-bringing-it-all-together-4eb3)

## 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](https://twitter.com/_marcba/)

*Original cover photo by [Joshua Earle](https://unsplash.com/@joshuaearle?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on Unplash, edited by [Marc Backes](https://marc.dev/).*