CHAPTER 01 Introduction to Design Patterns

_1.1 History of Design Patterns
_1.2 What is a pattern?
_1.3 Everyday Use Cases of Design Patterns
_1.4 In conclusion

CHAPTER 02 Pattern Verification, Proto Patterns, and the Three Laws

_2.1 What is the Proto Pattern?
_2.2 Pattern Verification
_2.3 Three Laws
_2.4 In conclusion

CHAPTER 03 Structuring and Writing Patterns

_3.1 Structure of design patterns
_3.2 Best Practice Patterns
_3.3 Writing a Pattern
_3.4 In conclusion

CHAPTER 04 Anti-Patterns

_4.1 What is an anti-pattern?
_4.2 JavaScript Anti-Patterns
_4.3 In conclusion

CHAPTER 05 Latest JavaScript Grammar and Features

_5.1 The Importance of Application Separation
_5.2 Importing and Exporting Modules
_5.3 Module Object
_5.4 Modules imported from external sources
_5.5 Statically importing modules
_5.6 Dynamically importing modules
__5.6.1 Fetching based on user interaction
__5.6.2 Get it when it appears on the screen
_5.7 Using modules on servers
Benefits of using the _5.8 module
_5.9 Classes with constructors, getters, and setters
_5.10 JavaScript Frameworks and Classes
_5.11 In closing
_5.12 Related Materials

CHAPTER 06 Types of Design Patterns

_6.1 Background
_6.2 Creation Pattern
_6.3 Structural Patterns
_6.4 Behavior Patterns
_6.5 Classification of design patterns
_6.6 In conclusion

CHAPTER 07 JavaScript Design Patterns

_7.1 Creation Pattern
_7.2 Constructor Pattern
__7.2.1 Object Creation
__7.2.2 Basic Features of Constructors
__7.2.3 Constructor with prototype
_7.3 Module Pattern
__7.3.1 Object Literals
__7.3.2 Module Pattern
__7.3.3 Variations of the module pattern
__7.3.4 Modern module pattern using WeakMap
__7.3.5 Latest libraries and modules
_7.4 Exposure Module Pattern
__7.4.1 Advantages
__7.4.2 Disadvantages
_7.5 Singleton Pattern
__7.5.1 React State Management
_7.6 Prototype Pattern
_7.7 Factory Pattern
__7.7.1 Good situations when using the factory pattern
__7.7.2 Situations in which the factory pattern should not be used
__7.7.3 Abstract Factory Pattern
_7.8 Structural Patterns
_7.9 Facade Pattern
_7.10 Mixin Pattern
_7.11 Subclassing
_7.12 Mixin
__7.12.1 Advantages and Disadvantages
_7.13 Decorator Pattern
_7.14 Pseudo-class decorator
__7.14.1 Interface
__7.14.2 Abstract Decorator
_7.15 Pros and Cons
_7.16 Flyweight Pattern
__7.16.1 Usage
__7.16.2 Data Sharing
__7.16.3 Traditional flyweight implementation method
__7.16.4 Converting to Flyweight
__7.16.5 Basic Factory
__7.16.6 Managing External State
__7.16.7 Flyweight Pattern and DOM Objects
__7.16.8 Example: Centralized Event Handling
_7.17 Behavior Patterns
_7.18 Observer Pattern
__7.18.1 Differences between the Observer Pattern and the Publish/Subscribe Pattern
__7.18.2 Advantages
__7.18.3 Disadvantages
__7.18.4 Implementing the Publish/Subscribe Pattern
_7.19 Mediator Pattern
__7.19.1 Implementing a Simple Arbitrator
__7.19.2 Similarities and Differences
__7.19.3 Using the Event Set Pattern
__7.19.4 Utilizing the Mediator Pattern
__7.19.5 Combining the Event Aggregation Pattern (Publish/Subscribe) and the Mediator Pattern
__7.19.6 Mediator Pattern and Middleware in Modern JavaScript
__7.19.7 Mediator Pattern vs. Facade Pattern
_7.20 Command Pattern
_7.21 In closing

