Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide. 2 Ed

Cover....1

Copyright....3

Table of Contents....4

Preface....12

Structure of the Book....13

Conventions Used in This Book....14

Using Code Examples....15

O’Reilly Online Learning....16

How to Contact Us....16

Acknowledgments....16

Chapter 1. Introduction to Design Patterns....18

History of Design Patterns....19

What Is a Pattern?....19

An Everyday Use Case for Design Patterns....21

Summary....22

Chapter 2. “Pattern”-ity Testing, Proto-Patterns, and the Rule of Three....24

What Are Proto-Patterns?....24

The “Pattern” Tests....25

Rule of Three....26

Summary....26

Chapter 3. Structuring and Writing Patterns....28

The Structure of a Design Pattern....28

Well-Written Patterns....29

Writing a Pattern....30

Summary....31

Chapter 4. Anti-Patterns....32

What Are Anti-Patterns?....32

Anti-Patterns in JavaScript....33

Summary....34

Chapter 5. Modern JavaScript Syntax and Features....36

The Importance of Decoupling Applications....36

Modules with Imports and Exports....37

Module Objects....39

Modules Loaded from Remote Sources....40

Static Imports....40

Dynamic Imports....40

Import on Interaction....41

Import on Visibility....41

Modules for the Server....41

Advantages of Using Modules....42

Classes with Constructors, Getters, and Setters....43

Classes in JavaScript Frameworks....45

Summary....46

Related Reading....46

Chapter 6. Categories of Design Patterns....48

Background....48

Creational Design Patterns....49

Structural Design Patterns....49

Behavioral Design Patterns....49

Design Pattern Classes....49

Summary....51

Chapter 7. JavaScript Design Patterns....52

Creational Patterns....52

The Constructor Pattern....53

Object Creation....53

Basic Constructors....55

Constructors with Prototypes....56

The Module Pattern....57

Object Literals....57

The Module Pattern....59

Module Pattern Variations....63

Modern Module Pattern with WeakMap....65

Modules with Modern Libraries....67

The Revealing Module Pattern....68

Advantages....70

Disadvantages....70

The Singleton Pattern....70

State Management in React....74

The Prototype Pattern....75

The Factory Pattern....78

When to Use the Factory Pattern....81

When Not to Use the Factory Pattern....81

Abstract Factories....81

Structural Patterns....82

The Facade Pattern....83

The Mixin Pattern....85

Subclassing....85

Mixins....86

Advantages and Disadvantages....89

The Decorator Pattern....90

Pseudoclassical Decorators....93

Interfaces....94

Abstract Decorators....95

Advantages and Disadvantages....98

Flyweight....99

Using Flyweights....100

Flyweights and Sharing Data....100

Implementing Classical Flyweights....100

Converting Code to Use the Flyweight Pattern....103

A Basic Factory....106

Managing the Extrinsic States....106

The Flyweight Pattern and the DOM....108

Example: Centralized Event Handling....108

Behavioral Patterns....110

The Observer Pattern....110

Differences Between the Observer and Publish/Subscribe Pattern....114

Advantages....117

Disadvantages....117

Publish/Subscribe Implementations....117

The Mediator Pattern....127

A Simple Mediator....128

Similarities and Differences....129

Event Aggregator Use....131

Mediator Use....131

Event Aggregator (Pub/Sub) and Mediator Together....132

Mediator/Middleware in Modern JavaScript....133

Mediator Versus Facade....134

The Command Pattern....134

Summary....136

Chapter 8. JavaScript MV* Patterns....138

MVC....138

Smalltalk-80 MVC....139

MVC for JavaScript Developers....139

Models....140

Views....141

Templating....143

Controllers....145

What Does MVC Give Us?....145

Smalltalk-80 MVC in JavaScript....145

Summary of MVC....146

MVP....146

Models, Views, and Presenters....147

MVP or MVC?....148

MVVM....149

History....149

Model....150

View....150

ViewModel....151

Recap: The View and the ViewModel....151

ViewModel Versus Model....151

Pros and Cons....152

Advantages....152

Disadvantages....152

MVC Versus MVP Versus MVVM....152

Modern MV* Patterns....153

MV* and React.js....153

Summary....154

Chapter 9. Asynchronous Programming Patterns....156

Asynchronous Programming....156

Background....158

Promise Patterns....159

Promise Chaining....160

Promise Error Handling....161

Promise Parallelism....161

Promise Sequential Execution....161

Promise Memoization....161

Promise Pipeline....162

Promise Retry....163

Promise Decorator....163

Promise Race....164

async/await Patterns....164

async Function Composition....164

async Iteration....165

async Error Handling....165

async Parallelism....165

async Sequential Execution....166

