One of the most significant developments in recent history has been the rise of the virtual DOM as a technology that can help speed up development. Let's take a look at what the virtual DOM is and how it can help you develop projects faster.
- [Instructor] One of the most significant developments in recent history has been the rise of the Virtual DOM as the technology that can help speed up development. So let's take a look at what the Virtual DOM is and how it can help you develop projects faster. Now before I get to talk about the Virtual DOM, it's probably a good idea to talk about how the regular DOM works. The DOM is of course the Document Object Model, the conceptual structure that is generated when you create a website. You can preview that structure on any website by using a tool like Google Chrome and looking at the Inspect option.
So let's go to this page right here. And I'm going to right click anywhere on this page and select Inspect document. Now you can see the DOM is represented here by this hierarchical tree. And I can open up the different parts of the DOM by clicking on these left arrows. In Google Chrome, I can also navigate the DOM down here. So this representation of the structure of the page is what we call the DOM. And when I make changes to the page, let's open this back up right here, and I'm going to look for one of these list items.
So you'll notice that when I make a change to the page right here, the DOM on the page is going to update. So if I delete this right here, it's going to make a change to the list of information. So that is part of what you can do with the DOM in dynamic applications. It allows you to modify the current page without having to reload anything on the page. Now since a DOM is a representation that has to be converted into what the user sees, when we create a traditional application, a lot of time has to be spent updating the code that is displayed to the user.
Now that can slow down your applications, especially if we end up doing a lot of unnecessary updates. If you have an application like the one we just looked at where you display a lot of information that comes from data, whenever the state of that application changes, in other words, whenever the data changes, you have to spend some time redrawing the way the data looks to the user. Now we usually do that by redrawing the entire section of code, or perhaps performing a page reload. Now that can be costly in terms of performance.
The Virtual DOM in the other hand is a virtual representation of the DOM in memory. When something about your application changes, the data for example, you can make changes on this Virtual DOM instead of in the real DOM. The framework that you're using that uses this technique can compare what is being displayed on the screen with the state of the data and only changes the real DOM when it is necessary. So if it notices a deletion on a record that is not being shown on the screen, it doesn't have to redraw the information like it would in a normal program.
Now that means that we don't have to worry about adding and deleting DOM elements when we modify our data we only have to worry about the state of the data and the framework is going to take care of updating the DOM for us. Let's take a look at how that works in a project. Here is the repo for this application that I was just showing you a second ago. And this happens to be 'React' which uses the Virtual DOM. There are other frameworks that do that as well. So I'm going to go into this process/js folder right here, which is where our main application code is.
And if we go into app.js, this is the main sort of component that displays the application. The part of this code that displays the list of elements is right here. You can see that it's not a lot of code and it actually calls another component that I'll show you just a minute, but the important thing to note here is that all we're doing is displaying a list of elements from some data. This data that we're calling filtered appointments here, 'filteredApts'. So this is actually being displayed by this AptList.js here.
So if we take a look at this you'll notice that it's pretty much just some HTML that uses that data to display a list of several elements. There's not a lot of actual Java scripting here. Sometimes we just say: well, display the pet-name and display the appointment date etc. etc. The other interesting thing here is that the only other thing this component does, is handle a deletion when somebody clicks on one of those delete buttons.
So when that happens, it executes this local method called 'handleDelete' and this handleDelete actually passes what it's doing onto the main functions. If we look right here, it's calling a function via a property that identifies which item we click on. So if we go back into this js folder, and we go back to this app right here, you'll notice that I don't have to worry about deleting the actual element in my list display.
All I have to do is display that element and tell it which data to display the element with. Now if we take a look at the function that actually deletes the record, you'll see that all I'm doing here is deleting the record from the appointments list. I don't actually do anything to display the list itself so I don't have to go and figure out, hey, I deleted the third element from this list let's go ahead and remove that element from the DOM. And in the same way if we go back into the application, you'll notice that if I search for something, so if I search for 'spot' it is now displaying that list, but it's showing you a different version of that list.
One that has been filtered by whatever I type in here. The code for displaying the list doesn't really care what the list looks like. All it cares about is displaying a list based on some data. What the Virtual DOM is doing is analyzing the actual data and it's passing that along to the list component. The list component only cares about displaying the list. It doesn't care about updating the DOM at all.
Once you make a change to that data, the list component displays a new list only if it needs to by looking at the Virtual DOM with the changes from the data and then looking at the actual DOM and determining whether there should be a change based on a comparison of those two things. And that's what makes the Virtual DOM so powerful. You never have to write a lot of code worrying about deleting elements from the current HTML DOM, adding elements to the HTML DOM, all you care about is modifying the data and you give the list component a single job, display a list.
So here's some pages where you can get more information about the Virtual DOM. There's a couple of frameworks that are very famous for using the Virtual DOM, specifically Vue.js, as well as React. And we've got a couple of courses on how to work with those and you can see those right here as well. Now if you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked, or have asked in interviews, connect with me in LinkedIn or just about any other social media network like Twitter or GitHub @planetoftheweb
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.