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

Table of contents :
JavaScript Design Patterns
Contributors
About the author
About the reviewers
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
Part 1:Design Patterns
Chapter 1: Working with Creational Design Patterns
What are creational design patterns?
Implementing the prototype pattern in JavaScript
Implementation
A use case
The singleton pattern with eager and lazy initialization in JavaScript
Implementation
Use cases
Improvements with the “class singleton” pattern
A singleton without class fields using ES module behavior
The factory pattern in JavaScript
Implementation
Use cases
Improvements with modern JavaScript
Summary
Chapter 2: Implementing Structural Design Patterns
Technical requirements
What are structural design patterns?
Implementing the Proxy pattern with Proxy and Reflect
A redaction proxy implementation
Use cases
Improving the proxy pattern in JavaScript with the Proxy and Reflect global objects
Decorator in JavaScript
Implementation
Use cases
Improvements/limitations
Flyweight in JavaScript
Implementation
Use cases
Improvements/limitations
Adapter in JavaScript
Use cases
Improvements/limitations
Summary
Chapter 3: Leveraging Behavioral Design Patterns
Technical requirements
What are behavioral design patterns?
The observer pattern in JavaScript
Implementation
Use cases of the observer pattern
Limitations and improvements
State and strategy in JavaScript and a simplified approach
Implementation
Use cases of the state and strategy patterns
Limitations and improvements
Visitor in JavaScript
Implementation
Use cases of the visitor pattern
Summary
Part 2:Architecture and UI Patterns
Chapter 4: Exploring Reactive View Library Patterns
Technical requirements
What are reactive view library patterns?
The render prop pattern
Use cases
Implementation/example
Limitations
The higher-order component pattern
Implementation/example
Use cases
Limitations
The hooks pattern
An implementation/example
Use cases
Limitations
The provider pattern
Use case – the prop drilling problem
An implementation/example
Limitations
Summary
Chapter 5: Rendering Strategies and Page Hydration
Technical requirements
Client and server rendering with React
Client-side rendering in React
Server rendering in React
Trade-offs between client and server rendering
Static rendering with Next.js
Automatic static generation
Static generation with a third-party data source
Static generation with dynamic paths
Page hydration strategies
Common React rehydration issues
React streaming server-side rendering
Summary
Chapter 6: Micro Frontends, Zones, and Islands Architectures
Technical requirements
An overview of micro frontends
Key benefits
“Classic” micro frontend patterns
Other concerns in a micro frontend world
Composing applications with Next.js “zones”
Root app
Adding a /search app
Adding /checkout app
The benefits/supporting team scaling
The drawbacks of Next.js zones
Scaling performance-sensitive pages with the “islands” architecture
Islands setup with is-land
Product island
Cart island
A related products island
Scaling with a team – bundling islands
Drawbacks
Summary
Part 3:Performance and Security Patterns
Chapter 7: Asynchronous Programming Performance Patterns
Technical requirements
Controlling sequential asynchronous operations with async/await and Promises
Parallel asynchronous operation patterns
Asynchronous cancellation and timeouts with AbortController
Throttling, debouncing, and batching asynchronous operations
Summary
Chapter 8: Event-Driven Programming Patterns
Technical requirements
Optimizing event listeners through event delegation
Patterns for secure frame/native WebView bridge messaging
Event listener performance antipatterns
Summary
Chapter 9: Maximizing Performance – Lazy Loading and Code Splitting
Technical requirements
Dynamic imports and code splitting with Vite
Route-based code splitting and bundling
Loading JavaScript on element visibility and interaction
Summary
Chapter 10: Asset Loading Strategies and Executing Code off the Main Thread
Technical requirements
Asset loading optimization – async, defer, preconnect, preload, and prefetch
Using Next.js Script’s strategy option to optimize asset loading
Loading and running scripts in a worker thread
Summary
Index
Why subscribe?
Other Books You May Enjoy
Packt is searching for authors like you
Download a free PDF copy of this book