Do you want to write beautiful, structured, and maintainable jаvascript by applying modern design patterns to the language? Do you want clean, efficient, manageable code? Want to stay up-to-date with the latest best practices? If so, the updated second edition of Learning jаvascript Design Patterns is the ideal place to start. Author Addy Osmani shows you how to apply modern design patterns to jаvascript and React. That includes popular design patterns such as modules, mixins, observers, and mediators. You'll learn about performance and rendering patterns, such as server-side rendering and islands architecture. You'll also learn how modern architectural patterns - such as MVC, MVP, and MVVM - are useful from the perspective of a modern web application developer. Other essential topics include modern jаvascript syntax and React patterns such as Hooks, higher order components, and render props.
Author(s): Addy Osmani
Edition: 2
Publisher: O’Reilly Media, Inc.
Year: 2023
Language: English
Pages: 346
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
