book

Build a Frontend Web Framework (From Scratch)

by Angel Sola

May 2024

Beginner to intermediate

384 pages

9h 29m

English

Manning Publications

Read now

Unlock full access

1.1 Why build your own frontend framework?1.2 The framework we’ll build1.2.1 Features1.2.2 Implementation plan1.3 Overview of how a frontend framework works1.3.1 The developer’s side1.3.2 The browser side of an SPA1.3.3 The browser and server sides of an SSR application
2.1 The assignment: A TODOs app2.2 Writing the application2.2.1 Project setup2.2.2 The HTML markup2.2.3 The JavaScript code
3.1 Separating concerns: DOM manipulation vs. application logic3.2 The virtual DOM3.3 Getting ready3.4 Types of nodes3.5 Element nodes3.5.1 Conditional rendering: Removing null values3.5.2 Mapping strings to text nodes3.6 Text nodes3.7 Fragment nodes3.7.1 Implementing fragment nodes3.7.2 Testing the virtual DOM functions3.8 Components: The cornerstone of frontend frameworks3.8.1 What is a component?3.8.2 The virtual DOM as a function of the state3.8.3 Composing views: Components as children
4.1 Mounting the virtual DOM4.1.1 Mounting virtual nodes into the DOM4.1.2 Mounting text nodes4.1.3 Mounting fragment nodes4.1.4 Mounting element nodes4.1.5 Adding event listeners4.1.6 Setting the attributes4.1.7 A mountDOM() example4.2 Destroying the DOM4.2.1 Destroying a text node4.2.2 Destroying an element4.2.3 Destroying a fragment
5.1 The state manager5.1.1 From JavaScript events to application domain commands5.1.2 The reducer functions5.1.3 The dispatcher5.1.4 Result5.2 Assembling the state manager into the framework5.2.1 The application instance5.2.2 The application instance’s renderer5.2.3 The application instance’s state manager5.2.4 Components dispatching commands5.2.5 Unmounting the application5.2.6 Result
6.1 Building and publishing the framework6.2 A short example6.3 Refactoring the TODOs app6.3.1 Defining the state6.3.2 Defining the reducers6.3.3 Defining the view
7.1 The three key functions of the reconciliation algorithm7.2 Comparing two virtual DOM trees7.2.1 Finding the differences7.2.2 Applying the changes7.3 Changes in the rendering7.4 Diffing objects7.5 Diffing arrays7.6 Diffing arrays as a sequence of operations7.6.1 Defining the operations you can use7.6.2 Finding the sequence of operations: The algorithm7.6.3 An example by hand7.6.4 Implementing the algorithm
8.1 Mounting the DOM at an index8.1.1 The insert() function8.1.2 Text nodes8.1.3 Element nodes8.1.4 Fragment nodes8.2 Patching the DOM8.2.1 The reconciliation algorithm8.2.2 Virtual node equality8.2.3 Subtree change8.2.4 Patching text nodes8.2.5 Patching element nodes8.2.6 Patching child nodes8.3 Publishing the framework’s new version8.4 The TODOs application8.4.1 Inspecting the DOM tree changes8.4.2 Using the paint-flashing tool (Chrome only)
9.1 Anatomy of a stateful component9.1.1 The properties of a stateful component9.1.2 The methods of a stateful component9.2 Components as classes9.3 Components with state9.3.1 Updating the state and patching the DOM9.3.2 Result9.3.3 The component’s offset9.3.4 Patching the DOM using the component’s offset
10.1 Component methods10.2 Binding event handlers to the component10.3 Mounting the DOM with a host component10.4 Patching the DOM with a host component
11.1 Adding components as a new virtual DOM type11.1.1 Updating the elements getter11.1.2 Mounting component virtual nodes11.1.3 Destroying component virtual nodes11.1.4 Patching component virtual nodes11.1.5 A rendering optimization (optional)11.2 Events11.2.1 Saving the event handlers inside the component11.2.2 Extracting the props and events for a component11.2.3 Wiring the event handlers11.2.4 Emitting events
12.1 The key attribute12.1.1 Component nodes equality12.1.2 Using the key attribute12.1.3 Removing the key attribute from the props object12.2 Extending the solution to element nodes12.3 Using the key attribute12.3.1 Mistake 1: Using the index as key12.3.2 Mistake 2: Using the same key for different elements12.4 The application instance12.5 Publishing the framework
13.1 The component lifecycle13.2 Implementing the mounted and unmounted lifecycle hooks13.2.1 Hooks asynchronicity13.2.2 Hooks execution context13.2.3 Dealing with asynchronicity and execution context13.3 The scheduler13.3.1 A simple solution that doesn’t quite work13.3.2 Tasks, microtasks, and the event loop13.3.3 The event loop cycle13.3.4 The fundamentals of the scheduler13.3.5 Implementing a scheduler13.3.6 Scheduling the lifecycle hooks execution13.4 Publishing version 4 of the framework
14.1 Testing components with asynchronous behavior: nextTick()14.1.1 Testing a component with an asynchronous onMounted() hook14.1.2 The fundamentals behind the nextTick() function14.1.3 Implementing the nextTick() function14.2 Publishing version 4.1 of the framework14.3 Where to go from here
A.1 Where to find the source codeA.1.1 Checking out the code for each chapterA.1.2 A note on the codeA.1.3 Reporting problems in the codeA.1.4 Fixing a bug yourselfA.2 Solutions to the exercisesA.3 Advanced topicsA.4 Note on the technologies usedA.4.1 Package manager: NPMA.4.2 Bundler: RollupA.4.3 Linter: ESLintA.4.4 (Optional) Testing: VitestA.4.5 Language: JavaScriptA.5 Read the docsA.6 Structure of the projectA.7 Finding a name for your frameworkA.8 Option A: Using the CLI toolA.9 Option B: Configuring the project from scratchA.9.1 The examples folderA.9.2 Creating the runtime packageA.10 Publishing your framework to NPMA.10.1 Creating an NPM accountA.10.2 Logging in to NPMA.10.3 Publishing your frameworkA.11 Using a CDN to import the framework

Content preview from Build a Frontend Web Framework (From Scratch)

13 The component lifecycle hooks and the scheduler

This chapter covers

Understanding a lifecycle hook
Executing code when a component is mounted
Executing code when a component is unmounted
Publishing version 4 of the framework

It’s not uncommon for a component to execute some code when it’s mounted into or unmounted from the Document Object Model (DOM). The classic example is fetching data from a server right after the component is mounted. In that case, the component is already part of the DOM, so it can display a loading indicator while the data is being fetched. When the data is ready, the component updates its view by removing the loading indicator and rendering the newly fetched data.

Your existing framework runs code only when ...