Enabling Change of Content

[00:00:00]
>> Goal two, enable the user to interact. To tap that content, to tap publish, to tap the like number 7 and change to 8. Interact with the content they see and change it. Presumably changing underlying data, otherwise it'd be inconsistent. Otherwise, I could see the number of likes goes from 7 to 8.

[00:00:17]
But under the hood, how many likes are there actually changing? Okay, sounds fine, but this is where the problems begin. Now you may or may not have had this intuition. And if you don't have this instinct, then good for you. But for me, when I look at a screen, when I see the number 7 as the number of likes on my tweet.

[00:00:39]
And I say to myself, I got to change that to 8 by liking my own tweet.
>> [LAUGH]
>> Of course, okay, this is getting old, but getting very old. But when I do that, we just said there needs to be data changing. Otherwise what is it to say that that number of likes has changed?

[00:00:57]
I remember when I first tried to build an application when I was like 21, 22 following a tutorial. And this was just so, so hard for me to track. And maybe all of you didn't have this instinct. But when I'm engaging with something I see on the screen.

[00:01:10]
And I tap to like the number 7, and it changes to the number 8, like I just said, there needs to be data changing. And I'm like, yeah, I can see it, there's a number 7, and now it's 8. I can see it, it's number 7, now it's 8.

[00:01:24]
And that's a trick. That's a trick by user interface engineers to pretend that what I'm seeing is what's changing. Because what I'm actually seeing there people, right? That's my gone pen. What I'm actually seeing there, people is. Maybe I can show it here, I guess is. Let's be more realistic and say, no, no, okay, there it is, 7.

[00:01:48]
That's 30 maybe, 30 little on-off lights, right? And then this is another 30. When I click 7, if I've gotta change the number 7 to 8, This collection of 30 lights that I'm seeing, the pixels I'm seeing has no knowledge that is as number 7. It has no knowledge of the number 7.

[00:02:19]
And I don't know maybe you all got this already. But when I see the number 7 on the screen, and I tap it and it changes to 8, I'm seeing my data change. What are you worried about? But actually, that would imply that 30 randomly ordered pixels, or pixels in a shape, that they don't know what they are.

[00:02:38]
Can become 30 other ordered pixels. But these are two totally separate things. I can't add one, I can't add one to a shape of pixels. Now you may be like, yeah, obviously. But for me, when I see the number 7 and I click on it and it becomes 8.

[00:02:54]
I'm confident I'm changing the data of the number 7 to 8 right there. I can see it, [LAUGH] it's right on the screen. And I'm not wrong for thinking that because that is our nature from one year, two years old. The epistemic and the metaphysical, been practicing saying those words, are identical.

[00:03:10]
The epistemic is do I know the pen is here? I can see it, I tap it. I can see it, I know it's there. I tap it, and it moves. I tap it, and it moves. All right, what I see is the underlying data. It is the underlying, when I see if I have one pen and make it two, now I have two pens.

[00:03:29]
I can see the two pens. This sounds like-
>> [LAUGH]
>> It's like someone's raving online [LAUGH] talk. But I can physically see the atoms, the underlying state of the world. Which is where is this pen's atoms in the universe, are reasonably. Maybe we wear glasses, maybe we have, to be honest, in a deeper sense, do we really know?

[00:03:51]
>> [LAUGH]
>> But what I see roughly is what I get. We learn it from two years old. What I see is what I get. And the job of a user interface engineer is to try and emulate that in a world in which that is 100% not the case.

[00:04:04]
What I see, the pixels on the screen, is not what I get. That what I get is under the hood, in the computer stored in memory. What I see is 30 lights in a shape that change into another shape of 30 lights. I know that doesn't sound like that, well, okay fine.

[00:04:21]
But that means there must be somewhere else in the computer. And again, maybe you all thought this. But there must be somewhere in the computer, there has to be data. There has to be somewhere stored, I don't know, likes of 7, not just so that it's consistent, but literally so that you can add one to it.

[00:04:40]
I can't add one to that, I can add one to this. So I can run code to change. In fact, there's no way the user can change what they see, which is what we wanna be able to do, without changing some underlying state of the universe. In the real world, they're the same thing.

[00:04:56]
The state of the universe is the pen's physical atoms are in this location. And when I see is the reflection of those, my epistemic, my knowledge is the same. On the computer [SOUND] could not be further from the truth. The one that gets me on that one was always like, particularly games like Mario.

[00:05:13]
If I tap on Mario I know that I am moving Mario to jump up. Tap, Mario, and Mario jumped, no. Instead, when I tap Mario, I tap an area of pixels on the screen. It sends a message to somewhere where it says height is 10 units, for example.

[00:05:28]
Adds 1 to it, now it's 11 units, pings back and says, please paint those pixels in this new area. But I tap Mario, Mario moved, uh-uh. I tap Mario, it sends a message saying. Please change underlying state, underlying data, underlying content, the height of Mario. And then from that new information, display the pixels of Mario X number of pixels further up.

[00:05:49]
May not be one, maybe 10, maybe whatever, but yeah, there's underlying data. So yeah, I add 1 to 7 and I get 8. And now I can send a message back to display the number 8 and turn those into pixels. Maybe you all knew that, I don't know.

