Emulate HTML with String Interpolation

[00:00:00]
>> Now we take a nicer, relaxing turn to produce some highly visual code for, I guess, concatenating text, joining up strings. One of these is very not visual, line 3 to 5, that's terrible English, isn't it? Very not visual. Not very visual, line 3 to 5. One of these is wonderfully visual, hopefully with the help of our template literals, there we have one.

[00:00:34]
In line 10 where we are gonna be able to get out output Hello, Jo, and our command's gonna look a lot like our output. So here is our, should I draw this whole thing up? Yeah, why not. Here is our webpage. Ian, is it too wide?
>> It's possible.

[00:00:55]
>> Its possible.
>> [LAUGH]
>> I would say that's great, that's a great review, okay. And then here is our C++. Wow, look at this! This is really exciting to see the markers working as well. This is our C++, list always has body in it by default, list of elements.

[00:01:18]
And then we head to JavaScript land over here where we have our memory. My goodness, I am very excited by the marker quality, isn't this amazing? All right, where we're going to do some regular old JavaScript here. For the fun of witnessing visual code and all its benefits, but let's get started.

[00:01:46]
Paul, Paul line one tell me what's going on and keep me walking through.
>> So
>> Line 1, what are we declaring?
>> We are initializing a variable name.
>> Yes.
>> And assigning to it the value of string Jo.
>> Beautiful next line we are declaring what?

[00:02:05]
>> We're declaring another variable textToDisplay.
>> textToDisplay.
>> And also assigning a string to that and that string is Hello comma space
>> I like it, [LAUGH] I was very, very happy with that. I like it, yes, excellent, Hello and comma space. I thought we were doing actually something more interesting but no.

[00:02:27]
Great, we're just declaring it and assigning a string. Now we get some interesting stuff. What are we doing here, Paul?
>> So we are reassigning a value to textToDisplay.
>> Yeah, textToDisplay.
>> And that is using the string function concat.
>> Nicely put by Paul, just excellent technical communication, Paul.

[00:02:49]
Yep, I'm passing concat what?
>> Concat name.
>> Name which is here
>> Name is Jo.
>> Jo, perfect, and that is going to evaluate to a new string, Hello, Jo, and that's what we're reassigning to textToDisplay as you say. So now Hello Jo, but we wanna add another thing, which is what?

[00:03:13]
You know what, we're gonna do this whole thing so you can really appreciate imperative code. Code where you describe it line by line so the computer can understand, tell me what happens.
>> So the same thing, we are-
>> No, nice try, no, okay, sorry
>> [LAUGH]
>> No, no, no.

[00:03:26]
>> You're reassigning the value of textToDisplay and we are assigning to it the textToDisplay the string function concat.
>> Yeah.
>> And so we're adding to the end of the string an exclamation point.
>> You know what, there we go. I shouldn't have done that, but beautiful. I hope you can see, does the code we wrote look anything like our final output?

[00:03:51]
It couldn't look less [LAUGH] Ian is like, to my mind, yes.
>> [LAUGH]
>> No, come on.
>> Strings are immutable and it really bugged me you just added to that in memory.
>> Okay, all right, yes, we'll just do it. Let's go to our nicely intuitive visual version.

[00:04:13]
What are we gonna do in line 10, an alternative with the help of template literals. We're not here to sort of per se do template literals, although we will end up using them from now on in our code. But to appreciate that visual code for visual output is a really nice thing.

[00:04:33]
So, Justice, help me out here, what's happening in line 10?
>> Yeah, so we are reassigning textToDisplay to the string. But it's a little different, we're using backticks instead of-
>> Yeah, backticks here.
>> Double quotations, and so that enables us to insert a string Hello comma space but then we can use template literals to assign a variable.

[00:05:03]
>> Yeah, right, at least it's gonna evaluate to, right here, it's gonna evaluate to Hello, Jo! Cuz named value is Jo, and we can assign that to textToDisplay. The input looks like the output. It's not perfect but the input looks like the output and that's really nice. Let's read what it says.

[00:05:24]
String interpolation gives us visual code known as template literals here. The closer our code can be to visual to mirroring it's visual or graphical output, the easier for us as developers. Could we do something similar with our main code by creating visual elements? And the answer, I hope, could we emulate our HTML with semi visual coding?

[00:05:50]
Take a look at this, we are gonna describe the information that's gonna go into producing a DOM element of a type div using an array that actually looks quite a bit like an HTML block of code. Let's see what I said here. Starting with a unit of code representing each piece of view, JavaScript array with all the details, Element 0 is gonna be a type, and one is a content.

[00:06:21]
And then a function we're gonna see that takes in that array and produces a DOM element as its output. We're gonna get a mirror in our code in JavaScript of the actual DOM element, here it is. Yeah put all our element details in an array and our create element, add contents' instructions into a convert function.

[00:06:42]
Here it is, we're gonna have a list of information that when we run convert on that list produces hopefully an object that has an accessor in JavaScript to an actual DOM element. But we're gonna have a manifestation of it in JavaScript. In practice, how this will be implemented, we'll see we're gonna have to handle a ton of edge cases for it to work out any sorta scale.

[00:07:10]
But it is hard, we're getting in JavaScript a visual representation. Imagine if we could take that little unit of code, that element and have a list of them down the page as sub-arrays of an array. And that we could reorder them and have that, reorder those elements on the page, giving me UI composition and if I could then have those little sub-elements be produced on mass by a function, I would be very, very happy.

[00:07:49]
All right, so-
>> [LAUGH]
>> Let's do it. Here we go, we have our DOM set up, we have our web page. I think we are gonna use the document object, so let's actually put it in memory as well. Phil, if you don't mind helping out with the first, thinking about memory?

