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