The Hard Parts of UI Development

Will Sentance

Will Sentance

Codesmith
9 hours, 19 minutes CC
The Hard Parts of UI Development

Course Description

Keeping what the user sees in sync with the app's data can be tricky, particularly in browsers and big apps. UI tools like React, Angular, and Vue help, but they can be hard to use if you don't know what problems they solve. Develop an under-the-hood knowledge of UI dev by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch! You'll learn how JavaScript interacts with browser features like the DOM and HTML parser. By the end, you'll have a complete mental model of UI dev that you can apply to any framework!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: June 20, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 7 minutes
  • Introduction
    Will 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

Section Duration: 1 hour

JavaScript, DOM & Events

Section Duration: 1 hour, 36 minutes

Data-Binding in the UI

Section Duration: 1 hour, 32 minutes

Virtual DOM

Section Duration: 2 hours, 36 minutes

Composition & Functional Components

Section Duration: 1 hour, 6 minutes
  • 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

Section Duration: 1 hour, 16 minutes
  • 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.

Wrapping Up

Section Duration: 3 minutes
  • Wrapping Up
    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.
I just completed "The Hard Parts of UI Development" by Will Sentance on Frontend Masters! Gosh, my head is full of diagrams and execution contexts.
Bence Fekete

Bence Fekete

fekete965

I just completed "The Hard Parts of UI Development" by Will Sentance on Frontend Masters! This is mind blowing 🤯 , thank you, Will. 🤍🫡
Yassine El Hajjami

Yassine El Hajjami

yassine_el01

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