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.
Author(s): Addy Osmani
Edition: 2
Publisher: O'Reilly Media, Inc.
Year: 2023
Language: English
Pages: 296
City: Sebastopol, CA
Tags: Javascript; React; Software Design Patterns
Learning JavaScript Design Patterns
Preface
Target Audience
Credits
Reading
Conventions Used in This Book
Using Code Examples
Safari® Books Online
How to Contact Us
Acknowledgments
1. Introduction
2. What Is a Pattern?
We Already Use Patterns Every Day
3. âPatternâ-ity Testing, Proto-Patterns, and the Rule of Three
4. The Structure of a Design Pattern
5. Writing Design Patterns
6. Anti-Patterns
7. Categories of Design Patterns
Creational Design Patterns
Structural Design Patterns
Behavioral Design Patterns
8. Design Pattern Categorization
A Brief Note on Classes
9. JavaScript Design 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
Toolkit and framework-specific module pattern implementations
Dojo
ExtJS
YUI
jQuery
Advantages
Disadvantages
The Revealing Module Pattern
Advantages
Disadvantages
The Singleton Pattern
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
The Mediator Pattern
Basic Implementation
Advanced Implementation
Example
Advantages and Disadvantages
Mediator Versus Observer
Mediator Versus Facade
The Prototype Pattern
The Command Pattern
The Facade Pattern
Notes on Abstraction
The Factory Pattern
When to Use the Factory Pattern
When Not to Use the Factory Pattern
Abstract Factories
The Mixin Pattern
Subclassing
Mixins
Advantages and Disadvantages
The Decorator Pattern
Pseudoclassical Decorators
Interfaces
Abstract Decorators
Decorators with jQuery
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
10. JavaScript MV* Patterns
MVC
Smalltalk-80 MVC
MVC for JavaScript Developers
Models
Views
Templating
Controllers
Controllers in Another Library (Spine.js) Versus Backbone.js
Spine.js
Backbone.js
What Does MVC Give Us?
Smalltalk-80 MVC in JavaScript
Delving Deeper
Summary
MVP
Models, Views, and Presenters
MVP or MVC?
MVC, MVP, and Backbone.js
MVVM
History
Model
View
ViewModel
Recap: The View and the ViewModel
Recap: The ViewModel and the Model
Pros and Cons
Advantages
Disadvantages
MVVM with Looser Data Bindings
MVC Versus MVP Versus MVVM
Backbone.js Versus KnockoutJS
11. Modern 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 AMD is a better choice for writing modular JavaScript
Related reading
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
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
Further reading
ES Harmony
Modules with Imports and Exports
Modules Loaded from Remote Sources
Module Loader API
CommonJS-like Modules for the Server
Classes with Constructors, Getters, and Setters
ES Harmony Conclusions
Related Reading
Conclusions
12. Design Patterns in jQuery
The Composite Pattern
The Adapter Pattern
The Facade Pattern
The Observer Pattern
The Iterator Pattern
Lazy Initialization
The Proxy Pattern
The Builder Pattern
13. jQuery Plug-in Design Patterns
Patterns
A Lightweight Start Pattern
Further Reading
Complete Widget Factory Pattern
Further Reading
Nested Namespacing Plug-in Pattern
Further Reading
Custom Events Plug-in Pattern (with the Widget Factory)
Further Reading
Prototypal Inheritance with the DOM-to-Object Bridge Pattern
Further Reading
jQuery UI Widget Factory Bridge Pattern
Further Reading
jQuery Mobile Widgets with the Widget Factory
RequireJS and the jQuery UI Widget Factory
Usage
Further Reading
Globally and Per-Call Overridable Options (Best Options Pattern)
Further Reading
A Highly Configurable and Mutable Plug-in Pattern
Further Reading
What Makes a Good Plug-in Beyond Patterns?
Quality
Code Style
Compatibility
Reliability
Performance
Documentation
Likelihood of maintenance
Conclusions
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
14. Conclusions
A. References
Index
About the Author
Colophon
Copyright
