Build a Frontend Web Framework (From Scratch)

✍ Scribed by Ángel Sola Orbaiceta

• Publisher: Manning Publications Co.
• Year: 2024
• Tongue: English
• Leaves: 386
• Category: Library

✦ Synopsis

Learn how a frontend web framework works by coding your own! In Build a Frontend Web Framework (From Scratch), you’ll learn the secrets behind frameworks like React, Vue, and Angular, including: Using the Document API to create HTML documents programmatically How the virtual DOM helps define the view of an application Using reconciliation algorithms to update the HTML efficiently How to use Single Page Application (SPA) routers Frontend frameworks are essential for creating websites, UIs, and intuitive apps. While it’s tempting to treat a framework like a black box, they’re not magic. Build a Frontend Web Framework (From Scratch) shows you how to build your own framework from basic JavaScript, HTML, and CSS. Once you learn how frameworks function, you’ll be able to work with them more efficiently, troubleshoot bugs more effectively, and even customize them for your specific needs. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the technology Frontend web frameworks like React, Vue, or Svelte are an essential part of almost any web application stack. They’re responsible for what your users see on their screens, and they are the first step in ensuring that your product delivers an exceptional user experience. In this step-by-step guide, expert full-stack web developer Angel Sola Orbaiceta shares a big secret: understanding how these tools work under the hood will make you a better web developer. About the book In Build a Frontend Web Framework (From Scratch), you’ll create a complete frontend framework and share it with the world as an NPM package. You’ll start by writing a to-do list application in pure JavaScript to expose the pain points a frontend framework solves. Then, just three chapters later, you’ll have a basic working framework, built from scratch! From there, you’ll iterate and add new features, implement a pipeline that transforms HTML templates into JavaScript render functions, add reconciliation algorithms, develop a SPA router that changes the content of the page without reloading, and more. All concepts are broken down into easy-to-digest chunks and explained with engaging graphics. By the time you’re done reading and coding, you’ll have a framework you can both use in your own projects and share with the world! About the reader For web developers familiar with JavaScript and NodeJS. About the author Angel Sola Orbaiceta is a senior engineer at Glovo. He has worked in the software industry for over a decade creating software for the cloud, OSX, and Windows desktop applications.

