Orbaiceta Angel Sola / Орбайсета Ангел Сола - Build a Frontend Web Framework (From Scratch) / Создание веб-фреймворка Frontend (с нуля) [2024, PDF, ENG]

Примеры страниц (скриншоты)

Оглавление

preface xi
acknowledgments xiii
about this book xv
about the author xx
about the cover illustration xxi
PART 1 NO FRAMEWORK 1
1 Are frontend frameworks magic to you? 3
1.1 Why build your own frontend framework? 4
1.2 The framework we’ll build 5
Features 7 ■ Implementation plan 8
1.3 Overview of how a frontend framework works 10
The developer’s side 10 ■ The browser side of an SPA 12
The browser and server sides of an SSR application 19
2 Vanilla JavaScript—like in the old days 25
2.1 The assignment: A TODOs app 26
2.2 Writing the application 27
Project setup 29 ■ The HTML markup 29 ■ The JavaScript
code 31
PART 2 A BASIC FRAMEWORK 41
3 Rendering and the virtual DOM 43
3.1 Separating concerns: DOM manipulation vs.
application logic 44
3.2 The virtual DOM 46
3.3 Getting ready 49
3.4 Types of nodes 49
3.5 Element nodes 50
Conditional rendering: Removing null values 52 ■ Mapping
strings to text nodes 53
3.6 Text nodes 53
3.7 Fragment nodes 54
Implementing fragment nodes 54 ■ Testing the virtual DOM
functions 54
3.8 Components: The cornerstone of frontend
frameworks 56
What is a component? 56 ■ The virtual DOM as a function of the
state 56 ■ Composing views: Components as children 59
4 Mounting and destroying the virtual DOM 64
4.1 Mounting the virtual DOM 65
Mounting virtual nodes into the DOM 68 ■ Mounting text
nodes 68 ■ Mounting fragment nodes 69 ■ Mounting
element nodes 71 ■ Adding event listeners 73 ■ Setting
the attributes 74 ■ A mountDOM() example 79
4.2 Destroying the DOM 80
Destroying a text node 82 ■ Destroying an element 83
Destroying a fragment 84
5 State management and the application’s lifecycle 86
5.1 The state manager 90
From JavaScript events to application domain commands 90
The reducer functions 93 ■ The dispatcher 95 ■ Result 101
5.2 Assembling the state manager into the framework 102
The application instance 102 ■ The application instance’s
renderer 103 ■ The application instance’s state manager 104
Components dispatching commands 105 ■ Unmounting the
application 107 ■ Result 108
6 Publishing and using your framework’s first version 110
6.1 Building and publishing the framework 111
6.2 A short example 112
6.3 Refactoring the TODOs app 113
Defining the state 114 ■ Defining the reducers 115
Defining the view 117
7 The reconciliation algorithm: Diffing virtual trees 122
7.1 The three key functions of the reconciliation
algorithm 126
7.2 Comparing two virtual DOM trees 126
Finding the differences 127 ■ Applying the changes 131
7.3 Changes in the rendering 134
7.4 Diffing objects 136
7.5 Diffing arrays 138
7.6 Diffing arrays as a sequence of operations 139
Defining the operations you can use 140 ■ Finding the sequence
of operations: The algorithm 141 ■ An example by hand 143
Implementing the algorithm 146
8 The reconciliation algorithm: Patching the DOM 161
8.1 Mounting the DOM at an index 162
The insert() function 163 ■ Text nodes 166 ■ Element
nodes 166 ■ Fragment nodes 167
8.2 Patching the DOM 167
The reconciliation algorithm 168 ■ Virtual node equality 172
Subtree change 175 ■ Patching text nodes 178 ■ Patching
element nodes 181 ■ Patching child nodes 189
8.3 Publishing the framework’s new version 198
8.4 The TODOs application 199
Inspecting the DOM tree changes 199 ■ Using the paint-flashing
tool (Chrome only) 201
PART 3 IMPROVING THE FRAMEWORK 205
9 Stateful components 207
9.1 Anatomy of a stateful component 211
The properties of a stateful component 213 ■ The methods of a
stateful component 214
9.2 Components as classes 214
9.3 Components with state 218
Updating the state and patching the DOM 221 ■ Result 223
The component’s offset 225 ■ Patching the DOM using the
component’s offset 229
10 Component methods 234
10.1 Component methods 237
10.2 Binding event handlers to the component 241
10.3 Mounting the DOM with a host component 242
10.4 Patching the DOM with a host component 244
11 Subcomponents: Communication via props and events 250
11.1 Adding components as a new virtual DOM type 253
Updating the elements getter 254 ■ Mounting component
virtual nodes 256 ■ Destroying component virtual nodes 261
Patching component virtual nodes 263 ■ A rendering
optimization (optional) 265
11.2 Events 268
Saving the event handlers inside the component 270 ■ Extracting
the props and events for a component 273 ■ Wiring the event
handlers 274 ■ Emitting events 277
12 Keyed lists 279
12.1 The key attribute 283
Component nodes equality 284 ■ Using the key attribute 285
Removing the key attribute from the props object 286
12.2 Extending the solution to element nodes 286
12.3 Using the key attribute 291
Mistake 1: Using the index as key 291 ■ Mistake 2: Using the same
key for different elements 294
12.4 The application instance 295
12.5 Publishing the framework 297
13 The component lifecycle hooks and the scheduler 299
13.1 The component lifecycle 301
13.2 Implementing the mounted and unmounted lifecycle hooks 305
Hooks asynchronicity 306 ■ Hooks execution context 306
Dealing with asynchronicity and execution context 306
13.3 The scheduler 307
A simple solution that doesn’t quite work 308 ■ Tasks, microtasks,
and the event loop 310 ■ The event loop cycle 311 ■ The
fundamentals of the scheduler 312 ■ Implementing a
scheduler 314 ■ Scheduling the lifecycle hooks execution 315
13.4 Publishing version 4 of the framework 318
14 Testing asynchronous components 319
14.1 Testing components with asynchronous behavior:
nextTick() 320
Testing a component with an asynchronous onMounted()
hook 322 ■ The fundamentals behind the nextTick()
function 324 ■ Implementing the nextTick() function 326
14.2 Publishing version 4.1 of the framework 328
14.3 Where to go from here 328
appendix Setting up the project 331
index 351