Learning JavaScript Design Patterns
Published on 28. April 2023
298 pages
978-1-0981-3983-4 (ISBN)
Description
Do you want to write beautiful, structured, and maintainable JavaScript 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 JavaScript Design Patterns is the ideal place to start.
Author Addy Osmani shows you how to apply modern design patterns to JavaScript and React?including 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 architectural patterns like MVC, MVP, and MVVM are useful from the perspective of a modern web application developer.
This book explores:
- Architectural patterns for structuring your components and apps
- More than 20 design patterns in JavaScript and React, applicable for developers at any level
- Different pattern categories including creational, structural, and behavioral
- Essential performance patterns including dynamic imports and code-splitting
- Rendering patterns such as server-side rendering, hydration, Islands architecture, and more
Additionally, you''ll explore modern JavaScript syntax like JavaScript modules, React patterns like Hooks, higher-order components (HOCs), and more, to stay ahead in the ever-evolving world of web development.
More details
Other editions
Additional editions
Book
05/2023
2nd Edition
O'Reilly
€66.00
Available immediately
Content
- Cover
- Copyright
- Table of Contents
- Preface
- Structure of the Book
- Conventions Used in This Book
- Using Code Examples
- O'Reilly Online Learning
- How to Contact Us
- Acknowledgments
- Chapter 1. Introduction to Design Patterns
- History of Design Patterns
- What Is a Pattern?
- An Everyday Use Case for Design Patterns
- Summary
- Chapter 2. "Pattern"-ity Testing, Proto-Patterns, and the Rule of Three
- What Are Proto-Patterns?
- The "Pattern" Tests
- Rule of Three
- Summary
- Chapter 3. Structuring and Writing Patterns
- The Structure of a Design Pattern
- Well-Written Patterns
- Writing a Pattern
- Summary
- Chapter 4. Anti-Patterns
- What Are Anti-Patterns?
- Anti-Patterns in JavaScript
- Summary
- Chapter 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, and Setters
- Classes in JavaScript Frameworks
- Summary
- Related Reading
- Chapter 6. Categories of Design Patterns
- Background
- Creational Design Patterns
- Structural Design Patterns
- Behavioral Design Patterns
- Design Pattern Classes
- Summary
- Chapter 7. JavaScript Design Patterns
- Creational Patterns
- The Constructor Pattern
- Object Creation
- Basic Constructors
- Constructors with Prototypes
- The Module Pattern
- Object Literals
- The Module Pattern
- Module Pattern Variations
- 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
- The Mixin Pattern
- Subclassing
- Mixins
- Advantages and Disadvantages
- The Decorator Pattern
- Pseudoclassical Decorators
- Interfaces
- Abstract Decorators
- Advantages and Disadvantages
- Flyweight
- Using Flyweights
- Flyweights and Sharing Data
- Implementing Classical Flyweights
- 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
- The Mediator Pattern
- A Simple Mediator
- Similarities and Differences
- Event Aggregator Use
- Mediator Use
- Event Aggregator (Pub/Sub) and Mediator Together
- Mediator/Middleware in Modern JavaScript
- Mediator Versus Facade
- The Command Pattern
- Summary
- Chapter 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 of MVC
- MVP
- Models, Views, and Presenters
- MVP or MVC?
- MVVM
- History
- Model
- View
- ViewModel
- Recap: The View and the ViewModel
- ViewModel Versus Model
- Pros and Cons
- Advantages
- Disadvantages
- MVC Versus MVP Versus MVVM
- Modern MV* Patterns
- MV* and React.js
- Summary
- Chapter 9. Asynchronous Programming Patterns
- Asynchronous Programming
- Background
- Promise Patterns
- Promise Chaining
- Promise Error Handling
- Promise Parallelism
- Promise Sequential Execution
- 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 Filesystem
- Writing to a File on the Filesystem
- 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
- Summary
- Chapter 10. Modular JavaScript Design Patterns
- A Note on Script Loaders
- AMD
- Getting Started with Modules
- AMD Modules with jQuery
- AMD Conclusions
- CommonJS
- Getting Started
- Consuming Multiple Dependencies
- CommonJS in Node.js
- 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
- Summary
- Chapter 11. Namespacing Patterns
- Namespacing Fundamentals
- Single Global Variables
- Prefix Namespacing
- Object Literal Notation
- Nested Namespacing
- Immediately Invoked Function Expressions
- Namespace Injection
- Advanced Namespacing Patterns
- Automating Nested Namespacing
- Dependency Declaration Pattern
- Deep Object Extension
- Recommendation
- Summary
- Chapter 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 Versus 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
- Improvements in the Web Platform
- Conclusions
- Summary
- Chapter 13. Rendering Patterns
- Importance of Rendering Patterns
- Client-Side Rendering
- Server-Side Rendering
- Static Rendering
- Incremental Static Regeneration
- On-Demand ISR
- Summary of Static Rendering
- Streaming SSR
- Edge SSR
- Hybrid Rendering
- Progressive Hydration
- Islands Architecture
- Implementing Islands
- Pros and Cons
- React Server Components
- Hybrid Rendering with RSC and the Next.js App Router
- Summary
- Chapter 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
- Chapter 15. Conclusions
- Appendix. References
- Index
- About the Author
- Colophon