✦ Table of Contents

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 build
1.2.1 Features
1.2.2 Implementation plan
1.3 Overview of how a frontend framework works
1.3.1 The developer’s side
1.3.2 The browser side of an SPA
1.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 app
2.2 Writing the application
2.2.1 Project setup
2.2.2 The HTML markup
2.2.3 The JavaScript code
Part 2 A basic framework
3 Rendering and the virtual DOM
3.1 Separating concerns: DOM manipulation vs. application logic
3.2 The virtual DOM
3.3 Getting ready
3.4 Types of nodes
3.5 Element nodes
3.5.1 Conditional rendering: Removing null values
3.5.2 Mapping strings to text nodes
3.6 Text nodes
3.7 Fragment nodes
3.7.1 Implementing fragment nodes
3.7.2 Testing the virtual DOM functions
3.8 Components: The cornerstone of frontend frameworks
3.8.1 What is a component?
3.8.2 The virtual DOM as a function of the state
3.8.3 Composing views: Components as children
4 Mounting and destroying the virtual DOM
4.1 Mounting the virtual DOM
4.1.1 Mounting virtual nodes into the DOM
4.1.2 Mounting text nodes
4.1.3 Mounting fragment nodes
4.1.4 Mounting element nodes
4.1.5 Adding event listeners
4.1.6 Setting the attributes
4.1.7 A mountDOM() example
4.2 Destroying the DOM
4.2.1 Destroying a text node
4.2.2 Destroying an element
4.2.3 Destroying a fragment
5 State management and the application’s lifecycle
5.1 The state manager
5.1.1 From JavaScript events to application domain commands
5.1.2 The reducer functions
5.1.3 The dispatcher
5.1.4 Result
5.2 Assembling the state manager into the framework
5.2.1 The application instance
5.2.2 The application instance’s renderer
5.2.3 The application instance’s state manager
5.2.4 Components dispatching commands
5.2.5 Unmounting the application
5.2.6 Result
6 Publishing and using your framework’s first version
6.1 Building and publishing the framework
6.2 A short example
6.3 Refactoring the TODOs app
6.3.1 Defining the state
6.3.2 Defining the reducers
6.3.3 Defining the view
7 The reconciliation algorithm: Diffing virtual trees
7.1 The three key functions of the reconciliation algorithm
7.2 Comparing two virtual DOM trees
7.2.1 Finding the differences
7.2.2 Applying the changes
7.3 Changes in the rendering
7.4 Diffing objects
7.5 Diffing arrays
7.6 Diffing arrays as a sequence of operations
7.6.1 Defining the operations you can use
7.6.2 Finding the sequence of operations: The algorithm
7.6.3 An example by hand
7.6.4 Implementing the algorithm
8 The reconciliation algorithm: Patching the DOM
8.1 Mounting the DOM at an index
8.1.1 The insert() function
8.1.2 Text nodes
8.1.3 Element nodes
8.1.4 Fragment nodes
8.2 Patching the DOM
8.2.1 The reconciliation algorithm
8.2.2 Virtual node equality
8.2.3 Subtree change
8.2.4 Patching text nodes
8.2.5 Patching element nodes
8.2.6 Patching child nodes
8.3 Publishing the framework’s new version
8.4 The TODOs application
8.4.1 Inspecting the DOM tree changes
8.4.2 Using the paint-flashing tool (Chrome only)
Part 3 Improving the framework
9 Stateful components
9.1 Anatomy of a stateful component
9.1.1 The properties of a stateful component
9.1.2 The methods of a stateful component
9.2 Components as classes
9.3 Components with state
9.3.1 Updating the state and patching the DOM
9.3.2 Result
9.3.3 The component’s offset
9.3.4 Patching the DOM using the component’s offset
10 Component methods
10.1 Component methods
10.2 Binding event handlers to the component
10.3 Mounting the DOM with a host component
10.4 Patching the DOM with a host component
11 Subcomponents: Communication via props and events
11.1 Adding components as a new virtual DOM type
11.1.1 Updating the elements getter
11.1.2 Mounting component virtual nodes
11.1.3 Destroying component virtual nodes
11.1.4 Patching component virtual nodes
11.1.5 A rendering optimization (optional)
11.2 Events
11.2.1 Saving the event handlers inside the component
11.2.2 Extracting the props and events for a component
11.2.3 Wiring the event handlers
11.2.4 Emitting events
12 Keyed lists
12.1 The key attribute
12.1.1 Component nodes equality
12.1.2 Using the key attribute
12.1.3 Removing the key attribute from the props object
12.2 Extending the solution to element nodes
12.3 Using the key attribute
12.3.1 Mistake 1: Using the index as key
12.3.2 Mistake 2: Using the same key for different elements
12.4 The application instance
12.5 Publishing the framework
13 The component lifecycle hooks and the scheduler
13.1 The component lifecycle
13.2 Implementing the mounted and unmounted lifecycle hooks
13.2.1 Hooks asynchronicity
13.2.2 Hooks execution context
13.2.3 Dealing with asynchronicity and execution context
13.3 The scheduler
13.3.1 A simple solution that doesn’t quite work
13.3.2 Tasks, microtasks, and the event loop
13.3.3 The event loop cycle
13.3.4 The fundamentals of the scheduler
13.3.5 Implementing a scheduler
13.3.6 Scheduling the lifecycle hooks execution
13.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() hook
14.1.2 The fundamentals behind the nextTick() function
14.1.3 Implementing the nextTick() function
14.2 Publishing version 4.1 of the framework
14.3 Where to go from here
appendix Setting up the project
A.1 Where to find the source code
A.1.1 Checking out the code for each chapter
A.1.2 A note on the code
A.1.3 Reporting problems in the code
A.1.4 Fixing a bug yourself
A.2 Solutions to the exercises
A.3 Advanced topics
A.4 Note on the technologies used
A.4.1 Package manager: NPM
A.4.2 Bundler: Rollup
A.4.3 Linter: ESLint
A.4.4 (Optional) Testing: Vitest
A.4.5 Language: JavaScript
A.5 Read the docs
A.6 Structure of the project
A.7 Finding a name for your framework
A.8 Option A: Using the CLI tool
A.9 Option B: Configuring the project from scratch
A.9.1 The examples folder
A.9.2 Creating the runtime package
A.10 Publishing your framework to NPM
A.10.1 Creating an NPM account
A.10.2 Logging in to NPM
A.10.3 Publishing your framework
A.11 Using a CDN to import the framework