[00:08:03]
>> We're gonna declare a variable called name and initialize it.
>> Forgive me, sorry, just because we're in JavaScript running in the web browser, and we're gonna use document. What's the first thing that gets preloaded?
>> In the document object body?
>> Yeah, just a creation of document object, great.

[00:08:18]
>> I'm sorry, I thought you jumped pass it, yep your document object.
>> Perfect document object which has a hidden link or hidden property to where?
>> Our DOM.
>> Perfect, to our DOM, there it is, brilliant and it has on it a bunch of methods and getter setter properties like body, as Phil said.

[00:08:37]
But which one are we gonna use here in this code?
>> Create element.
>> Create element, there it is. And now as you say, let's get building some data. But look at this people, we are gonna create an intermediary. No, that's not the right meaning of the word intermediary, is it?

[00:08:55]
An intermediate step before displaying that data on the view we're going to present what it will look like with some dynamic data placeholder, by the way, we should have HTML add that right? We might not need any of this stuff in JavaScript which we will then convert into actual DOM elements.

[00:09:20]
How nice, all right. Phil, on that note, let's go through line 1 and line 3 here.
>> At line 1 we're declaring our named variable and initializing it to the string of Jo.
>> Jo, perfect there it is, next line.
>> Next we're going to declare a divInfo variable and initialize it to an array with three elements in it?

[00:09:42]
>> Two elements there, I think, yeah, two elements.
>> Two elements in it, the string div and template literal.
>> Yeah, and I get this every time, people, but this now evaluates here and now. This is a statement that needs to be evaluated. This expression needs to be evaluated, sorry.

[00:09:58]
So this is gonna evaluate to what, Phil?
>> The string of Hi, Jo!
>> Jo, exactly. So we now have a visual map, both a sort of conditional on how our data ends up being by line 3 in our JavaScript code. This doesn't look like JavaScript, it's so picturesque.

[00:10:19]
And then actually in our memory the full manifestation with the existing state, the existing data that's gonna end up being produced as a DOM element. So we then save a function that's gonna do that work, Phil?
>> Yeah, we're gonna declare a function convert.
>> Beautiful, and yep, sorry.

[00:10:37]
>> You can store that in memory.
>> Perfect, and then all the way down to line 14, we declare?
>> Declare a variable called jsDiv and initialize it to the evaluated result of executing our convert function passing in the argument of divInfo which is our array.
>> Beautiful, which means a brand new.

[00:10:57]
You want to do together [LAUGH].
>> [LAUGH]
>> A brand new, three, two, one.
>> Execution contract.
>> All right, beautiful, and into it we go and we are gonna match our parameters and our arguments. And let's match them, y.
>> Yes, let's match them.
>> That's right, there's a strict rule, you're not mentor asking question, very fast intonation and then throw someone's name in at the end before they get, so why?

[00:11:26]
We actually didn't convert with the input of divInfo, which is this array. And we are then going to match our parameter which is node with our argument, which is an array. So talk me through what happens there.
>> Excellent, on line 7.
>> Yep.
>> We're gonna look up the zeroeth index on node.

[00:11:47]
It's the string div-
>> Beautiful.
>> As it turns out.
>> Great, yeah, better to declare our const on the left first, if you don't mind.
>> That's right.
>> Declare our const on the left first there.
>> Sure, yeah, so we're signing into memory a variable named elem.

[00:12:02]
>> Beautiful, and then we're going to call exactly as you say, createElement() with what as its argument?
>> Yes, so on the divInfo passed in to the node parameter,
>> Yep.
>> The zeroeth index, there's a string div that's actually the signature of the createElement method. So the createElement method will create a JavaScript object.

[00:12:30]
>> Yeah, yeah, we remember what it does, don't we?
>> And the accessor object for what will be a C++.
>> Newly created DOM element over here of type what?
>> Div.
>> Div, beautiful. Perfect, div and this is, by the way, really nice. Thank you Dwight, excellent technical communication.

[00:12:51]
We passed in node position zero which was the string div from our description of what we wanna show up on the page, visual description in JavaScript if we wanna show up on the page. And we've now created, using that, a DOM element of that type div. And we now have an access to object in JavaScript for it that has a link to that div.

[00:13:19]
There it is, all the way across. And it has a bunch of useful getter setter properties like textContent. And it's that that we use in the next line, tell me what happens, why?
>> Yeah, we look up the item at the first index of the node array. It's the string Hi, Jo!

[00:13:42]
And then we assign that, well, we send it to textContent which is a getter setter method which will put that as the text content, that would be-
>> Beautiful, I love that we have,
>> DOM node.
>> Hi, Jo! Beautiful, and that is not attached. Well, fine, we return that out into what global constant, why?

[00:14:07]
>> Into the newly created jsDiv.
>> Beautiful, with textContent, and we have our link to the div. Beautiful, I had an appendix, I really wasn't here to sort of show that process because, have you seen that process? Yes, I wanna show us what's new here is a JavaScript description of what's gonna show up on the DOM and therefore on the page.

[00:14:35]
I probably should append it so you can see the full route through. If we did write document.body.appendjsDiv or document.body.replace children jsDiv, we would see a div with Hi, Jo! And I just think it's really cool that we now have in JavaScript a visual representation of our information that's gonna display.

[00:14:57]
If we were to write C++ code and just, I don't know, know in our code that we could describe this DOM element directly without using the very imperative accessor object that when we got to recall a getter setter. Fine if we could access this directly but we can't, meaning if we can create in JavaScript the representation of it and then simply call a convert function that does the displaying, that is pretty cool.