WebIDL & WebCore

[00:00:00]
>> We have data now, but how do we display it? It says here with WebIDL and WebCore. Let's give the details of that. So our WebCore is where our C++ list is, our model of the page. We get that bit. WebIDL, this is a standardized way of describing, interacting between any features of the web browser and each other, I guess, but particularly here, JavaScript.

[00:00:26]
So these will list out, and we can take a look later on at some code in this format, exactly how you should expect to access an element of the DOM. So it stands for, so that's how we're able to cross between these streams of JavaScript, runtime, and other web browser features.

[00:00:46]
Other web browser features, so I guess web browser API technically, but say web features via a Web IDL, stands for Interface Description Language. Very fancy standardized format for describing exactly how for example query selector is going to work. So that the team building out the dorm or the team building out JavaScript or the team building out console or the team building out the Web Audio API.

[00:01:17]
All have a standardized format for describing how you're going to be able to access their features from other parts of the web browser. And that is the Interface Description Language, the standardized format for describing how you're gonna be able to access features in other parts of the web browser.

[00:01:38]
So the DOM API, which describes how you're gonna be able to access elements in the DOM, is described in this language. So the DOM API might literally write in English language query selector will work this way, this way, this way. Its implementation in the web browser will be described via the Interface Description Language.

[00:01:58]
Okay, yeah, Mark, go ahead.
>> How do you know what's a JavaScript built-in function versus what calls out to?
>> Mm-hm.
>> Browser features or C++?
>> I guess in general you go to MDN to see, that's always the answer,
>> [LAUGH]
>> But if you see an MDN, it says web browser APIs.

[00:02:14]
There's a huge list of them, including the DOM document then, you know, it's one of those, to be honest, most of them are, most of the things we use all. JavaScript lives to save data, save data and run code on it. Some things I believe are somewhere in between, and timers.

[00:02:34]
So when you run set timeout or set interval, there is a timer feature that is not in JavaScript, but actually I believe it's somewhat implemented in tandem with JavaScript. But most of those features which we use, if they're saving data, they're saving directly in Java memory and or executing on it, that's functions.

[00:02:53]
That's operators, all the stuff you'd see in like, honestly hard parts besides the asynchronous features are features of the JavaScript engine directly. Everything else that you would see in the web browser APIs list on MDN, are features in this. And do you see why people like, do you see why JavaScript's so big?

[00:03:12]
It's like a control panel for all of these features that could be almost considered, almost constitute an operating system. Is not as typical right now, but the chromium engine, which is essentially the web browser engine, is and certainly was enormously until very recently, because there could be questions about its performance in terms of building full applications and having multiple instances of Chrome running on your computer in order to operate Spotify and Slack.

[00:03:39]
But all those applications use a web browser under the hood, because you basically got a full operating system, and then just wrapped it up to make it like Slack app or Atom, the old text editor everyone used. They are all just under the hood, the web browser implementation.

[00:03:55]
You got a full operating system there with a language that people are all experienced writing as its control panel to access all those features. Let's use this accessor here. I think we can, actually, probably to save us some cleaning. We can actually do it on this same whiteboard instance here, that's right.

[00:04:16]
WebCore gives JavaScript access to the DOM and pixels. Its access is described by the Web Interface Description Language. We are now going to, so we get a bit scrappy here because we are going to continue using this whiteboard even though that's not all code on here, but there was nothing of any significance that we were doing, so hopefully, it's okay.

[00:04:39]
But we're gonna add before our script tag to elements vary HTML to our C++ list of elements known as the DOM. Okay, let's do that. So Alexa, help me out. I'm just gonna get rid of our first bit here and do it right here, nice. What's our first thing then b.

[00:05:02]
So this is our HTML code has been loaded in the parser. The first thing that happens, first thing that happens, and it's loading two elements onto this list of elements or objects in C++. Lets makes clear this is C++ is loading two elements on there, C++. Tell me, Alexa, what's the first one that's going to be on our list of elements add-on.

