Rendering HTML Under the Hood

[00:00:00]
>> We just experienced for the first time people, our DOM, our model, a list of elements in C++ in just a list, just like a job list in C++, that allows us to display content on that web page. So here we go, and there's our web page, and I'm gonna draw in blue our list in JavaScript, our model in C++.

[00:00:30]
Soon it will be in JavaScript, hopefully, and so we'll see, but there it is. This is going to be our list. Now technically, we know it's an object data type, but just for our purposes for thinking like is an ordered list down the page, everything is added to here will show up on this webpage.

[00:00:50]
Here's our webpage and we get to write in, The beautiful language of HTML, we get to write code instructions that add things directly to a C++ list of elements. That's kind of amazing. And those are then auto-displayed, rendered through the layout and render engine. The layout part is going to analyze exactly how to place the elements that we list out on this particular web browser's view, particular web browser's screen, particular device, and then the pixels are gonna be determined by the render engine.

[00:01:36]
Actually, by the way, side note, the output of the render engine is gonna be an image, a bitmap image of that particular view, that screen pinged out to the graphics card every, I don't know, 16 milliseconds, 60 times a second. Isn't that wild? This altogether is known as WebCore.

[00:02:00]
This is the core set of technologies that do the job of storing a list of elements in C++ to be loaded on the webpage, and then converting that list into actual pixels. We do not get to write well we'll see the C++, why don't if I want to I get to write the beautiful HTML which allows me to list stuff down the page in order.

[00:02:23]
Think about how intuitive that is. I wanna add some text to the page, I write the text. I then wanna add a box below it. I get to write the name of that box in the line below in my text file. Don't ever underestimate how thought free design that is, so let's get into it.

[00:02:41]
Line one of our HTML people literally, you think you are coming to the hard parts of user interface engineering to walk through some HTML. Here we go. Line one, why? What are we doing in our first line of HTML? What are we adding to our DOM in our first line,

[00:02:56]
>> Putting up some text.
>> So we've got what's on your mind, that's gonna add to our list of elements, the text as our first element, what's on your mind. Beautiful, there it is. And that's then going to automatically display what, if I wrote is one more time, what's on your mind on, on the page, isn't that beautiful?

[00:03:24]
There it is. Our next panelist is going to add what, Phil?
>> Gonna add an input.
>> Yeah. Input element. Yeah, they often call them on the DOM, the list of C++ elements. They often call it a node, node on the DOM, but it is you can sort of think of this as an element, an element and an element on the page, an element in an HTML code.

[00:03:46]
They often call these HTML tags. I would not call these then tags, these become kind of nodes. I think the term element works kind of the whole way across. Yeah input, that's gonna add an input element. I'm actually gonna literally show them as well as bullet points kinda of listed down.

[00:04:02]
And there it is, my input field, that's not very nicely drawn. And then, I get to add and this is where we get to see our next elegantly designed feature of HTML. I love all of these people in this room have been explicitly, I've been told, are mid to senior level engineers.

[00:04:25]
And every one of you is like [LAUGH], how did we get punished with this? But everything else we're gonna do, people in hard part is going to carry back to this goal. Everything else we do in UI hardware is going to try to make it as intuitive as this.

[00:04:43]
So, there it is, a button, and look at this. If I wanted to have. So let's produce a button, okay? That makes sense. If I wanted to have some text inside of a button on a screen visually, that's my output is going to be a button with text inside of it.

[00:05:02]
How would I write, how would I design my programming language when the primitives designer to make it as intuitive as possible to have text inside of something on the screen. While I have it that I write the text inside of button, and there it is we let it know that the button is ending with a little forward slash, but I have text inside of a button.

[00:05:26]
And so on my model of the page, I will have a button added, and then almost like a sort of nested, like a sub element, our text of publish, and then that will create, publish. Or think like a sort of sub element or if you were thinking about it's in an array, this is where a list it would be a sub array within the existing array.

