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

Unlock the potential of JavaScript design patterns, the foundation for development teams seeking structured and reusable solutions to common software development challenges in this guide to improving code maintainability, scalability, and performance. Discover how these patterns equip businesses with cleaner and more maintainable code, promote team collaboration, reduce errors, and save time and costs.

This book provides a comprehensive view of design patterns in modern (ES6+) JavaScript with real-world examples of their deployment in professional settings. You’ll start by learning how to use creational, structural, and behavioral design patterns in idiomatic JavaScript, and then shift focus to the architecture and UI patterns. Here, you’ll learn how to apply patterns for libraries such as React and extend them further to general web frontend and micro frontend approaches. The last section of the book introduces and illustrates sets of performance and security patterns, including messaging and events, asset and JavaScript loading strategies, and asynchronous programming performance patterns.

Throughout the book, examples featuring React and Next.js, in addition to JavaScript and Web API examples, will help you choose and implement proven design patterns across diverse web ecosystems, transforming the way you approach development.

What you will learn

• Find out how patterns are classified into creational, structural, and behavioral
• Implement the right set of patterns for different business scenarios
• Explore diverse frontend architectures and different rendering approaches
• Identify and address common asynchronous programming performance pitfalls
• Leverage event-driven programming in the browser to deliver fast and secure applications
• Boost application performance using asset loading strategies and offloading JavaScript execution

Who this book is for

This book is for developers and software architects who want to leverage JavaScript and the web platform for enhanced productivity, superior software quality, and optimized application performance.

Prior experience with JavaScript and web development is assumed. Some of the more advanced topics in the book will be of interest to developers with intermediate experience in building for the web with JavaScript.