[00:05:25]
>> An input node.
>> Input node perfect. There it is, input node. I'll do little bullet points from now on to show, our next one is what Alexa?
>> A div.
>> Div, our next one is?
>> Our script.
>> Our script, which is going to trigger, will kick off our JavaScript engine running.

[00:05:42]
By the way, again, what an interesting structure whereby the exact position that you add the node in HTML via HTML to the list of elements determines when you start executing your associated main runtime JavaScript. What a fascinating legacy feature. Okay, now our JavaScript engine starts to execute as we go.

[00:06:06]
It has a global memory. It has a thread of execution, executing the code line by line. The first line, we've actually sort of already seen that Alexa is gonna assign what to memory?
>> We're declaring our variable post.
>> And- And storing it.
>> Hi, yeah, we never even assigned it to hey, in this new code, we just assigned it to Hi, no reassignment, there it is.

[00:06:27]
Hi, with an exclamation mark, there it is. What a great user interface this is, people. We're not even there yet. We've got some data though. And now, things get interesting. We have a object in JavaScript by the name of document. It has a hidden link out to the C++ runtime, specifically the position in it where we have the list of elements that are gonna show up on the page.

[00:06:54]
What did I do wrong, people? Alexa, as soon as I added these elements to the model of the page, what should happen via my layout and render engine?
>> They show up.
>> They show up. There they are exactly, that's my fault. So nothing in the div, we wouldn't even see it technically wouldn't even be that big.

[00:07:10]
It's sort of expands to fill with content. We wouldn't see it but let's just have it there as a kind of, so we know it's there for our purposes. Input field interest to us going right, by the way, if they did right would show up here on the DOM immediately stored data immediately.

[00:07:25]
Okay, so here we go. This object has a hidden link to this list of elements. It has a bunch of methods available to it, 30, 40. We have no five more we can go find all of them on MDN or obviously now more likely, you type to ChatGPT, one of the top 10 document methods, it is what it is.

[00:07:44]
So be fair, will it be correct? Probably for that question it would be correct, but not guaranteed. But yeah, that list of functions allows us, to have fine grain control. Well, not even fine grain control just allows us to access this list of elements in C++. That's kind of cool, it's gonna point in actually, that's technically what's going on.

[00:08:03]
On the hood of your interested, it is known as a C++ pointer that's going, a C++ pointer that is, A reference, a link to the exact place in the computer's memory store where this list is. Okay, so let's do it. Honestly, people, let's do our first line of, I guess harder code that's accessing this object there's less from JavaScript, Phil, left-hand side, what are we declaring?

[00:08:35]
>> We're declaring a constant variable called JsDiv.
>> JsDiv, okay? And just in general kind of quality technical communication, what is the right-hand side doing? Before we know what the query selector is gonna do, what in the high level is gonna be returned into jsDiv?
>> Yeah, so, we're going to initialize it to the evaluated result.

[00:08:56]
>> Beautiful.
>> Of running the query selector method on a document object.
>> Beautiful.
>> Passing in an argument of div.
>> Beautiful. So we're going to, I mean, I couldn't have said it better. So we are going to call query selector on the document object. So we're going to go look on the docket object, find a method query selector.

[00:09:16]
We know we're gonna try and execute invoke paren, that means go run it. We are not saving, so be careful to say stuff like we're going to assign document query selector to JsDiv. We're gonna assign the evaluated result, the output of calling of invoking query selector. Okay, what the heck happens when we do that?

[00:09:35]
Well three things people, and actually it is three, we can sort of walk through it one by one. Inside a query selector, three things are happening, one, go look at the link under the hood, the hidden property on that object. This by the way is a bit like the links you've seen if you've done hard parts square bracket, square bracket, scope for where the closure is referenced.

[00:09:57]
Square bracket, square bracket prototype. This hidden link is going to head out to, though in this case, this C++ list. And it's going to hit the overall list because document has a permanent link to the overall list where it's going to query search, fancy word for search, a selector of type Div.

[00:10:23]
A selector is any label we can use in here to select an element. It will turn out there are other ways we can select an element, via a class name or an ID. But for our code here, we're gonna search by what string Fill.
>> Div.
>> Div.