[00:05:49]
If it were an object, you imagine sort of be a sub object reference from within an existing object, and that then shows up on the page accordingly. Now, what about on that same note if he wanted to divide up the page into some areas to make it easier to think about its structure, and not just have one giant list of elements on the page?

[00:06:11]
What if we could sort of cluster elements into subdivisions on the page. Maybe we can think about this as a subdivision of the page, that page has got longer here. We can think of it as a subdivision of the page. Into that, we could place some other elements.

[00:06:31]
How would we do that? Well, just like above. We get to place inside of other elements, in this case a division, physically on our HTML code, in our text file, three elements, and they're gonna show up inside of that division on the page. Now, we're not gonna be able to see this division until we put content in it.

[00:06:51]
It doesn't automatically have any border or anything like that, so you won't be able to see it, but it's there on the page. And on our list of elements on the page, it is also there. So we add our division. I mean, by the way, the names of these in the C++ implementation in this list may or may not correspond directly to the almost commands to create them from our HTML file.

[00:07:15]
So well what are we adding in the next line? Let's have Matic, what are we adding in the next line inside our division?
>> Video tag?
>> Video, so well let me think, what am I adding on the DOM, Matic.
>> Another video. [CROSSTALK]
>> Element or node, or exactly, a sort of sub-element, a video node with what information.

[00:07:36]
Well, where we'll find it, which by the looks of it, is gonna be on our own machine, on our own computer. And it looks like it's gonna be a very interesting video of carpool karaoke outdoor, and there it is added to the list of elements with the URL.

[00:07:57]
There it is, with the link to it, sorry, the exact link. And then we can add, exactly, we can add some further text in P for paragraph. There it is, P paragraph. Paragraph and that's going to have some text of firstly love Les Mis. My goodness, this is incredibly safe.

[00:08:23]
[LAUGH] And that actually should be a bit further across and these are sub-elements of this division. So these are sub-elements of the division here, and we have another paragraph, and this one says part 7. And there it is and then that's the end of our division and that will show up on our page.

[00:08:42]
I haven't homemakers have made this difficult for myself but there it is and then love Lame Mis and then heart seven People, we have never had a more elegant solution. We have a list of elements in C++ that we get to add to by just listing out, in text format, what we want to have added to that list in C++.

[00:09:06]
And then rely on built-in technology and web core that's gonna convert that list into actual elements on the webpage. What more could we ask for, people? We're gonna come to thumbs in a second. But here it is, solution. An ordered list technically is an object of page document, technical term for the web page, elements that we can add to using HTML.

[00:09:28]
The order and structure is set by where we write each line of HTML, and that is such a blessing. The layout engine then works out the exact structure given the pixels or given the device type. And then the render engine produces a composite image, joins up all these elements, puts it into a literally a bitmap, rasterize it turns it into a list of pixels, and then pings it out 60 times a second.

[00:09:53]
That's it for the graphics card people. That's my beautiful page.
>> [LAUGH]
>> That's it, people. So we are blessed to have had this semi-visual code for structure and content. Semi visual, I'm calling it. We have our HTML code, and it produces a semi visual Sorry, the HTML is semi-visual.

[00:10:14]
It produces a model of the page that then gets displayed on the actual pixels. We get to create an element, add its content like the seven, like the heart seven. There it is, heart seven. We get to, what was that goal number one? Display content, and we've done it, and it's visual.

[00:10:34]
We get to create the element. We get to add its content, where to add it is determined by where it is on the HTML file itself. Look at that. For right inside of the division is our video, our paragraph and our paragraph, and right inside the division is that video, a paragraph and a paragraph.

[00:10:54]
We have essentially built out semi-visual code for our structure and content of our page. We're very lucky. Let's have thumbs. You lost me, I'm clear, I have clarifications. I'd love to see some clarifications. Ian's thumbs are clear, yeah, Phil's got a clarification potentially. And why did you have one as well?

[00:11:18]
Why don't we start with wise?
>> Yeah, mine was just going back to the layout engine versus the render engine, something I've not worked with too much at that level. The render engine is what literally, like, makes the bitmap.
>> Correct? Yeah, exactly. The layout engine is going to work out.

