User Interface Dev Overview

[00:00:00]
>> It all starts with, part one, UI the hard parts, user interface the hard parts, state view, JavaScript DOM and events two goals to UI engineering. One is writing the code to display that content, in Tik Tok, it's a video stream. It's a little hard for number of likes, it's a little profile picture of the person.

[00:00:22]
It's the comment window where you can start writing a comment. It's the, I know, the number of views. It's once you're in the content creation part of it, it's the ability to be able to see your own self in it and make edits to what you see, that's displaying content.

[00:00:42]
That's state or data under the hood, there must be some underlying in the computer data that is being displayed. It's not coming from ether when you open your phone, it's in there, in the phone, maybe it's off the internet, but it's in your phone. So, the user can see it, and then let them interact with it.

[00:00:56]
That means to tap, that means to swipe. That means to start typing on their phone and change what they're seeing. That becomes most difficult, it sounds so intuitive, it sounds honestly like that's it, two goals, displaying content? Let's just repeat again, displaying content and letting users change the content they see, that's it?

[00:01:18]
No wonder people underestimate this field, no wonder people think that it's because we're going to see, I can display content on my web browser with like, it's gonna be beautifully intuitive. So, what am I complaining about? Well, the web browser's ad hoc history ensures that at any degree of scale, where we're gonna have thousands of pieces of content being displayed.

[00:01:42]
Any degree of scale, we're gonna face significant challenges joining up the dots between the different pieces of the web browser. They've been developed over 30 years now. Starting with CERN back in 91, I think it was, where by the way, then the web browser was meant to be like a text document with links viewer, like less sophisticated than the PDF viewer.

[00:02:08]
And now you wanna build a video editor in that? This is like 20 different teams of developers over 30 years, ten different regulatory standards bodies, they use different run times, different APIs. We're gonna have to join all of those up together to understand even how to build a minimal user interface.

[00:02:29]
To do that, we're gonna to have to, yeah, join up the JavaScript, run time, the DOM, which is implemented we're gonna see in C++. Combine that with our web core, web IDL, DOM API, event API, but if we can do it, it lets us build dynamic, interactive, full web applications that are at the center of all modern experiences.

[00:02:53]
So, here we go, almost every single piece of technology starts with a visual interface, a visual user interface. Have I said this enough times yet? One, content displayed on the screen, that's output from the computer. Two, that the user can change by taking action, did everyone get that?

[00:03:11]
Did everyone get, thumbs on that. If you need to look around to see whether there's other people then you need to, I know, no. Good, thumbs are up, good. So, let's see some examples, video stream from Zoom. That's our lives of course nowadays, video stream from Zoom, lights on a tweet which when I tap on the number of likes or click on the number of likes goes from seven to eight.

[00:03:47]
I've made this trip so many times but it's still true, but of course on my Twitter does not go from seven to eight, does it? It goes from likely zero to one, maybe two to three, if I'm lucky, that's a call to all of you.
>> [LAUGH]
>> Yes, please Mark, go ahead.

[00:04:03]
>> Does this workshop apply to non-traditional interfaces like wearables and things that,
>> What a great question. I think what's fascinating is, if you think about, I was actually considering we could have gone back and started with those physical switchboards. Traditional user interfaces or even a pilot's dashboard with again those all-physical switches.

[00:04:28]
Any machine that has a visual manifestation of underlying state or data of what's going on under the hood, we have to maintain consistency between what we see and the truth behind the scenes in the computer. And so, really this applies to all possible user interfaces whether wearables, a virtual environment, gaming, or even physical user interfaces.

[00:04:56]
However, we are focused today on that playing out in the most central aspect of our modern tech stack, the web browser. And also thank you guys for getting us back on track, good. So, video stream from Zoom, lights on a tweet, you click on like, goes from seven to eight.

[00:05:13]
Comments on the chat, you start writing a comment. Now, I can see the comment but also is now there, right? We're talking, we hinted there that it's all about action to something displayed and change happening in what we see representing therefore somehow change under the hood. Okay, on that note, Mario's position on the screen there's a little Mario.

[00:05:34]
Very tiny, yeah, and if you tap Mario, Mario jumps up. What people are some other user interfaces and what's their interactivity? Okay, who's gonna be the lucky person who gets called on and gives me, Alexa, what's a user interface? And what's, any application that we see and where we can take action and change what we're seeing, and I guess therefore change something under the hood about that particular application.

[00:06:05]
>> All the songs in your playlist on Spotify.
>> All the songs in your playlist and maybe you could press play and now you're seeing the play button go from a play button to pause because now the facts behind the scenes are this is now playing and you're starting to hear the music.

[00:06:21]
Beautiful, Ian?
>> If you have a smart lock, can you lock or unlock your door?
>> Wow, go, okay.
>> In the app
>> What a wonderfully general, absolutely spot on Ian. I'm thinking also like honestly anything from like a compose window in Gmail where you tap, and it pops up the window and now you're composing your message.

[00:06:42]
Or if you're in Excel or Google Sheets, think of the number of places you can interact in Google Sheets, that's thousands of pieces of content being displayed to you. Thousands of places in which you can act and change what you see or change the underlying state of the application.

[00:06:59]
Underlying state of, when I say state, I mean like state of the world, what's going on in that application, for example, clicking file, and I can see the little window pop down in Google Sheets or tapping a cell and I can go into that cell and start writing.

[00:07:14]
Or I can highlight down some cells or I can click I don't know, pivot table, and that's gonna pop up a little window here. That's all me seeing content and being able to change it, that is it. It just happens that when there's thousands of pieces of content on the screen, each of which you can interact with by double tapping, single tapping, swiping, dragging, mousing in, mousing.

[00:07:40]
It gets profoundly complex very, very quickly. All right, did I [LAUGH] mention my two goals? Two goals, one display content from inside the computer. Two, let the user change that content.