[00:06:06]
For me, I just didn't get that. But that means that for anything the user sees to change, there must be underlying data changing. Otherwise, how is it even changed? Pixels don't have any knowledge of what they are, so they can't change. But we've got a problem. If that means data's got to change, the fact that HTML is a one-time display, we can never go back.

[00:06:32]
We run through this code one time, and we never return to it. So even if there were data, number 7. Okay, great, how do I ever change it? I can't, it was a one-time display. Okay, let me just dwell on that, right? HTML, we literally go through and grab this code one time.

[00:06:48]
It is taken one time, we do not return to it. I checked, we definitely don't.
>> [LAUGH]
>> This is a one time display. I cannot get back to it. Which is why that question about the error handling was like, yeah. Cuz it's really that basic. Now, to be fair, it can still have error handling at that point, right?

[00:07:03]
It implies that it's really, really basic, but it's wonderfully intuitive for it. Okay, so HTML is one time display of content. Or sorry, put it more precisely, one time addition of elements to the DOM. But the DOM is a list in C++ with real data. That's real data.

[00:07:23]
So yeah, user can change what they see. Yeah, yeah. That's real data, and you know what, users can change that data. They better be able to. Because users can change what they see by taking action on the page. Which given that this is a direct description, in the DOM, every single thing on here directly mirrors what's on the page, that might make sense.

[00:07:46]
So let's have something written, what's on your mind. Let's say I'm writing, Hi. That's all I have to write.
>> [LAUGH]
>> You're very nice. Okay, that's going to immediately add to my C++ data structure, my list there. Again, people, just think this is a JavaScript array, it just happens to be in C++.

[00:08:10]
All C++ engineer is gonna add there the string Hi. People, I just said that what we need to do to have users see change when they take action is to store and change data. Well, we're storing some data. Well, in fact, we're changing the data. That would therefore implicitly have been initially an empty string, right?

[00:08:30]
And then they start writing. And now there's a string, it would be like empty string. They write that at H. Now there's an H here. Then, right i, now there's an i in here in this sort of element. This would literally be an object. For example, the property, I don't know, value and Hi.

[00:08:44]
In C++, they're changing the data stored problem. Well, let's see. I think it says here. Typing the input field changes DOM data, changes C++ data from empty string to Hi. However, we can't run any code ourselves on the DOM in C++. If only we could. People, if we could run code on this position in C++, my God, life would be a lot easier and also more risky all at the same time,

[00:09:11]
>> [LAUGH]
>> But a lot easier as well because we have a full dynamic store of data here in C++, capturing all the content on the page. Unfortunately, we do not get to write any code in C++ in the browser directly, and people ask me why. It's I think combination, it's not unusual for applications that enable you to write code, the application that does the parsing, interpretation, and compiling or some sort of compilation stage of that code, to be created in C++.

[00:09:44]
Right, that's just the heavy lifting language, which you can then have other programming languages execute with it. And that's not unusual. But I think it is unusual for them to be so set. I would put it also down to no one expected the web browser to be building out highly complex user interfaces with thousands of elements, thousands of views of interactivity.

[00:10:07]
They thought it was gonna be a bunch of text with a few clickable links. That's what they thought. And so they never imagined that this DOM they built in C++ being only intractable, well, initially by HTML to add stuff to it one time, was going to be a problem.

[00:10:21]
To the point that you remember the first ten years of the web browser, so maybe 95 to 2005, was all about trying to let real applications be built within it. Maybe you remember Java applets, those things you downloaded that were all Flash. These were all efforts to recognize, you know what, in the web browser, this ain't a proper development environment.

[00:10:44]
So let's try and develop. And then I think it was probably Jobs who said, Steve Jobs who said no. And that's where we've ever since had a growth of frameworks, frameworks that try to work within our existing structure. And make it more like a traditional application developer environment for UI.

[00:11:04]
So we can affect our data, change it, basically go from an empty string to a full string by typing, by the using action. However, we cannot run any code in C++ on that data. So this is good as stuck. Well done, we put it in input, but I can't then display it somewhere else.

[00:11:23]
I can't add an exclamation mark to it. If it were a number, I can't change the number 7 to 8. I cannot run or execute any code in C++ on that list of elements that I want to display and I want to make dynamic. I want to make changeable the content, can't touch it.

[00:11:40]
So, goal two, enable users to see the content, change the content they see, sorry, but problem. Step two is impossible with our original approach to step one. HTML was a one-time display, can't change that data, it was done. DOM, yes, can display data but can't run code on it.

[00:11:58]
We can't run code on it to change it. We have to use what everybody together.
>> JavaScript.
>> Yeah, nice, exactly. We have to use JavaScript to create and save content. Posh name data, even posher name, state. State you can think of as being, well, it's just all the same.

[00:12:14]
But it's all the information about what's being displayed. If you're in Excel and you tap a cell, right, and that opens, double tap a cell, start writing, that has data associated with that action. The data is cell is now focused, true. Versus when you weren't tapped on it, cell focused, false.

[00:12:35]
So every single thing, that's why states probably more general term than data, but they're all the same. Data, state, and/or content are all the underlying things you're trying to represent as pixels on the page. But the DOM has it, but you can't run code to change it. We have to go to JavaScript to save, create data content, and then have the ability to run code to change it.

[00:13:01]
And there ain't nowhere else we can do it in the web browser.