One-Way Data Binding

[00:00:00]
>> Okay, so we now start to dive in to our one-way data binding. This is the world in which we are going to start restricting ourselves. We're gonna move from the truths of the world of user interface development within the web browser and all its ad hoc history, into the moves, the efforts, for us to make our lives more manageable as UI engineers.

[00:00:35]
And so we're gonna move to one way data binding, our popular paradigm for tackling the essential UI engineering challenge. Data that's happening in the browser to be stored and changed within JavaScript. And our view, which is what the user sees, which in the web browser is everything that is in that C++ list, technically object, the model of the page, two different runtimes.

[00:01:00]
Never the two shall mix except via formal calls to get a setter properties in JavaScript or handler functions in the DOM in C++, being called back into JavaScript to run code on a user action. What a convoluted back and forth. You wouldn't design that if you, maybe you would, I don't know, that's the [INAUDIBLE] best way.

[00:01:28]
Hard, I don't think so. Invaluable at scale to have some sort of restrictions on this structure. Thousands of points of interaction, thousands of pieces of content data, with associated underlying data and what you see in pixels. The one way data binding paradigm implemented in Angular, in Vue, in React primarily, although there are other ways of doing it.

[00:01:52]
Because these are not truths, these are efforts to provide restrictions to us that make our lives easier as engineers. It'll enable us to build scalable applications with or without frameworks, debug complex UIs, and answer the toughest interview questions. So here we go. Where was I? Let's expand our UI to be more sophisticated.

[00:02:12]
Let's expand our UI to make it more sophisticated. We're gonna add another handler. This one for clicks. Sounds like a, I don't know, whatever. This one's for clicks. This is for the fact, this is for the clicks. We are gonna change our view based now on multiple possible user interactions, in practice maybe thousands.

[00:02:35]
Okay, let's build this out. We're gonna do it hopefully a little bit more fluidly, so that you all start to, cuz you're all gonna start to be like, this again.
>> [LAUGH]
>> Creating another access object, pending another, or attaching another handler function. Yeah, okay, so we're gonna do it people, because that is what we love doing, isn't it?

[00:03:06]
In hard parts, the same thing on repeat [LAUGH].
>> [LAUGH]
>> The same thing on repeat. That's what we love doing. So here we go, with that in mind and hopefully I can start to whiteboard this out as we go. Here's our web page, web app, so to speak.

[00:03:27]
And then we know that we have in C++, we have a list of elements that model, model just being a posh word for a simplified representation or a simplified description, a simplified in this case, way of storing the content that's gonna be displayed. I say storing, well, technically anything that's on here, and that's persistent, right?

[00:03:57]
The use of this, this doesn't disappear, is on this object. If we could all list, if we could just interact with this directly, we'd be in a very different world, but we can't. Unfortunately, we have to move in a different space, that of JavaScript, or may not, unfortunately, because we do rather like JavaScript.

[00:04:19]
It has a memory for storing our data and for storing objects which are labeled. Labelled objects that are automatically inserted in that memory full of methods, our most interesting one being document, full of methods that allow us to add, edit, access, query, search, create staff in C++ in this list.

[00:04:51]
Okay, I think that is good to go. We lost our schema, dear. Next time can we have our wonderful, no, they wont be able to do because they use the mop to wipe down, don't they? All right, hey, we're not gonna forget this schema after this, are we?

[00:05:08]
app.html gets loaded in, HTML parser, interprets looks through the code and then loads onto our C++ list, known as the DOM. Everything on there will be rendered to the actual page. As soon as the HTML parser hits any JavaScript file, it spins up the JavaScript runtime. There it is and that's where we're going now.

[00:05:35]
The JavaScript runtime for memory has access to the DOM from the document object, isn't that cool? Here it is, so, there it is. And it has a hidden link to the DOM, there. And it also has a bunch of useful functions, which ones are we using here? Just query selector I think, yeah, just query selector, which allows us to access any element on the DOM.

[00:06:08]
Which makes me realize, what did I forget to do? I forgot to run my HTML first. So Justice, what are our elements on the DOM immediately from the HTML file?
>> Input.
>> Input, perfect, there we go.
>> Div.
>> Div, perfect, and.
>> Script.
>> Script, exactly, which is what allowed this JavaScript to load.

[00:06:28]
And beautiful, there we go. And those also, Justice, what happens on the page itself?
>> Get input rendered and then a div that's not really shown but it's there.
>> Beautiful, rendered, I like that term, yes exactly. Rendered, posh word for displayed. Okay, great, now let's go into JavaScript.

[00:06:46]
And we're gonna start saving our own stuff in memory, so let's go with Justice, actually, you can keep us going here. What are we gonna save in memory? Our first line, they're saving some data.
>> So we're declaring a variable post.
>> Yeah.
>> And we're saving an empty string to it.

[00:07:08]
Perfect, and remember right now we have nothing displayed on our page beside our boxes, but we wanted, from our description of what we wanna produce in our UI, is almost like a spec for our UI. Our product team said, hey, we want this to happen. We wanna be a preview text, what's up?

[00:07:26]
That would therefore have to show up in the value of the input element. That's one way we could do it. That's how we're gonna do it here. And then when the user starts typing, well firstly, they're gonna click on the cell, on the input field to start typing, that click is going to wipe the default preview text.

[00:07:44]
And let the user at that moment start typing. That typed content will then display in both the position they're typing in, because they're typing in it, the input field, and in a little preview window, the div right below. That's our ideal. Pretty basic UI. At least it's gonna start to get a little bit more complex and already we're gonna have to start watching the data flow around between, and already it's gonna get harder to do so.