async Memoization....166

async Event Handling....166

async/await Pipeline....167

async Retry....167

async/await Decorator....167

Additional Practical Examples....168

Making an HTTP Request....168

Reading a File from the Filesystem....168

Writing to a File on the Filesystem....168

Executing Multiple async Operations....169

Executing Multiple async Operations in Sequence....169

Caching the Result of an async Operation....169

Handling Events with async/await....170

Retrying an async Operation on Failure....170

Creating an async/await Decorator....170

Summary....171

Chapter 10. Modular JavaScript Design Patterns....172

A Note on Script Loaders....172

AMD....173

Getting Started with Modules....173

AMD Modules with jQuery....177

AMD Conclusions....180

CommonJS....180

Getting Started....181

Consuming Multiple Dependencies....182

CommonJS in Node.js....183

Is CommonJS Suitable for the Browser?....183

Related Reading for CommonJS....184

AMD and CommonJS: Competing, but Equally Valid Standards....184

UMD: AMD and CommonJS-Compatible Modules for Plug-ins....185

Summary....190

Chapter 11. Namespacing Patterns....192

Namespacing Fundamentals....192

Single Global Variables....193

Prefix Namespacing....193

Object Literal Notation....194

Nested Namespacing....197

Immediately Invoked Function Expressions....198

Namespace Injection....201

Advanced Namespacing Patterns....203

Automating Nested Namespacing....203

Dependency Declaration Pattern....205

Deep Object Extension....206

Recommendation....208

Summary....209

Chapter 12. React.js Design Patterns....210

An Introduction to React....210

Terminology Used....211

Basic Concepts....211

Higher-Order Components....213

Composing....216

Pros....216

Cons....217

Render Props Pattern....217

Lifting State....219

Children as a Function....221

Pros....222

Cons....222

Hooks Pattern....222

Class Components....223

Restructuring....224

Complexity....225

Hooks....225

State Hook....225

Effect Hook....227

Custom Hooks....228

Additional Hooks Guidance....230

Pros and Cons of Using Hooks....230

React Hooks Versus Classes....233

Static Import....233

Dynamic Import....234

Loadable Components....236

Import on Interaction....237

Import on Visibility....237

Code-Splitting....238

Route-based Splitting....238

Bundle Splitting....239

PRPL Pattern....241

Loading Prioritization....243

Preload in Single-Page Apps....244

Preload + the async Hack....245

Preload in Chrome 95+....245

List Virtualization....245

How Does Windowing/Virtualization Work?....245

Lists....246

Grid....247

Improvements in the Web Platform....249

Conclusions....249

Summary....249

Chapter 13. Rendering Patterns....250

Importance of Rendering Patterns....251

Client-Side Rendering....253

Server-Side Rendering....253

Static Rendering....254

Incremental Static Regeneration....255

On-Demand ISR....256

Summary of Static Rendering....256

Streaming SSR....257

Edge SSR....258

Hybrid Rendering....258

Progressive Hydration....259

Islands Architecture....260

Implementing Islands....260

Pros and Cons....261

React Server Components....262

Hybrid Rendering with RSC and the Next.js App Router....263

Summary....263

Chapter 14. Application Structure for React.js....266

Introduction....266

Group by Module, Feature, or Route....267

Group by File Type....267

Hybrid Grouping Based on Domain and Common Components....268

Application Structure for Modern React Features....269

Redux....270

Containers....270

Hooks....270

Styled Components....271

Other Best Practices....271

Application Structure for Next.js Apps....273

Summary....274

Chapter 15. Conclusions....276

Appendix. References....278

Index....280

About the Author....297

Colophon....297

Do you want to write beautiful, structured, and maintainable JavaScript by applying modern design patterns to the language? Do you want clean, efficient, manageable code? Want to stay up-to-date with the latest best practices? If so, the updated second edition of Learning JavaScript Design Patterns is the ideal place to start.

Author Addy Osmani shows you how to apply modern design patterns to JavaScript and React—including modules, mixins, observers, and mediators. You'll learn about performance and rendering patterns such as server-side rendering and Islands architecture. You'll also learn how architectural patterns like MVC, MVP, and MVVM are useful from the perspective of a modern web application developer.

 This book explores:

• Architectural patterns for structuring your components and apps
• More than 20 design patterns in JavaScript and React, applicable for developers at any level
• Different pattern categories including creational, structural, and behavioral
• Essential performance patterns including dynamic imports and code-splitting
• Rendering patterns such as server-side rendering, hydration, Islands architecture, and more

Additionally, you'll explore modern JavaScript syntax like JavaScript modules, React patterns like Hooks, higher-order components (HOCs), and more, to stay ahead in the ever-evolving world of web development.