Francesco Hugo Di / Франческо Хьюго Ди - JavaScript Design Patterns / Шаблоны разработки на JavaScript [2024, PDF, EPUB, ENG]

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

Оглавление

Preface xiii
Part 1: Design Patterns
1
Working with Creational Design Patterns 3
What are creational design patterns? 4
Implementing the prototype pattern in JavaScript 4
Implementation 4
A use case 7
The singleton pattern with eager
and lazy initialization in JavaScript 11
Implementation 11
Use cases 15
Improvements with the “class singleton” pattern 16
A singleton without class fields using ES module behavior 18
The factory pattern in JavaScript 20
Implementation 20
Use cases 22
Improvements with modern JavaScript 22
Summary 24
2
Implementing Structural Design Patterns 25
Technical requirements 25
What are structural design patterns? 26
Implementing the Proxy pattern
with Proxy and Reflect 26
A redaction proxy implementation 26
Use cases 27
Improving the proxy pattern in JavaScript with the Proxy and Reflect global objects 28
Decorator in JavaScript 33
Implementation 34
Use cases 35
Improvements/limitations 35
Flyweight in JavaScript 37
Implementation 37
Use cases 41
Improvements/limitations 41
Adapter in JavaScript 44
Use cases 48
Improvements/limitations 49
Summary 52
3
Leveraging Behavioral Design Patterns 53
Technical requirements 53
What are behavioral design patterns? 54
The observer pattern in JavaScript 54
Implementation 54
Use cases of the observer pattern 58
Limitations and improvements 58
State and strategy in JavaScript
and a simplified approach 61
Implementation 61
Use cases of the state and strategy patterns 69
Limitations and improvements 69
Visitor in JavaScript 75
Implementation 76
Use cases of the visitor pattern 78
Summary 79
Part 2: Architecture and UI Patterns
4
Exploring Reactive View Library Patterns 83
Technical requirements 83
What are reactive view library
patterns? 84
The render prop pattern 84
Use cases 85
Implementation/example 89
Limitations 95
The higher-order component pattern 96
Implementation/example 96
Use cases 97
Limitations 97
The hooks pattern 98
An implementation/example 99
Use cases 103
Limitations 103
The provider pattern 103
Use case – the prop drilling problem 103
An implementation/example 104
Limitations 109
Summary 110
5
Rendering Strategies and Page Hydration 111
Technical requirements 111
Client and server rendering
with React 112
Client-side rendering in React 113
Server rendering in React 114
Trade-offs between client and server rendering 117
Static rendering with Next.js 118
Automatic static generation 119
Static generation with a third-party
data source 121
Static generation with dynamic paths 125
Page hydration strategies 132
Common React rehydration issues 137
React streaming server-side rendering 140
Summary 144
6
Micro Frontends, Zones, and Islands Architectures 145
Technical requirements 145
An overview of micro frontends 146
Key benefits 146
“Classic” micro frontend patterns 147
Other concerns in a micro frontend world 149
Composing applications
with Next.js “zones” 150
Root app 151
Adding a /search app 154
Adding /checkout app 157
The benefits/supporting team scaling 162
The drawbacks of Next.js zones 163
Scaling performance-sensitive pages
with the “islands” architecture 163
Islands setup with is-land 164
Product island 165
Cart island 168
A related products island 172
Scaling with a team – bundling islands 179
Drawbacks 179
Summary 180
Part 3: Performance and Security Patterns
7
Asynchronous Programming Performance Patterns 183
Technical requirements 183
Controlling sequential asynchronous
operations with async/await
and Promises 183
Parallel asynchronous
operation patterns 189
Asynchronous cancellation and
timeouts with AbortController 196
Throttling, debouncing, and batching
asynchronous operations 200
Summary 207
8
Event-Driven Programming Patterns 209
Technical requirements 209
Optimizing event listeners
through event delegation 210
Patterns for secure frame/native
WebView bridge messaging 218
Event listener performance
antipatterns 231
Summary 232
9
Maximizing Performance – Lazy Loading and Code Splitting 233
Technical requirements 233
Dynamic imports and code
splitting with Vite 233
Route-based code splitting
and bundling 237
Loading JavaScript on element
visibility and interaction 241
Summary 259
10
Asset Loading Strategies and Executing Code off the Main Thread 261
Technical requirements 261
Asset loading optimization – async,
defer, preconnect, preload, and
prefetch 262
Using Next.js Script’s strategy
option to optimize asset loading 270
Loading and running scripts
in a worker thread 272
Summary 276
Index 279
Other Books You May Enjoy 284