Building the Vue 3 VDOM on Stage

Rate this content
Bookmark
The video covers the concept of Virtual DOM, explaining it as a virtual representation of the actual DOM. It decouples rendering logic from the actual DOM, making manipulation easier. The video dives into the Virtual DOM's use in non-browser environments like native mobile apps and WebGL renderers. It discusses how tags, attributes, and content are represented as nodes, properties, and children, respectively. The H function in JavaScript is used to create these nodes. The talk also explains the process of creating and mounting virtual nodes in Vue.js, using functions like mount and patch. The speaker highlights the performance optimizations of the Virtual DOM, including its use in frameworks like Vue.js and its advantages over direct DOM manipulation. The video includes a live coding session demonstrating how to build a Virtual DOM from scratch, touching on topics like creating virtual nodes, mounting them, and updating the DOM. The video concludes with a Q&A session, addressing common questions about the Virtual DOM, its components, and its differences from the actual DOM.

From Author:

This talk is designed to show people what a virtual DOM is, and what it is used for. We'll see a bit the theory of it, then build a simplified version of the Vue 3 VDOM on stage from scratch - step by step! After the talk, people will have more familiarity with the black box that sometimes is "VDOM".

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

A Virtual DOM is a programming interface for HTML and XML documents that represents a document as a tree structure. It is a virtual representation of the actual DOM and can be manipulated via JavaScript. Virtual DOM is used by frameworks like Vue.js to optimize DOM manipulations by keeping a virtual copy in browser memory and synchronizing changes with the actual DOM.

The Virtual DOM decouples rendering logic from the actual DOM, making it easier to programmatically manipulate and inspect. This decoupling allows for performance optimizations, easier reuse in non-browser environments like native mobile apps or WebGL renderers, and simplifies the development process by handling DOM updates efficiently.

To build a virtual DOM, key components include a function to create virtual nodes (e.g., the 'H' function), mounting functions to attach nodes to the actual DOM, unmount functions to remove nodes, and patch functions to update the DOM efficiently when changes occur.

Vue.js uses the Virtual DOM to manage DOM manipulations. It creates a virtual representation of the DOM using JavaScript objects, which lives in the memory of the browser. Vue.js then synchronizes this virtual DOM with the actual DOM, allowing for efficient updates and re-rendering as needed without excessive performance overhead.

While Vue.js and other frameworks like React use Virtual DOM to improve performance and efficiency, some smaller frameworks like Petite Vue opt out of using Virtual DOM to reduce complexity and overhead. The choice to use Virtual DOM depends on the specific needs and goals of the project, balancing performance optimization with framework overhead.

In Vue.js, creating a virtual node involves defining its structure, including tags, properties, and children, using a function like the 'H' function. Mounting a virtual node then involves attaching this node to the actual DOM, which is handled by Vue.js's rendering system that updates the DOM based on changes to the virtual node's state.

Marc Backes
Marc Backes
31 min
15 May, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to Virtual DOM

Short description:

Today we are going to build a virtual DOM. Virtual DOM is a programming interface for HTML and XML documents. It represents a document as a tree, with nodes and children. It can be accessed and manipulated via JavaScript. We will build on the DOM of the official Vue.js website.

All right. So my talk might cut a little bit into the Q&A session, so that's why I'm just going right ahead with the presentation.

So today we are going to build a virtual DOM, but first we are going to look a little bit what it is.

So a little bit about myself first. My name is Mark, and this is where you can find me on Twitter. That's where I'm most active. So if after this you still have questions that I can't answer here or you just want to talk in general, just hit me up there. I'm DevRel Lead at WeAreDevelopers, where I help organize conferences such as our World Congress in July, which is super cool. I'm co-organizer of the Bellevue Chapter. It's the Belgian chapter of Vue.js. And I'm most recently a student pilot, which takes up all of my time which I don't spend working. So if there's any aviation geeks here, hit me up later, we can talk for hours about this stuff.

All right, so let's take a look at Virtual DOM. Well, what is it? Virtual DOM is a document object model. But what does it mean? So it's a programming interface for HTML and XML documents. And this represents a document as a tree. So you have a node and then you have one or more children. And then this could have one or more children. And until the end, there's nothing more to do than just render out whatever it is. It is to render out an image, text, whatever. And it can be accessed and manipulated via JavaScript. And this is how a DOM looks like. The DOM we all know and love. This is actually the DOM of view3.org. No, view3.org I think. Vue.js.org. Yeah, sorry. Yeah, official Vue.js website. You can see here some containers, like the app and the VP app, which then have children and so on and so on. So this is what we are going to build on.

2. Understanding the Virtual DOM

Short description:

Virtual DOM is a virtual representation of the actual DOM. It decouples the rendering logic from the actual DOM, making it easier to manipulate and inspect. It can be used outside of the browser, such as in native mobile apps or WebGL renderers. In the virtual DOM, tags are represented as nodes, attributes as properties, and content as children. The H function in JavaScript can be used to create nodes with various structures.

Okay, so now we have a little bit of a picture of what is a DOM? Let's see what is a virtual DOM. And it's actually what the name suggests. It's a virtual representation of the actual DOM. So this could be, for example, JavaScript objects, which is exactly what we are going to do today. And this thing lives in the browser, or in the memory of the browser, and it is synchronized with the actual DOM. And this is what Vue.js uses under the hood, and also some other frameworks. But for example, Petite View doesn't use a virtual DOM, which is fine.

Now, you might ask yourself, OK, but some use it, some don't use it, but why should we use it, or why do we have a virtual DOM. Especially in the morning we heard Avenue say it has a lot of performance overhead, or some performance overhead. But let's take a look. So the great thing here is, it decouples the rendering logic from the actual DOM, and it's easier to programmatically manipulate and inspect the whole thing if we want to do something custom. It's also easier to reuse outside of the browser, for example, if you do a native mobile app, or, for example, a WebGL renderer. I heard Avenue once answer a question in an interview where he said that someone built a, based on the Vue 3 virtual DOM, a WebGL renderer, which is pretty cool.

All right, before we start building this thing, because we take a look at the actual DOM, what is it that we need to build here? So let's take a look at this very simple HTML markup, and what do we have here? So we have these things that we call tags, right? So we need to represent tags in our virtual DOM. So let's just write it down. We need tags. What else do we need here? These are attributes. It could also be a function, like an onClick event or something like that. So let's just call this properties, and then we have the last part, which is our content, but we're not going to call it content because it's a tree, so it's just the tree has children. We just call it children. But as you can see in this example, children isn't the most intuitive way of putting it because it could be just text, it could be just one item in there, or it could be various children. So in the last part it makes most sense to call it children, but this is how it's called.

Alright, so to create nodes we have this H function or Hyperscript, which means just JavaScript that produces HTML. So let's take a look at what we can create with this. So I represent here three different things we can do. Here you can see in the third parameter, or the third argument here, it's a text. So our virtual DOM, our DOM can have a text. What else can it have? It can have another virtual node which then has, in this case, another text. But it could be until, like, it can have as many children as necessary, or as you want. And then we have the third example, which is you have an array of these nodes.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.