JavaScript Design Patterns: Deliver fast and efficient production-grade JavaScript applications at scale

Cover....1 Title Page....2 Copyright and Credits....3 Dedications....4 Contributors....5 Table of Contents....8 Part 1: Design Patterns....20 Chapter 1: Working with Creational Design Patterns....22 What are creational design patterns?....23 Implementing the prototype pattern in JavaScript....23 Implementation....23 A use case....26 The singleton pattern with eager and lazy initialization in JavaScript....30 Implementation....30 Use cases....34 Improvements with the “class singleton” pattern....35 A singleton without class fields using ES module behavior....37 The factory pattern in JavaScript....39 Implementation....39 Use cases....41 Improvements with modern JavaScript....41 Summary....43 Chapter 2: Implementing Structural Design Patterns....44 Technical requirements....44 What are structural design patterns?....45 Implementing the Proxy pattern with Proxy and Reflect....45 A redaction proxy implementation....45 Use cases....46 Improving the proxy pattern in JavaScript with the Proxy and Reflect global objects....47 Decorator in JavaScript....52 Implementation....53 Use cases....54 Improvements/limitations....54 Flyweight in JavaScript....56 Implementation....56 Use cases....60 Improvements/limitations....60 Adapter in JavaScript....63 Use cases....67 Improvements/limitations....68 Summary....71 Chapter 3: Leveraging Behavioral Design Patterns....72 Technical requirements....72 What are behavioral design patterns?....73 The observer pattern in JavaScript....73 Implementation....73 Use cases of the observer pattern....77 Limitations and improvements....77 State and strategy in JavaScript and a simplified approach....80 Implementation....80 Use cases of the state and strategy patterns....88 Limitations and improvements....88 Visitor in JavaScript....94 Implementation....95 Use cases of the visitor pattern....97 Summary....98 Part 2: Architecture and UI Patterns....100 Chapter 4: Exploring Reactive View Library Patterns....102 Technical requirements....102 What are reactive view library patterns?....103 The render prop pattern....103 Use cases....104 Implementation/example....108 Limitations....114 The higher-order component pattern....115 Implementation/example....115 Use cases....116 Limitations....116 The hooks pattern....117 An implementation/example....118 Use cases....122 Limitations....122 The provider pattern....122 Use case – the prop drilling problem....122 An implementation/example....123 Limitations....128 Summary....129 Chapter 5: Rendering Strategies and Page Hydration....130 Technical requirements....130 Client and server rendering with React....131 Client-side rendering in React....132 Server rendering in React....133 Trade-offs between client and server rendering....136 Static rendering with Next.js....137 Automatic static generation....138 Static generation with a third-party data source....140 Static generation with dynamic paths....144 Page hydration strategies....151 Common React rehydration issues....156 React streaming server-side rendering....159 Summary....163 Chapter 6: Micro Frontends, Zones, and Islands Architectures....164 Technical requirements....164 An overview of micro frontends....165 Key benefits....165 “Classic” micro frontend patterns....166 Other concerns in a micro frontend world....168 Composing applications with Next.js “zones”....169 Root app....170 Adding a /search app....173 Adding /checkout app....176 The benefits/supporting team scaling....181 The drawbacks of Next.js zones....182 Scaling performance-sensitive pages with the “islands” architecture....182 Islands setup with is-land....183 Product island....184 Cart island....187 A related products island....191 Scaling with a team – bundling islands....198 Drawbacks....198 Summary....199 Part 3: Performance and Security Patterns....200 Chapter 7: Asynchronous Programming Performance Patterns....202 Technical requirements....202 Controlling sequential asynchronous operations with async/await and Promises....202 Parallel asynchronous operation patterns....208 Asynchronous cancellation and timeouts with AbortController....215 Throttling, debouncing, and batching asynchronous operations....219 Summary....226 Chapter 8: Event-Driven Programming Patterns....228 Technical requirements....228 Optimizing event listeners through event delegation....229 Patterns for secure frame/native WebView bridge messaging....237 Event listener performance antipatterns....250 Summary....251 Chapter 9: Maximizing Performance – Lazy Loading and Code Splitting....252 Technical requirements....252 Dynamic imports and code splitting with Vite....252 Route-based code splitting and bundling....256 Loading JavaScript on element visibility and interaction....260 Summary....278 Chapter 10: Asset Loading Strategies and Executing Code off the Main Thread....280 Technical requirements....280 Asset loading optimization – async, defer, preconnect, preload, and prefetch....281 Using Next.js Script’s strategy option to optimize asset loading....289 Loading and running scripts in a worker thread....291 Summary....295 Index....298 Other Books You May Enjoy....303