CHAPTER 08 JavaScript MV* Patterns

_8.1 MVC pattern
__8.1.1 Smalltalk-80's MVC Pattern
_8.2 MVC in JavaScript
__8.2.1 model
__8.2.2 Views
__8.2.3 Template
__8.2.4 Controller
_8.3 Why use MVC?
_8.4 MVC in JavaScript and Smalltalk-80
_8.5 MVC Summary
_8.6 MVP Pattern
__8.6.1 Model, View, Presenter
__8.6.2 MVP vs. MVC
_8.7 MVVM Pattern
__8.7.1 History
__8.7.2 model
__8.7.3 Views
__8.7.4 View Model
__8.7.5 Review of Views and ViewModels
__8.7.6 ViewModel vs. Model
_8.8 Pros and Cons
__8.8.1 Advantages
__8.8.2 Disadvantages
_8.9 MVC vs MVP vs MVVM
_8.10 Latest MV* Patterns
__8.10.1 MV* Patterns and React
_8.11 In closing

CHAPTER 09 Asynchronous Programming Patterns

_9.1 Asynchronous Programming
_9.2 Background
_9.3 Promise Pattern
__9.3.1 Promise Chaining
__9.3.2 Promise Error Handling
__9.3.3 Promise Parallelism
__9.3.4 Promise Sequential Execution
__9.3.5 Promise Memoization
__9.3.6 Promise Pipeline
__9.3.7 Promise Retry
__9.3.8 Promise Decorator
__9.3.9 Promise Competition
_9.4 async/await pattern
__9.4.1 Asynchronous Function Composition
__9.4.2 Asynchronous Iteration
__9.4.3 Asynchronous Error Handling
__9.4.4 Asynchronous Parallel
__9.4.5 Asynchronous Sequential Execution
__9.4.6 Asynchronous memoization
__9.4.7 Asynchronous Event Handling
__9.4.8 async/await pipeline
__9.4.9 Asynchronous Retry
__9.4.10 async/await decorator
_9.5 More practical examples
__9.5.1 Sending an HTTP request
__9.5.2 Reading files from the file system
__9.5.3 Writing a file to the file system
__9.5.4 Running multiple asynchronous functions at once
__9.5.5 Executing multiple asynchronous functions sequentially
__9.5.6 Caching the results of a function
__9.5.7 Handling events with async/await
__9.5.8 Automatically retrying asynchronous function failures
__9.5.9 Writing an async/await decorator
_9.6 In conclusion

CHAPTER 10 Modular JavaScript Design Patterns

_10.1 Notes on Script Loaders
_10.2 AMD
__10.2.1 Getting to know the module
__10.2.2 AMD Modules and jQuery
__10.2.3 Conclusion on AMD
_10.3 CommonJS
__10.3.1 Getting Started with CommonJS
__10.3.2 Using multiple dependencies simultaneously
__10.3.3 CommonJS in a Node.js Environment
__10.3.4 Is CommonJS suitable for browser environments?
__10.3.5 CommonJS Related References
_10.4 AMD vs CommonJS: Different Dreams
__10.4.1 UMD: AMD and CommonJS compatible modules for plugins
_10.5 In conclusion

CHAPTER 11 NAMESPACE PATTERNS

_11.1 Namespace Basics
_11.2 Single Global Variable Pattern
_11.3 Prefix Namespace Patterns
_11.4 Object Literal Notation Patterns
_11.5 Nested Namespace Pattern
_11.6 Immediately Invoked Function Expression Patterns
_11.7 Namespace Injection Pattern
_11.8 Advanced Namespace Patterns
__11.8.1 Nested Namespace Automation Pattern
__11.8.2 Dependency Declaration Pattern
__11.8.3 Deep Object Extension Pattern
_11.9 Recommended Patterns
_11.10 In closing

