Using Lists for UI Development

[00:00:00]
>> We are now coming to our expansion of that visual dom. We did just see, didn't we? The ability we have now with the fact that our data is the only source of determination of what shows up on the screen. The view via the DOM in C++, the data in JavaScript is the only cause, the only input of that via our description of it through this create-v DOM as Alexa shared with us.

[00:00:30]
And then that was converted into actual DOM elements, and then they were appended using replace-children to the body and showed up. That visual Dom, we can now make more flexible, we can now enable ourselves to create reusable pieces of it. We can create reusable parts to it. And that's gonna give us the ability to compose, to join up little pieces of UI user interface, that is the combination of content with the back and forth between our user action and the underlying data, and then display it again in our view, that combo.

[00:01:11]
And we're gonna move those little units around to build out entire applications and that's where we go now. I starts with our list. There's our list we recognize there. We've got our input, our name, our handle function. We've got our div, our hello, okay? Lists are central to UI development.

[00:01:30]
We have a list of two arrays with their element details. In reality, these lists are gonna be 49 long. 49 video elements in a Zoom meeting, 100 tweets on a Twitter timeline. Yeah, which we already had someone hilariously say in the chat. My tweets were less impressive than a wipe-down on the board.

[00:01:51]
This feels very rude, but very nice. We need tools for dealing with lists. To apply code functionality to each element, it's gonna be here to take the details of each element and convert them into an actual DOM element. We saw last time to the chagrin of, let's try to use that word correctly, I don't know, I might have used it wrongly, to the chagrin of Ian.

[00:02:16]
That we were marking out here individually we wanted to access vDOM 0 and vDOM 1 manually. What if I have three elements in that DOM, in my virtual DOM, my JavaScript DOM? What if I have 10? What if I have 50? And what if I wanna move them around in different order?

[00:02:33]
Well, ain't gonna work here. So we're gonna try and generalize this by instead of manually selecting element zero and one from our virtual DOM in our update DOM method, function, sorry, the converter we are going to map over that list of elements that comes out of running create V DOM.

[00:02:51]
Currently, he's got two elements. We're gonna map over it, that is to say we're going to loop and hit each element with the convert function. Our map function, if you've been to a higher-order functions hard parts, you'll recognize it, our map function allows us to hit with a function pass to it.

[00:03:10]
We'll see down here it's gonna be the function convert to hit each element of our vDOM, our visual DOM in JavaScript and apply one by one our convert function to each element. And then to collect that list of converted elements in a array called elems. Great, but our replaceChildren is going to expect not a list of linked accessor objects of real DOM elements, it expects individual arguments.

[00:03:47]
So we're gonna introduce our lovely spread operator that's gonna spread out our list into individual arguments that's gonna work with our replaceChildren's design where it expects individual elements, not a list. So here we go. Here we have to apply the map function and to convert an array of elements to individual inputs to pass through a function.

[00:04:10]
Our functions that don't take arrays, we're gonna use a spread syntax that spreads out a list into individual arguments. So we can see it here. We have our virtual DOM, our visual DOM, our JavaScript representation of what's gonna show up on the page. Obviously, we're not doing this in full with this code.

[00:04:28]
We're having to define name. We have our handle function in there. We then have our convert function that will take in one of those elements in the vDOM and the next one, one by one by using map. So in line 15, we are calling on that vDOM, which is our array of sub-arrays, we're calling map on it and passing it the function convert, which is going to inside of map, a built-in JavaScript method, hit each element of vDOM with the convert function.

[00:05:05]
And that convert function will take in as its input first vDOM position zero. Then it'll run all over again with vDOM position one and if there were vDOM position two, it would hit that one. And the output of each of those will be stored into, here we go, I've got my little comments here.

[00:05:23]
Convert runs vDOM 0 push to a new elems array. Convert vDOM 1 push to a new elems array. And unfortunately, he's got a list replaced children's what would that so we're gonna spread out elements into individual arguments. Just for people who are not aware of map, mapping over vDOM is spreading resulting right now.

[00:05:41]
Adding new elements doesn't require any new code, that's useful. We can add new elements to this vDOM is gonna require no new code. We're just going to map is flexible to the number of input elements. The map call will handle many elements in the vDOM as there are.

[00:05:55]
To add our array of DOM elements, we need to convert them to individual arguments. Spread syntax allows an iterable such as an array expression with string to be expanded. To work with the append method, which can't handle arrays. Can I just say I definitely copied that? Spread Synex allows an iterable such as an array.

[00:06:11]
As I read that, I was like, I definitely did not write that, I copied that off the Internet somewhere. All right, okay, it makes sense, right? Spread allows something that can be iterated over like a list to be spread out as an array expression or string to be expanded into individual inputs to be passed to a, in this case, append or replace children methods that can't handle arrays.