[00:10:42]
Perfect, there it is. Search for div in the DOM. Do we find it? Machig.
>> Yeah.
>> There it is beautiful. Okay, and I guess step three would be to bring back that, not that one. That one, that div back into JavaScript so that we can then start making changes to it.

[00:11:03]
Problem, who thinks we can bring C++ objects into JavaScript? Raise your hand who believe, very excellent, exactly. We yes, it was, scratching their head.
>> [LAUGH]
>> Exactly, we absolutely cannot So probably you already got a little hint what's gonna happen. Query selector in JavaScript is going to automatically create for us an object, okay?

[00:11:36]
This object is going to have, you can probably already guess, a link, hidden link on it. We can't console log this hidden link to that div element on the DOM. It's gonna have a hidden link to it, there it is, and even better. It's gonna be populated by JavaScript with the help of WebIDL that tells us how query selector with the input of div will behave.

[00:12:04]
It's gonna be populated with a slew of methods, functions, posh word for functions when they're on an object. All of which will allow us to edit, change, remove, update, get information from this C++ object in C++ memory, all from within JavaScript. It's kind of epic. So we have a whole bunch of them, but I guess We're gonna use and therefore will only show for now the one text content, and that will be a DOM method that's actually hitting this element out here, and that is what is assigned to jsDiv.

[00:12:48]
And so actually let's draw that on here. So this is the output of running document.querySelector called with the input of div. The output is an object. Let's draw it right here again. An object, a side.jsdiv that has a slew of useful methods on it that are actually going to go out and access via the hidden link, they're gonna go out and access that div element up here.

[00:13:22]
So, you know what? Let's just make sure we show that, even though it's not the prettiest thing. There it is, to that div element. Not the prettiest thing. Okay, beautiful. By the way, we'll see in a second what do we think our jsDiv would show in our console.

[00:13:45]
If we were to console log, just if, presumably you'd get this object with its methods and hidden link. [COUGH] That'd be nice, wouldn't it? So what do you think is gonna? Well, let's at least if it's not that, because we console log in from JavaScript, so that would make sense.

[00:14:04]
But I guess given that the most interesting part of this is the link to the DOM element, maybe would show something like DOM element type div in C++, maybe? What it definitely wouldn't show was the command that we wrote in HTML to create a div, that was a one time like that triangle bracket div thing, that was like a command.

[00:14:28]
Now please go and make a div DOM element. The output of that command in line two was an object in C++ of type div. It definitely would not show in the console when we console log jsDiv, which is a JavaScript object with a hidden link to the output of running triangle div, triangle div.

[00:14:48]
It definitely wouldn't show triangle div, triangle div with it, right? And so what's going to show on our console, surely it's going to be whatever, exactly it is the command to make the DOM element in C++ that showed up on the page, even though we console log in the object that has a hidden access to that DOM element.

[00:15:13]
Could you imagine a much more distortionary or miss representative value or more distortionary representation in the console? It's truly kind of wild, right? I think it'd be like, if you like, if you were to console log. That's my console log there. The call to a function, let's say at some 1,2,3.

[00:15:36]
So we had a function like that. What would that console log, Phil?
>> In reality?
>> In theory, yeah, what would actually go about?
>> To the console on the evaluated result of it.
>> Which would be 1, 2 plus 3. Everyone together? [SOUND]
>> Yeah, good. Good.

[00:15:53]
I don't know what I mean. Nobody, no exact No, I wasn't. I was like there's nothing like asking someone a math question, which is really just a memory question of course, right, isn't it? Think about that, shower thought, so yeah. So if you cannot log to the console a command, it's gotta be a value, it's gotta be output of doing something.

[00:16:13]
It's gotta be doing the work, and then this is a command. This is a command. Please go and create a div element, a DOM element in C++ of type div. And yet, and then we then console log the link to that in it with this object with a bunch of methods and let us edit it, but you know what shows up when we console log it in the console?

[00:16:33]
Buddy, the original commodity from HTML, couldn't be more distortionary. And that's just the designers of the console trying to help us, and I would say making quite, doing a great job, there we go.