From the Preface

The world of JavaScript has come a long way since I wrote the first edition of Learning JavaScript Design Patterns over 10 years ago. At that time, I was working on large-scale web applications and found that the lack of structure and organization in JavaScript code made it difficult to maintain and scale those applications.

Fast forward to today, and the web development landscape has changed dramatically. JavaScript has become one of the most popular programming languages in the world and is used for everything from simple scripts to complex web applications. The JavaScript language has evolved to include modules, promises, and async/await, which has heavily influenced how we architect applications. The way developers write components, such as with React, has also significantly impacted how they think about maintainability. This has resulted in the need for modern patterns that take these new changes into account.

With the rise of modern libraries and frameworks like React, Vue, and Angular, developers are now building applications that are more complex than ever before. I recognized the need for an updated version of Learning JavaScript Design Patterns to reflect the changes in JavaScript and web application development.

In this second edition of Learning JavaScript Design Patterns, I aim to help developers apply modern design patterns to their JavaScript code and React applications. The book covers more than 20 design patterns essential for building maintainable and scalable applications. The book is not just about design patterns but also about rendering and performance patterns, which are critical to the success of modern web applications.

The first edition of this book focused on classical design patterns, such as the Module pattern, the Observer pattern, and the Mediator pattern. These patterns are still important and relevant today, but the web development world has evolved significantly in the past decade, and new patterns have emerged. This new edition covers these new patterns, such as promises, async/await, and the newer variations of the Module pattern. We also cover architectural patterns such as MVC, MVP, and MVVM and discuss where modern frameworks fit with these architectural patterns.

Today’s developers are exposed to many library-specific or framework-specific design patterns. React’s matured ecosystem and utilization of newer JS primitives provide an excellent launchpad to talk about best practices and patterns in the framework or library context. In addition to classic design patterns, this book covers modern React patterns, such as Hooks, Higher-Order Components, and Render Props. These patterns are specific to React and essential for building modern web applications using this popular framework.

This book is not just about patterns; it’s also about best practices. We cover topics such as code organization, performance, and rendering, which are crucial for building high-quality web applications. You will learn about dynamic imports, code-splitting, server-side rendering, hydration, and Islands architecture, all of which are essential for building fast and responsive web applications.

By the end of this book, you will have a deep understanding of design patterns and how to apply them to your JavaScript code and React applications. You will also know which patterns are relevant to the modern web and which are not. This book is not just a reference for patterns; it’s also a guide to building high-quality web applications. You will learn how to structure your code for maximum maintainability and scalability and how to optimize your code for performance.

Code samples

Try a Quiz

• Design Patterns Quiz
• React Quiz
• Rendering Patterns Quiz
• Performance Quiz

Chapter 5: Modules and Classes

• Modules: Dog Gallery (source)
• Modules: Dog Gallery (Favorites via Dynamic Import) (source)
• Modules: Bakery (source)
• Dynamic Import (source)
• Dynamic Import: Lodash (source)
• Dynamic Import: Visibility (source)
• Classes: Bakery App (source)
• Classes: Cookies (source)
• Classes: Cookies with Private Members (source)

Chapter 7: Design Patterns

• Builder Pattern (source)
• Adapter Pattern (source)
• Composite Pattern (source)
• Bridge Pattern (source)
• Object Properties (source)
• Object.create (source)
• Basic Constructor (source)
• Prototype Constructor (source)
• Object Literals (source)
• JavaScript Modules: Test Module (source)
• Namespace (source)
• Namespace: Basket (source)
• Namespace: Basket 2 (source)
• Import Mixins (source)
• Module: WeakMap (source)
• Module: WeakMap 2 (source)
• Module: WeakMap 3 (source)
• Module: React (source)
• Revealing Module Pattern (source)
• Singleton Pattern (source)
• Singleton Pattern: Options (source)
• Prototype (source)
• Prototype Inheritance (source)
• Prototype Extend (source)
• Factory Pattern (source)
• Factory Pattern: Trucks 1 (source)
• Factory Pattern: Trucks 2 (source)
• Factory Pattern: Abstract (source)
• Facade Pattern (source)
• Facade Module (source)
• Mixins: Subclassing (source)
• Mixins: Superclassing (source)
• Mixins: Constructor Augmenting (source)
• Decorators (source)
• Decorators: Multiple (source)
• Decorators: Interface (source)
• Decorators: Abstract (source)
• Decorators: Interface 2 (source)
• Decorators: Interface 3 (source)
• Flyweight (source)
• Flyweight 2 (source)
• Flyweight: Book Factory ( GitHub)
• Flyweight: Extrinsic States (source)
• Flyweight: Event Handling (source)
• Observer (source)
• Observer: Gmail (source)
• Observer: PubSub (source)
• Observer: PubSub 2 (source)
• Observer: Stock App (source)
• Observer: jQuery PubSub (source)
• Observer: jQuery Ajax (source)
• Observer: RxJS (source)
• Mediator (source)
• Mediator: EventEmitter (source)
• Mediator: Event Aggregator (source)
• Command Pattern (source)
• Strategy Pattern (source)
• Proxy Pattern (source)

