One-Way Data Binding UI Elements

[00:00:00]
>> All right, so, let's keep going, let's get started. Phil, help me out. We're gonna go around the room. Phil, line one of our JavaScript. With that in mind, that we're gonna have to make everything on the page depend on our data, we're gonna start off by having our post as, we've got three states here.

[00:00:17]
Sorry, Phil. We've got three different stages of our data here. Post can be undefined by the looks of it, posts can then be empty string before they start typing, and then posts can be whatever the user is typing, the value of what they're typing. So undefined, so that's the shift of mentality we have to go to, which is, define what the user can see in terms of different possible values for our data.

[00:00:43]
It's quite a nice mental model, I quite like that as a mental model. So what's our first state that our data can take, Phil?
>> So we're gonna declare a post let variable and initialize it to the value of undefined.
>> Beautiful, okay. A post initialize it to undefined.

[00:01:03]
And then what are we going to, in line two, store in our global content there. Feel free to keep going and interrupt me as I go as well.
>> Yeah. So we're gonna declare a variable jsInput and initialize it to the evaluated results of running the query selector method on the document object, passing in the argument of input.

[00:01:27]
>> Beautiful, feel free to keep going.
>> Okay. This is going to allow us to access or to reverse the actual C++ DOM, searching for a node of the value of input which it finds.
>> Yes it does, there it is.
>> And because we can't bring that C++ object back into JavaScript-

[00:01:51]
>> Right.
>> We create an accessor object.
>> Brilliant.
>> Is stored under the jsInput.
>> Brilliant, which has a whole bunch of useful properties that act as getter setters, which I include?
>> Which include, let me scan through here, which include the dot value.
>> Yes, exactly, value.

[00:02:13]
All the way down to the bottom there's a couple more there.
>> Which include the on click and-
>> Perfect, I think that's it. Is that it, everyone?
>> On input as well.
>> Did I get on it? Sorry, I thought you said on input. Yeah, I got all three of those.

[00:02:27]
Brilliant, they are all acting as getter setters to add values, handlers, whatever, to the DOM C++ object, hooray, beautiful. That is what came out of running querySelector. Once my pens work, it's so much, makes me so happy. There's the hidden link and then there's the functions. I'm just sort of showing the shape, right?

[00:02:51]
Hidden link and then the methods. Okay, by analogy, what are we saving in jsDiv? Why?
>> Yes, what are we saving to it?
>> Yeah, just buy analogy, I mean, unless people feel like we're not at the stage where we want to just do it by analogy. Is, we're at the stage where we wanna do it by-

[00:03:09]
>> [LAUGH]
>> By not drawing it, by just saying it.
>> I stand with my tea.
>> Yeah. All right, good, good, good. So what's jsDiv gonna have in it after querySelector has finished executing?
>> We forgot the textContent accessor.
>> Yes, textContent. Why don't we start with what element in the DOM it's going to have a hidden reference to.

[00:03:31]
>> Sorry. Yeah, it's going to link to the first div that are located in the DOM.
>> Brilliant, no people the first div. Exactly, well put, and as you say, what method?
>> textContent.
>> Beautiful, perfect, sweet. That's brilliant, I love it. So, well done, and now let's save our three functions.

[00:03:49]
One of them is a big deal function. The other, to be fair, actually, they're all pretty important, right? One of them is our spray out, and the other is our pinpoint in. Yeah perfect. Sorry, the other two are our pinpoint in. So let's have all of those defined for us, why?

[00:04:07]
>> We are defining the function dataToView.
>> Perfect.
>> Also defining handleclick and handleInput.
>> Handleclick, I reordered these here. It has no effect, of course, notably in JavaScript, because we would love maybe in some way to be able to determine the order of things happening on this page via the order of code in JavaScript.

[00:04:33]
But I did actually switch. You can see, handleclick and handleInput and then the onclick and oninput assignment. Just because the user is gonna click first and then start writing second, but it has obviously no effect, is just for our visual experience. Okay, then we have, let's make sure it's clear that separate.

[00:04:56]
Now we get to adding these two functions as handlers on our Input element on the DOM. Alexa, can you help me with that, in line 19 and 20? We'll do the first one.
>> Okay, so we're gonna find our jsInput object.
>> Yep.
>> And use the onclick setter to set our handleclick function as the callback.

