Learning JavaScript Design Patterns

Preface
Structure of the Book
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments

1. Introduction to Design Patterns
History of Design Patterns
What Is a Pattern?
An Everyday Use Case for Design Patterns
Summary

2. “Pattern”-ity Testing, Proto-Patterns, and the Rule of Three
What Are Proto-Patterns?
The “Pattern” Tests
Rule of Three
Summary

3. Structuring and Writing Patterns
The Structure of a Design Pattern
Well-Written Patterns
Writing a Pattern
Summary

4. Anti-Patterns
What Are Anti-Patterns?
Anti-Patterns in JavaScript
Summary

5. Modern JavaScript Syntax and Features
The Importance of Decoupling Applications
Modules with Imports and Exports
Module Objects
Modules Loaded from Remote Sources
Static Imports
Dynamic Imports
Import on Interaction
Import on Visibility
Modules for the Server
Advantages of Using Modules
Classes with Constructors, Getters, and Setters
Classes in JavaScript Frameworks
Summary
Related Reading

6. Categories of Design Patterns
Background
Creational Design Patterns
Structural Design Patterns
Behavioral Design Patterns
Design Pattern Classes
Summary

7. JavaScript Design Patterns
Creational Patterns
The Constructor Pattern
Object Creation
Basic Constructors
Constructors with Prototypes
The Module Pattern
Object Literals
The Module Pattern
Module Pattern Variations
Modern Module Pattern with WeakMap
Modules with Modern Libraries
The Revealing Module Pattern
Advantages
Disadvantages
The Singleton Pattern
State Management in React
The Prototype Pattern
The Factory Pattern
When to Use the Factory Pattern
When Not to Use the Factory Pattern
Abstract Factories
Structural Patterns
The Facade Pattern
The Mixin Pattern
Subclassing
Mixins
Advantages and Disadvantages
The Decorator Pattern
Pseudoclassical Decorators
Interfaces
Abstract Decorators
Advantages and Disadvantages
Flyweight
Using Flyweights
Flyweights and Sharing Data
Implementing Classical Flyweights
Converting Code to Use the Flyweight Pattern
A Basic Factory
Managing the Extrinsic States
The Flyweight Pattern and the DOM
Example: Centralized Event Handling
Behavioral Patterns
The Observer Pattern
Differences Between the Observer and Publish/Subscribe Pattern
Advantages
Disadvantages
Publish/Subscribe Implementations
The Mediator Pattern
A Simple Mediator
Similarities and Differences
Event Aggregator Use
Mediator Use
Event Aggregator (Pub/Sub) and Mediator Together
Mediator/Middleware in Modern JavaScript
Mediator Versus Facade
The Command Pattern
Summary

8. JavaScript MV* Patterns
MVC
Smalltalk-80 MVC
MVC for JavaScript Developers
Models
Views
Templating
Controllers
What Does MVC Give Us?
Smalltalk-80 MVC in JavaScript
Summary of MVC
MVP
Models, Views, and Presenters
MVP or MVC?
MVVM
History
Model
View
ViewModel
Recap: The View and the ViewModel
ViewModel Versus Model
Pros and Cons
Advantages
Disadvantages
MVC Versus MVP Versus MVVM
Modern MV* Patterns
MV* and React.js
Summary

9. Asynchronous Programming Patterns
Asynchronous Programming
Background
Promise Patterns
Promise Chaining
Promise Error Handling
Promise Parallelism
Promise Sequential Execution
Promise Memoization
Promise Pipeline
Promise Retry
Promise Decorator
Promise Race
async/await Patterns
async Function Composition
async Iteration
async Error Handling
async Parallelism
async Sequential Execution
async Memoization
async Event Handling
async/await Pipeline
async Retry
async/await Decorator
Additional Practical Examples
Making an HTTP Request
Reading a File from the Filesystem
Writing to a File on the Filesystem
Executing Multiple async Operations
Executing Multiple async Operations in Sequence
Caching the Result of an async Operation
Handling Events with async/await
Retrying an async Operation on Failure
Creating an async/await Decorator
Summary

10. Modular JavaScript Design Patterns
A Note on Script Loaders
AMD
Getting Started with Modules
AMD Modules with jQuery
AMD Conclusions
CommonJS
Getting Started
Consuming Multiple Dependencies
CommonJS in Node.js
Is CommonJS Suitable for the Browser?
Related Reading for CommonJS
AMD and CommonJS: Competing, but Equally Valid Standards
UMD: AMD and CommonJS-Compatible Modules for Plug-ins
Summary

11. Namespacing Patterns
Namespacing Fundamentals
Single Global Variables
Prefix Namespacing
Object Literal Notation
Nested Namespacing
Immediately Invoked Function Expressions
Namespace Injection
Advanced Namespacing Patterns
Automating Nested Namespacing
Dependency Declaration Pattern
Deep Object Extension
Recommendation
Summary

12. React.js Design Patterns
An Introduction to React
Terminology Used
Basic Concepts
Higher-Order Components
Composing
Pros
Cons
Render Props Pattern
Lifting State
Children as a Function
Pros
Cons
Hooks Pattern
Class Components
Restructuring
Complexity
Hooks
State Hook
Effect Hook
Custom Hooks
Additional Hooks Guidance
Pros and Cons of Using Hooks
React Hooks Versus Classes
Static Import
Dynamic Import
Loadable Components
Import on Interaction
Import on Visibility
Code-Splitting
Route-based Splitting
Bundle Splitting
PRPL Pattern
Loading Prioritization
Preload in Single-Page Apps
Preload + the async Hack
Preload in Chrome 95+
List Virtualization
How Does Windowing/Virtualization Work?
Lists
Grid
Improvements in the Web Platform
Conclusions
Summary

13. Rendering Patterns
Importance of Rendering Patterns
Client-Side Rendering
Server-Side Rendering
Static Rendering
Incremental Static Regeneration
On-Demand ISR
Summary of Static Rendering
Streaming SSR
Edge SSR
Hybrid Rendering
Progressive Hydration
Islands Architecture
Implementing Islands
Pros and Cons
React Server Components
Hybrid Rendering with RSC and the Next.js App Router
Summary

14. Application Structure for React.js
Introduction
Group by Module, Feature, or Route
Group by File Type
Hybrid Grouping Based on Domain and Common Components
Application Structure for Modern React Features
Redux
Containers
Hooks
Styled Components
Other Best Practices
Application Structure for Next.js Apps
Summary

15. Conclusions

Appendix. References
Index
About the Author