The Hard Parts of UI Development
Learning Paths:
Topics:
Table of Contents
Introduction
State & View
User Interface Dev Overview
Will 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 Content
Will 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 Hood
Will 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 Styling
Will introduces the CSS Object Model (CSSOM), which represents the styling instructions in a similar way as the Document Object Model.
Enabling Change of Content
Will 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.
JavaScript, DOM & Events
Storing Data in JavaScript
Will diagrams the relationship between the HTML parser, browser, and JavaScript engine. Once the HTML content is parsed, it cannot be changed without using JavaScript. The list of DOM elements is stored in a C++ data structure, and any new data or changes reside in JavaScript.
WebIDL & WebCore
Will explains that WebCore is the C++ representation of the DOM and gives JavaScript access to the pixels to display data. WebIDL is a standardized way for browser features to interact with the JavaScript engine.
Updating DOM Elements with JavaScript
Will walks through the flow of data when JavaScript is used to update the content on the page. JavaScript APIs pass data to the C++ DOM list through the WebIDL abstraction layer.
Displaying Data Summary
Will summarizes the process of displaying content and data. JavaScript creates and stores data and accesses DOM elements through the document API. Getters and setters can access and change the DOM element values.
Handling User Interaction Overview
Will shares a new code snippet that selects elements in the DOM and creates an event handler for responding to user interaction. The HTML code is interpreted and stored in the C++ DOM list. The document API is used to store references to these elements in JavaScript.
Understanding the handleInput Function
Will 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.
User Interaction & DOM Updates
Will explains how DOM updates are performed as users interact with the elements on the page. As a user types in the input field, the callback stored in C++ is triggered, and the JavaScript function is invoked. The value in C++ is accessed and passed to the textContent setter.
Handling User Interaction Q&A
Will provides a summary of the data flow as users interact with the DOM elements on the screen. Questions about the relationship between C++ and JavaScript and the microtask queue are also discussed in this lesson.
Data-Binding in the UI
One-Way Data Binding
Will 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.
Changing View Based on User Interaction
Will walks through how the view is updated when a user interaction triggers a change in data. JavaScript accessor methods mutate the underlying data in the C++ DOM. When the underlying data is changed, the pixels in the display are redrawn.
Handling Multiple User Interactions
Will 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 Updates
Will 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 Function
Will begins diagramming the application with the new dataToView function, which will handle all view updates regardless of the user interaction.
One-Way Data Binding UI Elements
Will continues the application schematic that uses the new dataToView function. The function runs initially to update the UI with default data creating a one-way data binding relationship between updates to the JavaScript data and the view.
One-Way Data Binding User Interactions
Will 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 Flow
Will 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.
Virtual DOM
Virtual DOM Introduction
Will introduces the Virtual DOM, which represents the visual elements displayed on the screen. By storing this representation in JavaScript, previous versions of the display can be compared to the current representation allowing only the updated elements to be re-rendered. This would increase the performance of the display engine by reducing unnecessary display updates.
Auto-Updating Views UI
Will begins diagramming the UI elements and underlying data structures for the next code example. An input element will receive input from the user. The event handler will update the JavaScript data.
Auto-Updating Views with setInterval
Will 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 Components
Will 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 Setup
Will diagrams the initial setup of the UI Component code example. Like the previous code versions, global variables are declared to store data in JavaScript memory. Since the dataToView function handles the creation of the elements, the only initial element stored in C++ is the body element.
UI Component dataToView Function
Will 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 Interaction
Will 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 Interpolation
Will 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.
Creating a JavaScript Virtual DOM
Will explains a Virtual DOM consists of blocks of code representing each piece of view. These blocks are stored in a JavaScript array, and a function is created to accept an array of data and produce DOM elements.
JS Virtual DOM User Interaction
Will incorporates user input into the virtual DOM example. The handle callback function responds to the user interacting with the input element and updates the data in JavaScript. When the updateDOM function is called, the DOM is reconstructed with the updated data.
Declarative UI as a Paradigm
Will 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 Development
Will 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 Spread
Will 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 API
Will 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 Review
Will 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 Array
Will 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.
Performance Improvements
Update the DOM on Data Change
Will 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 Hooks
Will 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 Diffing
Will 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.
DOM Diffing Setup
Will creates the schematic for the DOM diffing code example. Like previous examples, the HTML is loaded in the browser, and the JS is executed. The DOM will be represented in the C++ DOM and links from JavaScript to the C++ DOM are established.
Conditionally Updating the DOM
Will 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.
DOM Diffing User Interaction
Will demonstrates how the code example handles user interaction. The handle function updates the JavaScript data as the user inputs values into the field. The setInterval timer calls updateDOM to re-create the virtual DOM and prepare the diffing algorithm
Diffing Algorithm
Will 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.
