Check out a free preview of the full The Hard Parts of UI Development course

The "Wrapping Up" Lesson is part of the full, The Hard Parts of UI Development course featured in this preview video. Here's what you'd learn in this lesson:

Will concludes the course with a final summary of the UI approaches achieved throughout the course. They create a single source of truth for data, UI composition, and VDOM diffing for increased efficiency.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> Here's my email. If you want to get clarifications, William, I probably shouldn't do this, should I? There we go. [LAUGH] If you wanna ask any questions, people, there it is, and let's summarize. We have a groundbreaking, thanks to the people who innovatively, I think, took these steps over the past years, a groundbreaking approach to user interface engineering.

[00:00:25]
A single source of truth. In a collection of runtimes, API's browser features, regulatory bodies, standards agencies known as a web browser creators over the last 30 years. In a world in which there could be multiple sources of truth, there is HTML, was implicitly saying hey DIV on, input on.

[00:00:45]
Our DOM that had any input from the user, automatically tracked in it at JavaScript runtime. Our CSS object model instead, one source of truth for our data. Everything the user sees stems from data in JavaScript. It's restrictive but desperately predictable, and enables data propagation to the view. That means, essentially, we don't like that word, it always a sign, that means we are able to make a change to data and having described one time how the view will look based on that data.

[00:01:19]
Don't even have to do anything, it's just gonna propagate through to the view. Enables UI composition with JavaScript. A JavaScript DOM enables a semi visual form of coding our UIs where units of code that describe the view. We can have those produced using functions as they do in things that React where units of code that describe units of view the user will see and associated data can be positioned in the code to indicate where they're gonna appear on the web page.

[00:01:49]
We could move our DIV great job above, and it would literally appear above on the web page with the data. So, it makes reasoning about our state, our view, much easier. The downside, right, this flow of the data back and forth our content, that is the combination of the data and what's seen becomes much easier.

[00:02:10]
The downside of this semi visual code is it takes the data and info on the view at this moment and creates it in full, that's why it's so easy to reason about. Data generates view, however, are you ready to figure out the change? We don't have to say, just change that bit, no, here's that description one time and do it again.

[00:02:29]
However, requires a significant moves by us to improve, there we go, moves by us to improve efficiency using hooks and a visual virtual DOM diffing process. If we rebuild the DOM every time our data change, that'd be entirely unnecessary and if we rebuilt it every 15 milliseconds, that would be entirely unnecessary.

[00:02:56]
Instead, we spot actual differences and only change those known as DOM reconciliation. That's it people.
>> [APPLAUSE]
>> Thank you so much everybody, thank you for all your incredible, incredible, incredible, hard work.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now