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

✍ Scribed by Addy Osmani

• Publisher: O’Reilly Media, Inc.
• Year: 2023
• Tongue: English
• Leaves: 346
• Edition: 2
• Category: Library

✦ Synopsis

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.

✦ Table of Contents

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