Table of Contents
IntroductionWill Sentance begins by discussing the goals of the course, which include understanding how user interfaces display content, manage data-binding, are represented in the virtual DOM, and can be optimized. Core principles of engineering, including problems solving, technical/non-technical communication, and programming experience, are also discussed in this lesson.
State & View
User Interface Dev OverviewWill explains that almost every piece of technology needs a visual user interface. Content is output from the computer and displayed on the screen. The UI enables users to interact with or change the content and the underlying data.
Display ContentWill describes the process of using a programming language to model how content show be displayed on a screen. The model is stored in an object and rendered in the application or browser. This representation is referred to as the DOM: Document Object Model.
Rendering HTML Under the HoodWill walks through the fundamentals of rendering content in the browser. The markup written in HTML is represented as an object in C++ and then rendered to the document.
CSSOM for StylingWill introduces the CSS Object Model (CSSOM), which represents the styling instructions in a similar way as the Document Object Model.
Enabling Change of ContentWill describes how the UI represents the underlying data in the application. When a user interacts with the page, a change in data is triggered. The change in data subsequently causes the rendering engine to update the UI.
Understanding the handleInput FunctionWill diagrams how memory is allocated for the handleInput function. Since the function is a callback and not immediately invoked, the function's implementation is stored as an object in C++ and will be called once the corresponding user event is triggered.
Data-Binding in the UI
One-Way Data BindingWill introduces one-way data binding. It's a popular paradigm for handling the UI engineering challenge of maintaining consistency between the UI and underlying data.
Handling Multiple User InteractionsWill revisits user interaction by diagraming the data flow as the next user interaction is triggered. In this case, handleInput function is triggered by a user typing text into the HTML input element.
Separating Data & View UpdatesWill explains the benefit of decoupling data changes and view updates. Isolating view updates to a single function reduces duplication and makes the code more maintainable. As changes in data occur, the dataToView function will be called.
Understanding the dataToView FunctionWill begins diagramming the application with the new dataToView function, which will handle all view updates regardless of the user interaction.
One-Way Data Binding User InteractionsWill completes the application schematic for one-way data binding by adding user interactions. The handleClick and handleInput functions are triggered by the user. The C++ DOM calls the callback function, which updates the data and triggers the dataToView function to rerun.
Predictable Data & View FlowWill summarizes the predictable flow of data and view updates created by this design pattern. The code is then refactored to run the dataToView function as a callback to setInterval so the function can be run continuously.
Auto-Updating Views with setIntervalWill continues the auto-updating view example. The setInterval method will repeatedly call the dataToView function allowing the UI to be automatically updated rather than requiring the function to be called manually.
Understanding UI ComponentsWill introduces the concept of a UI Component, a function that fully creates elements and the logic to bind the data and view layers. The dataToView function will include this behavior by creating the input and div elements if they do not exist, then updating their displayed values.
UI Component dataToView FunctionWill walks through the execution context of the first call to the dataToView function. The ternary operation determines no input is present, so the DIV element is yet created. The onInput handler is also established.
UI Component InteractionWill completes the UI Component example by walking through the effects of user interaction. The setInterval function calls dataToView repeatedly. As a user interacts with the input element, both the input and DIV elements are updated.
Emulate HTML with String InterpolationWill demonstrates how string interpolation will be used to create more visual code. The closer code is to its visual representation on screen, the better the developer experience.
Declarative UI as a ParadigmWill summarizes the paradigm of declarative user interfaces, which store visual representations of the elements on screen in data.
Composition & Functional Components
Using Lists for UI DevelopmentWill discusses the value of using lists when constructing user interfaces. Lists allow the execution of code to be decoupled from the number of elements displayed. The Array.map method will iterate through however many elements are present.
Composable Code with Map and SpreadWill begins diagramming a more flexible virtual DOM. The flexibility comes from the Array.map method, which iterates through the data returned from the createDOM function. Each element in the list is passed to the convert function to generate a DOM element.
Event APIWill introduces the Event API, which provides getters for accessing properties like the x and y of the mouse or if a key is pressed during the event. The most important property for the handle method will be the target property because it references the input element triggering the event. This creates element-flexible code with fewer dependencies.
Event API ReviewWill reviews the Event API usage and the flexibility it adds to the application. Leveraging an Array for storing the list of elements on the screen allows for semi-visual coding and more composable user interfaces.
Generating VDOM Elements from ArrayWill refactors the createDOM function further by creating a Post function which generates DIV elements from an Array of posts. This technique is a more concise way to create multiple elements of a similar type.
Update the DOM on Data ChangeWill discusses how the code can be refactored to allow for automatic UI updates without relying on a loop or iterating through the list of VDOM elements. The task of updating data is abstracted into a function where the updateDOM function can be called after the data is changed. This ensures the visual representation of the data will always be in sync with the underlying data.
Automatic Updates with HooksWill introduces a hook, which is a function added to the application to tap into and modify the behavior of an existing system or component. Hooks are commonly used in frameworks and libraries to provide extensibility and customization options.
Performance Gains Using DiffingWill explains the performance gains achieved by leveraging diffing. Rather than recreate the entire DOM when data changes, a findDiff function compares the new version of the DOM to the previous version and will only update the elements that changed.
Conditionally Updating the DOMWill walks through the refactored updateDOM function, which conditionally updates the DOM based on if the elements Array exists. The first time the function is called, the Array is undefined. The elements are mapped over and passed to the convert function before being appended to the DOM.
Diffing AlgorithmWill integrates the diffing algorithm, increasing the application's performance by only re-rendering the changed elements. The UI is more composable and is built through a semi-visual process.