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)

8 The reconciliation algorithm: Patching the DOM

This chapter covers

Implementing the patchDOM() function
Using the objectsDiff() function to find the differences in attributes and styles
Using the arraysDiff() function to find the differences between CSS classes
Using the arraysDiffSequence() function to find the differences between virtual DOM children
Using the Document API to patch DOM changes

In chapter 7, you saw how the reconciliation algorithm works in two phases: finding the differences between two virtual Document Object Model (DOM) trees and patching those differences in the real DOM. You implemented the three key functions to find differences between two objects or two arrays: objectsDiff(), arraysDiff(), and arraysDiffSequence() ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition

Academind by Maximilian Schwarzmüller GmbH

Full Stack Testing

Gayathri Mohan

Building Event-Driven Microservices

Adam Bellemare

Kubernetes for the Absolute Beginners - Hands-On

KodeKloud

Publisher Resources

ISBN: 9781633438064Supplemental Content Publisher Support Other Publisher Website Supplemental Content Purchase Link