Build a Frontend Web Framework (From Scratch) – Angel Sola Orbaiceta

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
1.3 Overview of how a frontend framework works 10
2 – Vanilla JavaScript—like in the old days 25
2.1 The assignment: A TODOs app 26
2.2 Writing the application 27
3 – Rendering and the virtual DOM 43
3.1 Separating concerns: DOM manipulation vs application logic.
3.2 The virtual DOM 46
3.3 Getting ready 49
3.4 Types of nodes 49
3.5 Element nodes 50
3.6 Text nodes 53
3.7 Fragment nodes 54
3.8 Components: The cornerstone of frontend frameworks 56
4 – Mounting and destroying the virtual DOM 64
4.1 Mounting the virtual DOM 65
4.2 Destroying the DOM 80
5 – State management and the application’s lifecycle 86
5.1 The state manager 90
5.2 Assembling the state manager into the framework 102
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
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
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
8 – The reconciliation algorithm: Patching the DOM 161
8.1 Mounting the DOM at an index 162
8.2 Patching the DOM 167
8.3 Publishing the framework’s new version 198
8.4 The TODOs application 199
9 – Stateful components 207
9.1 Anatomy of a stateful component 211
9.2 Components as classes 214
9.3 Components with state 218
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
11.2 Events 268
12 – Keyed lists 279
12.1 The key attribute 283
12.2 Extending the solution to element nodes 286
12.3 Using the key attribute 291
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
13.3 The scheduler 307
13.4 Publishing version 4 of the framework 318
14 – Testing asynchronous components 319
14.1 Testing components with asynchronous behavior: nextTick() 320
14.2 Publishing version 4.1 of the framework 328
14.3 Where to go from here 328