FrontendMasters – The Hard Parts of UI Development

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.

Table of Contents:

Introduction

• Introduction

State & View

• User Interface Dev Overview
• Display Content
• Rendering HTML Under the Hood
• CSSOM for Styling
• Enabling Change of Content

JavaScript, DOM & Events

• Storing Data in JavaScript
• WebIDL & WebCore
• Updating DOM Elements with JavaScript
• Displaying Data Summary
• Handling User Interaction Overview
• Understanding the handleInput Function
• User Interaction & DOM Updates
• Handling User Interaction Q&A

Data-Binding in the UI

• One-Way Data Binding
• Changing View Based on User Interaction
• Handling Multiple User Interactions
• Separating Data & View Updates
• Understanding the dataToView Function
• One-Way Data Binding UI Elements
• One-Way Data Binding User Interactions
• Predictable Data & View Flow

Virtual DOM

• Virtual DOM Introduction
• Auto-Updating Views UI
• Auto-Updating Views with setInterval
• Understanding UI Components
• UI Component Setup
• UI Component dataToView Function
• UI Component Interaction
• Emulate HTML with String Interpolation
• Creating a JavaScript Virtual DOM
• JS Virtual DOM User Interaction
• Declarative UI as a Paradigm

Composition & Functional Components

• Using Lists for UI Development
• Composable Code with Map and Spread
• Event API
• Event API Review
• Generating VDOM Elements from Array

Performance Improvements

• Update the DOM on Data Change
• Automatic Updates with Hooks
• Performance Gains Using Diffing
• DOM Diffing Setup
• Conditionally Updating the DOM
• DOM Diffing User Interaction
• Diffing Algorithm

Wrapping Up

• Wrapping Up