Learning JavaScript Design Patterns, 2nd Edition

Table of contents

1. Preface
   1. Structure of the Book
   2. Conventions Used in This Book
   3. Using Code Examples
   4. O’Reilly Online Learning
   5. How to Contact Us
   6. Acknowledgments
2. 1. Introduction to Design Patterns
   1. History of Design Patterns
   2. What Is a Pattern?
   3. An Everyday Use Case for Design Patterns
   4. Summary
3. 2. “Pattern”-ity Testing, Proto-Patterns, and the Rule of Three
   1. What Are Proto-Patterns?
   2. The “Pattern” Tests
   3. Rule of Three
   4. Summary
4. 3. Structuring and Writing Patterns
   1. The Structure of a Design Pattern
   2. Well-Written Patterns
   3. Writing a Pattern
   4. Summary
5. 4. Anti-Patterns
   1. What Are Anti-Patterns?
   2. Anti-Patterns in JavaScript
   3. Summary
6. 5. Modern JavaScript Syntax and Features
   1. The Importance of Decoupling Applications
   2. Modules with Imports and Exports
   3. Module Objects
   4. Modules Loaded from Remote Sources
   5. Static Imports
   6. Dynamic Imports
      1. Import on Interaction
      2. Import on Visibility
   7. Modules for the Server
   8. Advantages of Using Modules
   9. Classes with Constructors, Getters, and Setters
   10. Classes in JavaScript Frameworks
   11. Summary
   12. Related Reading
7. 6. Categories of Design Patterns
   1. Background
   2. Creational Design Patterns
   3. Structural Design Patterns
   4. Behavioral Design Patterns
   5. Design Pattern Classes
   6. Summary
8. 7. JavaScript Design Patterns
   1. Creational Patterns
   2. The Constructor Pattern
      1. Object Creation
      2. Basic Constructors
      3. Constructors with Prototypes
   3. The Module Pattern
      1. Object Literals
      2. The Module Pattern
      3. Module Pattern Variations
      4. Modern Module Pattern with WeakMap
      5. Modules with Modern Libraries
   4. The Revealing Module Pattern
      1. Advantages
      2. Disadvantages
   5. The Singleton Pattern
      1. State Management in React
   6. The Prototype Pattern
   7. The Factory Pattern
      1. When to Use the Factory Pattern
      2. When Not to Use the Factory Pattern
      3. Abstract Factories
   8. Structural Patterns
   9. The Facade Pattern
   10. The Mixin Pattern
   11. Subclassing
   12. Mixins
       1. Advantages and Disadvantages
   13. The Decorator Pattern
   14. Pseudoclassical Decorators
       1. Interfaces
       2. Abstract Decorators
   15. Advantages and Disadvantages
   16. Flyweight
       1. Using Flyweights
       2. Flyweights and Sharing Data
       3. Implementing Classical Flyweights
       4. Converting Code to Use the Flyweight Pattern
       5. A Basic Factory
       6. Managing the Extrinsic States
       7. The Flyweight Pattern and the DOM
       8. Example: Centralized Event Handling
   17. Behavioral Patterns
   18. The Observer Pattern
       1. Differences Between the Observer and Publish/Subscribe Pattern
       2. Advantages
       3. Disadvantages
       4. Publish/Subscribe Implementations
   19. The Mediator Pattern
       1. A Simple Mediator
       2. Similarities and Differences
       3. Event Aggregator Use
       4. Mediator Use
       5. Event Aggregator (Pub/Sub) and Mediator Together
       6. Mediator/Middleware in Modern JavaScript
       7. Mediator Versus Facade
   20. The Command Pattern
   21. Summary
9. 8. JavaScript MV* Patterns
   1. MVC
      1. Smalltalk-80 MVC
   2. MVC for JavaScript Developers
      1. Models
      2. Views
      3. Templating
      4. Controllers
   3. What Does MVC Give Us?
   4. Smalltalk-80 MVC in JavaScript
   5. Summary of MVC
   6. MVP
      1. Models, Views, and Presenters
      2. MVP or MVC?
   7. MVVM
      1. History
      2. Model
      3. View
      4. ViewModel
      5. Recap: The View and the ViewModel
      6. ViewModel Versus Model
   8. Pros and Cons
      1. Advantages
      2. Disadvantages
   9. MVC Versus MVP Versus MVVM
   10. Modern MV* Patterns
       1. MV* and React.js
   11. Summary
