DOM Templating Exercise

[00:00:00]
>> Evgenii Ray: We are going to do some live coding, a very simple exercise. So we have some html template that we need to utilize and we have our createCardComponent function. So we need to implement the function that takes the title and the body, this is the string variables. And sets it to the free tech and card_body_content.

[00:00:25]
There are multiple ways how can you implement this, but let's see what we can do here. And here we call this function so this function should return HTML element. And then we append this element to the container. So to start with exercise, check out the repository. I hope you will have the link to repository in the chat, or you can also click on the slides.

[00:00:53]
And open the folder begin, and open the file index.html. We don't need any compiler or complex setup it will be enough just to work with HTML, use your favorite editor. And now I'm going to switch to the code. So I opened the index.html. So, here we have our container, then we have our HTML which is right now stored as a string.

[00:01:21]
And also we have our HTML element, the function that creates our car element. Right now it's empty, so our goal will be to implement this. So, what can we do here? We could potentially just say, for instance, container. And then set the innerHTML. But then we would have to work with the string directly, and representing the HTML as a string is not the best way to do things.

[00:01:52]
So we want to have some kind of reusable way, how can we represent the templates. So, and apparently the innerHTML, we have the special tag called template, so we can remove this line and in the head I'm going to use the template tag. So what this template does, it basically stores your HTML in the lightweight object in memory.

[00:02:22]
So, this content is not querryable by any DOM API. So any external scripts will not be able to access this content. So, it's also not rendered on the final render tree. So if you use a try, tries to traverse the DOM tree, they will not be able to see that this template is utilized.

[00:02:47]
It's kind of a lightweight representation of our card. We edit the card template into the template tag, and we also assign the ID. So the content of the template is not queryable, but the template is, so we need to clone the content of the template. So let's update, let's first query the template.

[00:03:09]
So we can do document getElementById, and then we use our card template. So now we have the reference to the card template. Let's clone the content. As we know, the templates use the fragment, so we need to clone the content of the fragment for the special method that I'm going to show now.

[00:03:36]
So we're gonna access the template. And the template has the property called content. So the content gives us the fragment that we need to work with. So, then I'm going to use the clone node. And I'm providing the true flag to do the deep call. And then I use the first element child that will return me the article.

[00:04:04]
So by default the, first, it will return the fragment but we need to access this element, and this element is the element, and that's why we use the first element child. So now we have our article. We want to update the article content. So we need to set the card title and the card body content, so let's query that.

[00:04:28]
So let's call it cardTitle and cardBody and then we use the document querySelectorAll and then we're providing two selectors. The first one is the card title, then we need to pass the
>> Evgenii Ray: Card_body_content_class. So now we selected two elements, cardTitle and the cardBody. And now we want to update the text content of this elements.

[00:05:02]
So we use the text content property and then assign title. Then we need to use cardBody and then assign thE textContent to the body variable. Okay, now we're returning the card and if we run this example, so now we're creating a new card element and then we'll return this card element from the credit card component function.

[00:05:32]
Assign some random text and if we run the browser we see that this doesn't work, and let's see why [LAUGH]. And apparently, we're trying to set the text content so the property undefined. So probably we have a mistake in how we query things. Yeah, so we don't need to query the document, we need to query card.

[00:05:57]
So if we fix that, yeah, now we have our card rendered and all elements set. And this is it for the first exercise. Okay, let's have the quick look of how could we potentially solve that. The first solution would involve, had treating the article as a string. So we could create the placeholders within the context and just replace it with the replace function.

[00:06:23]
But this means we will need to work with a string. And then we could append the content using the innerHTML. But this is not the best way because we will have to pass the code content, here in innerHTML. And if we want to repeat this operation, then it's not the most efficient way.

[00:06:45]
So what we did is we just use the document fragment, which is the lightweight representation of HTML element. And since it's shielded from, causing reflow, we can do whatever we want in memory. So it can also be reused many times, and it says isolated from the queries. And yeah, we utilize it to keep our markup component in HTML, which is a very natural place where we should keep such things.

[00:07:16]
And then we just updated our function, and the solutions and here is the final solution. Before we jump to the next section, do we have any questions?
>> Student: Can you just explain again briefly why doing it that way doesn't trigger reflow?
>> Evgenii Ray: Yeah, so when you modify the fragment, it's not within the DOM tree.

[00:07:43]
It's actually just in memory. So when you update any properties, so it doesn't trigger any reflow. So, if you could potentially have the element or in the DOM tree and you start updating the elements of the properties of this element, then this would cause reflow because the element already in a DOM tree.

[00:08:03]
But since it's in memory, yeah, we can do any operations and it's disconnected from the main DOM tree. The only thing that counts the reflow is when we use a pen child. So the DOM API is actually pretty simple, it has some limited set of methods that we can utilize.

[00:08:21]
And it's very useful if we're trying to build some low level things. But we need to think about the caveats that the DOM API has, for instance, make sure that you utilize the HTML life collection wisely. So don't query too many elements and then don't try to read the HTML left collection because it will result to quadratic time.

[00:08:48]
For most of the cases, the queries lecture has a good performance and you can just utilize it almost everywhere. So for rare cases when you really need to have the live collection, make sure that you work with a small subset of data to reduce any performance impact.