Chapter 8: MV* Patterns

• MVC (source)
• MVC: Lodash (source)
• MVP (source)
• MVVM (source)
• MVC: React (source)
• MVC: Vue (source)

Chapter 9: Async Patterns

• Async Patterns: Fetch (source)
• Async: Promise Chaining (source)
• Async: Error Handling (source)
• Async: Promise Parallelism (source)
• Async: Promise Sequential Execution (source)
• Async: Promise Memoization (source)
• Async: Promise Pipeline (source)
• Async: Promise Retry (source)
• Async: Promise Decorator (source)
• Async: Promise Racing (source)
• Async: Function Composition (source)
• Async: Iteration (source)
• Async: Read/Write Files (source)
• Async: Retry (source)

Chapter 10: Modular Patterns

• RequireJS (source)
• RequireJS: Plugins (source)
• RequireJS: jQuery (source)
• UMD (source)

Chapter 11: Namespacing Patterns

• Namespacing: Global (source)
• Namespacing: Prefix (source)
• Namespacing: Object Literal Notation (source)
• Namespacing: Object Literal Notation (Nuanced) (source)
• Namespacing: Object Literal Notation (Theming) (source)
• Namespacing: IIFE (source)
• Namespacing: Nested (Automated) (source)
• Namespacing: Deep Object Extension (source)
• Namespacing: Nested (React) (source)

Chapter 12: React Patterns

• React: Loading Patterns
• Load More Pattern (Demo)
• Virtual List Pattern (Demo)
• React: Provider Pattern (source)
• React: Compound Component Pattern (source)
• React: State Reducer Pattern (source)
• React: Conditional Rendering Pattern (source)
• React: Observers + Facade + Mixins (source)
• React: Higher-Order Components (source)
• React: HOC Composition (source)
• React: Stateless Functional Components (Next.js)
• React: State Reducer Pattern (Next.js)
• React: Compound Components Pattern (Next.js)
• React: Render Props (source)
• React: Render Props 2 (source)
• React: Lifting State (source)
• React: Lifting State (Children as Function) (source)
• React: Hooks (source)
• React: useState (source)
• React: useEffect (source)
• React: Custom Hooks (source)
• React: Suspense + SWR + Skeleton UI
• React: Mediator Pattern (source)
• React: Tweets (Stateful) (source)
• React: Tweets (Hooks) (source)
• Next.js: Data-fetching (Context, SWR, React Query, Redux, useState)
• Next.js: Data-fetching (getStaticProps)
• Next.js: Data-fetching (getServerSideProps)
• Next.js: Client-side fetch

Chapter 13: Next.js Rendering Patterns

• Next.js: Client-Side Rendering (source)
• Next.js: Server-Side Rendering (source)
• Next.js: Incremental Static Regeneration (source)
• Next.js: Static Site Generation (source)

Community implementations

• Modern vanilla TodoMVC
• Movies: React Server Components + Next.js App Router (source)
• Hacker News: React Server Components + Next.js App Router (source)
• Commerce: React Server Components + Next.js App Router (source)
• AirBnB: React Server Components + Next.js App Router (source)
• Next.js App Directory

Continue learning

• Patterns.dev has more free interactive content on this topic.