[00:11:35]
How should we position if we were to shrink the window. And now, what's on your mind is going to wrap its text around. How is that going to affect the layout of the page?
>> If not topical, totally cool, but my understanding is the render engine is like a large chunk of the browser's and one of the reasons why we have so few of them is that Accurate.

[00:11:55]
>> Interesting.
>> That also like Here Be Dragons code inside of-
>> I mean for sure. And that is profoundly sophisticated to deal with that also across all different device types. And when you're dealing with an amount of legacy ways that you can affect what is displayed, I guess, paper over cracks historically that have not all been, all while you're dealing with legacy browsers that have not paper over those cracks.

[00:12:24]
So yeah, the render engines, as you say, the main render engines are all spinning off from versions from like 10 years, 15 years ago, and they are not. People are not building out these render engines from scratch. And really, I think only, as you say, a small consortium of producers are actually creating these browsers.

[00:12:49]
Because it is such, we essentially built almost a full operating system within an application that was designed to display text and links. And has to work across all devices. It's quite remarkable. Mark, there was a question from the audience?
>> When you rendered that text node at the top, would that actual, would there be an actual node around it?

[00:13:14]
>> Yeah, absolutely. So we'd actually have here, it would be something, I should have actually done that, that was a mistake, it would say something like, you know, text and then there would be what's on your mind. In practice people, exactly how these are implemented, we can go and look in the code of the web browser's engine and to be honest, how do we do this nowadays?

[00:13:38]
Am I meant to say this? We go and search in a good old friend that gives us exact lines of code from any library or technology. We do to go and check it every time otherwise it will tell us completely wrong thing, but our friend ChatGPT gives us the exact implementation of the class that produces a text node in the DOM in C++ and gives us an object within the larger object model that can store text to be displayed on the page.

[00:14:08]
>> Was the forgiving nature of HTML by design? There was valid HTML and invalid HTML at one point, but the browser never throws.
>> That's an interesting question, is the forgiving nature of HTML by design. Such that we don't have any sense, an error handling process or an error recording history.

[00:14:35]
[SOUND] Let me think about it. For me, it speaks to the fact that HTML, forgiving is a good word for it, is incredibly intuitive way of displaying content on a page. However, there is probably a reason why we, well, we're gonna see there's a very profound reason why we do not use it for our many of our, much of our application building.

[00:15:09]
And we have to move away from it to even achieve our solution to of making interactive applications that would imply maybe this HTML that I'm almost saying here is almost like a runtime, it ain't. Even though we go through it line by line and produce elements, we're gonna see that's a one-time thing.

[00:15:31]
So yes, you could certainly imagine error handling at that moment to identify failures, things that could not actually be added to the page. But also at the same time, it's indicative of the extent to which HTML is a minimal minimized like a minimal language that only allows displaying of content.

[00:15:53]
Sorry only allows adding elements to a C++ list and that's it. We're gonna see everything you think that is HTML when elements get created or not, none of that is HTML. HTML is a one time list. It'd be like that yeah, it's just literally like, you know, writing a list of elements and then saying, hey, super boss, can you add those?

[00:16:14]
You could totally imagine error handling stays at that point that says, no, you can't add that, but on the flip side also, it's kind of indicative of how minimal that process is. It's here's a list of elements, add them to the C++ list, that's it. So in that sense, anything like error handling, these will all be quite significant additions, where would that error even be displayed?

[00:16:38]
I'm not entirely sure, there's no like dev tools. Looking at the HTML execution, maybe you could imagine like a parser of your HTML before it's loaded into the browser. That could spot syntax failings, but there's not a runtime that's executing that code. So I don't even know where the error would be displayed.

[00:16:57]
It could be the console, I guess, but the console is rendering errors as called from JavaScript, where you are actually saying please use the console. So you can see what I mean? It's like it's not clear to me where it would even be displayed, because it is such a minimal but beautiful for it language.