Learning jаvascript Design Patterns: A jаvascript and React Developer’s Guide

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 & 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
			Privacy
			History
			Examples
		Module Pattern Variations
			Import mixins
			Exports
			Advantages
			Disadvantages
		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
		Notes on Abstraction
	The Mixin Pattern
	Subclassing
	Mixins
		Advantages & Disadvantages
	The Decorator Pattern
	Pseudoclassical Decorators
		Interfaces
		Abstract Decorators
	Advantages and Disadvantages
	Flyweight
		Using Flyweights
		Flyweights and Sharing Data
		Implementing Classical Flyweights
			Duck punching “implements”
		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
			A Publish/Subscribe implementation
			Using our implementation
			User-interface notifications
			Decoupling applications using Ben Alman’s Pub/Sub implementation
			Decoupling an Ajax-based jQuery application
			Observer Pattern in the React ecosystem
	The Mediator Pattern
		A Simple Mediator
		Similarities and Differences
			Events
			Third-Party Objects
			Relationships: When to Use Which
		Event Aggregator Use
		Mediator Use
		Event Aggregator (Pub/Sub) and Mediator Together
		Mediator/Middleware in modern JavaScript
		Mediator Vs. 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
	MVP
		Models, Views, and Presenters
		MVP or MVC?
	MVVM
		History
		Model
		View
		ViewModel
		Recap: The View and the ViewModel
		ViewModel Vs. Model
	Pros and Cons
		Advantages
		Disadvantages
	MVC Versus MVP Versus MVVM
	Modern MV* patterns
		MV* and React.js
	Summary
9. Asynchronous Programming Patterns
	Async Programming
	Background
	Promise Patterns
		Promise Chaining
		Promise Error Handling
		Promise Parallelism
		Promise Sequential Execution
		Promise Memoization
		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 File System
		Writing to a File on the File System:
		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
	Conclusion
10. Modular JavaScript Design Patterns
	A Note on Script Loaders
	AMD
		Getting Started with Modules
		AMD Modules with Dojo
		AMD Module Design Patterns (Dojo)
		AMD Modules with jQuery
			Registering jQuery as an Async-compatible module
			Why was AMD a better choice for writing modular JavaScript?
			Related reading for AMD
			Script loaders and frameworks that support AMD
		AMD Conclusions
	CommonJS
		Getting Started
		Consuming Multiple Dependencies
		Loaders and Frameworks that Support CommonJS
		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
			Basic AMD hybrid format
			Using CommonJS, AMD, or browser globals to create a module
			jQuery plug-ins that function in all environments
			Related reading for UMD and AMD
	Conclusion
11. Namespacing Patterns
	Namespacing Fundamentals
	Single Global Variables
	Prefix Namespacing
	Object Literal Notation
	Nested Namespacing
	Immediately Invoked Function Expressions (IIFE)s
	Namespace Injection
	Advanced Namespacing Patterns
		Automating Nested Namespacing
		Dependency Declaration Pattern
		Deep Object Extension
	Recommendation
	Conclusion
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 vs. 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
		Other Examples
		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
	Streaming SSR
	Edge Server-Side Rendering
	Progressive Hydration
	Islands Architecture
		Implementing Islands
		Pros and Cons
	React Server Components
	Conclusion
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
A. References