[00:05:19]
>> Yep.
>> For handling a the event that a user clicks.
>> Perfect, brilliant, handleclick function. Yeah, and that is gonna be set as the, yeah, honestly the click handler, callback function. That's not a bad name for it, exactly. So for click, don't worry though. Look at that, that's amazing.

[00:05:46]
I'm so relieved as you can see, handleclick function, handleclick. Callback function, callback because it's gonna be called back in. Can I separate these with a line just to make it clear, right, but they are object, object, object in C++. Instantiations of classes that can produce a div object in the dominant list in C++.

[00:06:18]
And the next one, I guess by analogy we can do again, Alexa, we just do exactly what you said, again I won't write it again no.
>> Yeah we find the JSON input object with that link to the input element on the DOM. And set the handleInput function as a callback for handling input event.

[00:06:42]
>> handleInput function. Okay, great stuff. I'm feeling a bit like, people are gonna be, yeah, yeah, yeah, we got it. But I tell you, that's the nature of hard parts. I'm making excuses for it here, but that is the nature. So we put our handlers on, sweet. Now, now we want to update what the user sees.

[00:07:08]
We're not worrying about the input and div, that was set by HTML. That might become a question in its own right in a bit tomorrow. However, all we're determining that can be changed by the user is the content of elements, the value or the text content or whatever.

[00:07:24]
Meaning, there should be nothing in the value and text content of DOM elements, in other words, no content that the user sees that is not traceable back to some data in JavaScript. What a great restriction on ourselves. What a way to be guaranteed to know what's displaying on the page, it's whatever's here.

[00:07:41]
And then check the data to view converter to see what the conditional logic is to determine what's gonna display on the page based off that data, based off that state. State-driven views, yeah, we've heard multiple words for it. But this is a paradigm shift, honestly, in UI engineering.

[00:07:56]
Okay, so let's run our dataToview converter function, dataToview, dataToview, execution core, brand new, everyone together.
>> Execution context.
>> Beautiful, and its job is to convert our data to our view. Now that conversion might include determining. It means based on the data, determine what to display on the view.

[00:08:28]
So that might be as we're about to do here, if post is undefined, you're not gonna display undefined, you're gonna use that information to determine what to display. And that's where you have to start reasoning about your, and that's where you start to see there's a lot of conditionals in your UI code to determine of your underlying state, what's gonna end up being displayed.

[00:08:48]
So with that in mind, all right, we have jsInput. We're gonna use our value setter, right? Whatever's on the right hand side is gonna be stored on value here and show up to the user. All right, is post undefined? Let's go to Justice, is post undefined?
>> If posts is undefined.

[00:09:13]
>> These posts are undefined is our state. Is it undefined?
>> It is undefined, yes.
>> It is undefined. If it's undefined, what are we going to assign to jsInput.value or what are we going to use our set a value property to assign to the C++ object as its value?

[00:09:31]
>> You're gonna set a string for what called, what's up?
>> Brilliant, exactly. So post is actually undefined therefore, we evaluate the ternary to evaluate to become the value of the first thing in it, which is, what's up. Anyone have a better word for that?
>> Operand?
>> What a show.

[00:09:52]
>> Yeah, no, operand.
>> That sounds about right, all right, first operand, I know. Good stuff. So it's gonna be what's up, right now is, it's the.
>> [LAUGH]
>> I don't know, I've done it, I don't, I'm sure, he's very nice actually. Well, yeah, he's very loving.

[00:10:12]
Okay, 'what's up', there it is. Okay, and that is gonna use the setter method, set a property value to set that as the value on our DOM element, and that's gonna show up as our preview text or our, sorry. Yeah, as a, whatever it's called. Default text, perfect.

[00:10:35]
Then we are gonna use our, this is interesting. We're gonna do the same thing to determine what our content of our div will be. Using our textContent setter and it's going to be whatever the value of post is, which is undefined and helpfully. Fairly helpfully, our API for the textContent setter, getter property on a div, evaluates or converts or assesses undefined and assigns an empty string.

[00:11:10]
That's pretty nice. That ensures that we don't need to write any conditional logic to say, if it's undefined, please don't post undefined as a text. It actually evaluates to an empty string so nothing shows up, beautiful. I honestly, I do really love that now everything we do runs from data through a bunch of clever conditionals to determine not that clever here, but rearranging.

[00:11:34]
Engineers will do clever conditionals here, to determine what, based on the state, what based on the data, will show up on the view, on the page. Perfect, and we've done it. We've got our one function here, we're done.