CHAPTER 12 React Design Patterns

_12.1 Introduction to React
__12.1.1 Introduction to React Terminology
__12.1.2 Basic Concepts of React
_12.2 Higher-order components
__12.2.1 Combining Higher-Order Components
__12.2.2 Advantages
__12.2.3 Disadvantages
_12.3 Rendering Props Pattern
__12.3.1 Raising the status
__12.3.2 Passing a function as a child of a component
__12.3.3 Advantages
__12.3.4 Disadvantages
_12.4 React Hooks Pattern
__12.4.1 Class Components
__12.4.2 The need for structural changes
__12.4.3 Increased complexity
__12.4.4 Hooks
_12.5 Status Hook
__12.5.1 Effect Hook
__12.5.2 Custom Hook
__12.5.3 Additional Hook Information
__12.5.4 Pros and Cons of Hooks
__12.5.5 Hooks vs. Classes
_12.6 Static Imports
_12.7 Dynamic Import
__12.7.1 Loadable Components
__12.7.2 Importing on Interaction
__12.7.3 Get the moment visible on the screen
_12.8 Code Splitting
__12.8.1 Path-based segmentation
__12.8.2 Bundle Splitting
_12.9 PRPL Pattern
_12.10 Loading Priority
__12.10.1 SPA Preload
__12.10.2 Preload + async technique
__12.10.3 Preload in Chrome 95+
_12.11 List Virtualization
__12.11.1 How Windowing/Virtualization Works
__12.11.2 List component
__12.11.3 Grid component
__12.11.4 Evolution of the Web Platform
_12.12 Conclusion
_12.13 In closing

CHAPTER 13 Rendering Patterns

_13.1 The Importance of Rendering Patterns
_13.2 Client-Side Rendering (CSR)
_13.3 Server-Side Rendering (SSR)
_13.4 Static Rendering
__13.4.1 Incremental static generation (ISR)
__13.4.2 On-demand ISR
__13.4.3 Static Rendering Summary
_13.5 Streaming SSR
_13.6 Edge SSR
_13.7 Hybrid Rendering
_13.8 Progressive Hydration
_13.9 Irish Architecture
__13.9.1 Implementing the Island Architecture
__13.9.2 Advantages and Disadvantages of Island Architecture
_13.10 React Server Components
__13.10.1 Hybrid Rendering with RSC and Next.js App Router
_13.11 In closing

CHAPTER 14 React Application Structure

_14.1 Introduction
__14.1.1 Grouping by module, function, or path
__14.1.2 Grouping by file type
__14.1.3 Domain and Common Component-Based Mixed Grouping
_14.2 Application Structure for Modern React Features
__14.2.1 Redux
__14.2.2 Container
__14.2.3 Hooks
__14.2.4 Styled Components
_14.3 Other Best Practices
_14.4 Application Structure for Next.js Applications
_14.5 In conclusion

CHAPTER 15 CONCLUSION

Applying the latest design patterns to JavaScript and React!

Learn systematically from basic to advanced topics, including performance and rendering patterns!

Design patterns provide common patterns for organizing code, making it easier to understand and communicating with other developers.
This book applies these design patterns to JavaScript and React, enabling more structured and efficient web development.
Moreover, it goes beyond just covering design patterns, and also covers topics essential for developing good web applications, such as code organization, performance, and rendering, along with several best practices for applying the patterns.
So, by the end of this book, you'll have a deep understanding of design patterns and the ability to apply them to your JavaScript code and React applications.
The path to efficient web development is right here.

Main contents

● Architectural patterns for structuring components and applications
● Over 20 JavaScript and React design patterns for developers of all levels
● Classification of various design patterns such as creation, structure, and behavior patterns
● Essential patterns that affect performance, such as dynamic import and code splitting
● Rendering patterns such as server-side rendering, hydration, and island architecture