book

Build a Frontend Web Framework (From Scratch)

Name: Build a Frontend Web Framework (From Scratch)
Author: Angel Sola
ISBN: 9781633438064

by Angel Sola

May 2024

Beginner to intermediate

384 pages

9h 29m

English

Manning Publications

Read now

Unlock full access

copyright
contents
Build a Frontend Web Framework (From Scratch)
dedication
preface
acknowledgments
about this book
about the author
about the cover illustration
Part 1 No framework

1 Are frontend frameworks magic to you?
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 Vanilla JavaScript—like in the old days
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
Part 2 A basic framework
3 Rendering and the virtual DOM
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 Mounting and destroying the virtual DOM
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 State management and the application’s lifecycle
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 Publishing and using your framework’s first version
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 The reconciliation algorithm: Diffing virtual trees
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 The reconciliation algorithm: Patching the DOM
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)
Part 3 Improving the framework
9 Stateful components
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 Component methods
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 Subcomponents: Communication via props and events
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 Keyed lists
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 The component lifecycle hooks and the scheduler
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 Testing asynchronous components
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
appendix Setting up the project
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)

Part 2 A basic framework

Get ready, because the real excitement begins now! You’ve already dabbled in the creation of a TODO application, using nothing but HTML and vanilla JavaScript. Part 1 gave you a glimpse of the challenges involved in developing large, complex web applications that require manual Document Object Model (DOM) manipulation and real-time synchronization between the view and the model as users interact with the app.

But don’t worry; frontend frameworks were designed to make your life easier! We’ll start by abstracting away the nitty-gritty DOM manipulation code required for view creation. Enter the concept of the virtual DOM. With a virtual DOM tree, you can define how a view should appear and let the framework handle ...

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.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Build an Orchestrator in Go (From Scratch)

Publisher Resources

ISBN: 9781633438064Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Build a Frontend Web Framework (From Scratch)

by Angel Sola

Part 2 A basic framework

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.