[00:08:12]
So post is declared as an empty string. Justice keep me going now, what is gonna be stored into JS input?
>> So we're going to call a document and the method query selector, and pass in a string of input, called input.
>> Okay, yeah, so we're calling query selector method, don't worry we're gonna do this again and again people, [LAUGH] no, we are.

[00:08:38]
And parsing input string, which is going, what's query selector do, what three things does it do Justice?
>> It is going to.
>> How does it know where to hit?
>> It has an invisible link that links it to the DOM C++ stack. Yeah, yeah.
>> And looking for input in that list.

[00:09:02]
>> Exactly, does it find it?
>> It finds it, it finds [INAUDIBLE].
>> It better does. Exactly, exactly, exactly. And we are not though able to retrieve it back into JavaScript, instead JavaScript is going to give us an object that is going to have a link to that DOM element and a bunch of useful functions.

[00:09:27]
And that is stored into where again Justice, which.
>> Can store in the JS input.
>> Perfect, thank you. And now, Justice don't worry, now by analogy Justice, what is going to be stored into JS div? Let me just, let's put what methods we're gonna get on JS input.

[00:09:46]
There's a link to the input element. There it is. Perfect, and now what are the methods are gonna show up and just based on what we can see here?
>> I've got .value.
>> .value in line 8. See any other setters?
>> The .input on input.
>> On input, and I think there might be one more there.

[00:10:12]
Right below.
>> Yeah, and then the onclick.
>> Onclick, exactly, yeah. And look, these are on all, or some of these are on all DOM elements, it's whatever we can use. I just only show the ones which we're actually gonna use just to, yeah, keep things simple. We can find all of them on MDN, every single last one of them.

[00:10:29]
Beautiful, now by analogy Justice, because we do not want to do that again, do we? By analogy, what is going to be stored in JS div, do you think?
>> Let's see, we've got text content.
>> Yeah, so just to start off, so we call it. So we're gonna assign a JS div, a call to query selector that is going to search the DOM, linked to by the hidden link in the document object, for a selector.

[00:10:58]
That's a string that allows us to select an element of type, what here Justice?
>> Div.
>> Div, spot on, do we find it?
>> We do.
>> We bet we do, and we are going to not better return it directly, just a link to it, which will be stored as a hidden property on a brand new JavaScript object created by the query selector call.

[00:11:23]
And as you say that query selector, or that brand new JavaScript object, sorry, is going to have what property or what getter setter property Justice?
>> Text content.
>> Text content, perfect. And a link to that div. A link to that div, beautiful. And then text content as its most useful here getter setter property.

[00:11:55]
Are you already feeling people, the tediousness of joy. Yes, let me know, no one's. For the record, nobody nodded.
>> [LAUGH]
>> It was just looks of joy. Okay, perfect. We are going to display some of the content or some content here, which is we're gonna use the value setter property on the JS input object that acts as an accessor for the underlying DOM element input.

[00:12:27]
And we're going to set its value, which is currently, there's no value being displayed, cuz value is an empty string. We're gonna set its value to the value post. No, we're not, sorry, we're gonna set its value to what? We're gonna set its value to, Alexa?
>> The string what's on your mind.

[00:12:49]
>> Perfect, yes, perfect. So let's do that. jsinput.value is going to use the value setter to access the associated input element, the corresponding C++ object of type input that we know describes exactly what shows up on the page. Because of the automatic layout and render engine between the list of elements in C++ and the web page.

[00:13:27]
And we are going to set its value to exactly as Alexa said there, what's, I should have changed, I shouldn't, I need to edit accesses? Because by the looks of it, I've set it to what's up, dear. Okay, to what's up to keep it shorter for my code, so we'll save it to what's up.

[00:13:48]
And that is going to set the value here to what's up, and that's gonna show up immediately on our screen. What's up, beautiful. Now we save some handlers, why? What are some handlers we're gonna save right here?
>> Yeah, we're signing handle, we're defining handle input and then handle click.

[00:14:11]
>> Perfect, why is there still, I know that inside Y wants to say the sophisticated function definition processing here before.
>> [LAUGH]
>> But, look at that, I didn't do an uppercase C for the handle click. I need to set these as edit mode so I can live edit that.

[00:14:32]
But there we go. Then we're gonna use our setters. Oninput and on click to set the handlers for this input element. I think what I'm gonna do so we can fit them on is, I think I'm gonna write them just below here. So here's our different elements, gonna run this below here.

[00:14:54]
Handlers, right? And then for input by the user and click by the user. Okay, perfect, so let's assign them. If you can do that actually why? What are we doing in line 15 roughly, in terms of our, well talk me through the full process.
>> We're using the setter method on JS input called on input.

[00:15:22]
>> Perfect.
>> And we're passing the handle input function definition to that setter. And then we're.
>> Wow.
>> Doing the same thing with the.
>> And that same being assigned as the input handler on the DOM object in C++. So yeah, let's put that here. Let's see if I can do this small enough, sorry people.

[00:15:46]
Handle input, there it is. And then same thing for click. You're saying?
>> Yep, we're passing the handle click function definition to the onclick setter property of the JS input.
>> I think honestly that deserves a round of applause, I don't know why.
>> [APPLAUSE]
>> I think it deserves a round of applause cuz I think [INAUDIBLE] will be thinking, all very well I can maybe follow through, but to get the verbal technical communication of that flow perfect there is really outstanding.