10. 9. Asynchronous Programming Patterns
    1. Asynchronous Programming
    2. Background
    3. Promise Patterns
       1. Promise Chaining
       2. Promise Error Handling
       3. Promise Parallelism
       4. Promise Sequential Execution
       5. Promise Memoization
       6. Promise Pipeline
       7. Promise Retry
       8. Promise Decorator
       9. Promise Race
    4. async/await Patterns
       1. async Function Composition
       2. async Iteration
       3. async Error Handling
       4. async Parallelism
       5. async Sequential Execution
       6. async Memoization
       7. async Event Handling
       8. async/await Pipeline
       9. async Retry
       10. async/await Decorator
    5. Additional Practical Examples
       1. Making an HTTP Request
       2. Reading a File from the Filesystem
       3. Writing to a File on the Filesystem
       4. Executing Multiple async Operations
       5. Executing Multiple async Operations in Sequence
       6. Caching the Result of an async Operation
       7. Handling Events with async/await
       8. Retrying an async Operation on Failure
       9. Creating an async/await Decorator
    6. Summary
11. 10. Modular JavaScript Design Patterns
    1. A Note on Script Loaders
    2. AMD
       1. Getting Started with Modules
       2. AMD Modules with jQuery
       3. AMD Conclusions
    3. CommonJS
       1. Getting Started
       2. Consuming Multiple Dependencies
       3. CommonJS in Node.js
       4. Is CommonJS Suitable for the Browser?
       5. Related Reading for CommonJS
    4. AMD and CommonJS: Competing, but Equally Valid Standards
       1. UMD: AMD and CommonJS-Compatible Modules for Plug-ins
    5. Summary
12. 11. Namespacing Patterns
    1. Namespacing Fundamentals
    2. Single Global Variables
    3. Prefix Namespacing
    4. Object Literal Notation
    5. Nested Namespacing
    6. Immediately Invoked Function Expressions
    7. Namespace Injection
    8. Advanced Namespacing Patterns
       1. Automating Nested Namespacing
       2. Dependency Declaration Pattern
       3. Deep Object Extension
    9. Recommendation
    10. Summary
13. 12. React.js Design Patterns
    1. An Introduction to React
       1. Terminology Used
       2. Basic Concepts
    2. Higher-Order Components
       1. Composing
       2. Pros
       3. Cons
    3. Render Props Pattern
       1. Lifting State
       2. Children as a Function
       3. Pros
       4. Cons
    4. Hooks Pattern
       1. Class Components
       2. Restructuring
       3. Complexity
       4. Hooks
    5. State Hook
       1. Effect Hook
       2. Custom Hooks
       3. Additional Hooks Guidance
       4. Pros and Cons of Using Hooks
       5. React Hooks Versus Classes
    6. Static Import
    7. Dynamic Import
       1. Loadable Components
       2. Import on Interaction
       3. Import on Visibility
    8. Code-Splitting
       1. Route-based Splitting
       2. Bundle Splitting
    9. PRPL Pattern
    10. Loading Prioritization
        1. Preload in Single-Page Apps
        2. Preload + the async Hack
        3. Preload in Chrome 95+
    11. List Virtualization
        1. How Does Windowing/Virtualization Work?
        2. Lists
        3. Grid
        4. Improvements in the Web Platform
    12. Conclusions
    13. Summary
14. 13. Rendering Patterns
    1. Importance of Rendering Patterns
    2. Client-Side Rendering
    3. Server-Side Rendering
    4. Static Rendering
       1. Incremental Static Regeneration
       2. On-Demand ISR
       3. Summary of Static Rendering
    5. Streaming SSR
    6. Edge SSR
    7. Hybrid Rendering
    8. Progressive Hydration
    9. Islands Architecture
       1. Implementing Islands
       2. Pros and Cons
    10. React Server Components
        1. Hybrid Rendering with RSC and the Next.js App Router
    11. Summary
15. 14. Application Structure for React.js
    1. Introduction
       1. Group by Module, Feature, or Route
       2. Group by File Type
       3. Hybrid Grouping Based on Domain and Common Components
    2. Application Structure for Modern React Features
       1. Redux
       2. Containers
       3. Hooks
       4. Styled Components
    3. Other Best Practices
    4. Application Structure for Next.js Apps
    5. Summary
16. 15. Conclusions
17. Appendix. References
18. Index
19. About the Author