Learning JavaScript Design Patterns A JavaScript and React Developer’s Guide (Addy Osmani) (Z-Library)

📄 File Format: PDF

💾 File Size: 3.3 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

O sm a ni Lea rning Ja va Scrip t D esig n Pa tterns Lea rning Ja va Scrip t D esig n Pa tterns Addy Osmani Second Edition Learning JavaScript Design Patterns A JavaScript and React Developer's Guide

📄 Page 2

WEB DEVELOPMENT “Addy’s book is a pragmatic approach to fundamental concepts that are useful across myriad uses. JavaScript Design Patterns are intrinsic to developers applying systems thinking to their own work. Any developer reading this book will see incredible returns on the time investment reading it.” —Sarah Drasner Director of Engineering at Google “Addy Osmani strikes again, and he has delivered a much appreciated update to his already classic book on design patterns in JavaScript.” —Stoyan Stefanov WebPageTest.org engineer and author of JavaScript Patterns Learning JavaScript Design Patterns Twitter: @oreillymedia linkedin.com/company/oreilly-media youtube.com/oreillymedia 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— including modules, mixins, observers, and mediators—to JavaScript and React. 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. Addy Osmani is an engineering leader for Google, where he leads the Chrome developer experience teams, helping to keep the web fast and delightful to build upon. US $65.99 CAN $82.99 ISBN: 978-1-098-13987-2 O sm a ni

📄 Page 3

Addy Osmani Learning JavaScript Design Patterns A JavaScript and React Developer’s Guide SECOND EDITION Boston Farnham Sebastopol TokyoBeijing

📄 Page 4

978-1-098-13987-2 [LSI] Learning JavaScript Design Patterns by Addy Osmani Copyright © 2023 Adnan Osmani. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institu‐ tional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Amanda Quinn Indexer: Sue Klefstad Development Editor: Michele Cronin Interior Designer: David Futato Production Editor: Clare Laylock Cover Designer: Karen Montgomery Copyeditor: Stephanie English Illustrator: Kate Dullea Proofreader: Rising Sun Technologies August 2012: First Edition April 2023: Second Edition Revision History for the Second Edition 2023-04-28: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781098139872 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Learning JavaScript Design Patterns, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

📄 Page 5

Table of Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi 1. Introduction to Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 History of Design Patterns 2 What Is a Pattern? 2 An Everyday Use Case for Design Patterns 4 Summary 5 2. “Pattern”-ity Testing, Proto-Patterns, and the Rule of Three. . . . . . . . . . . . . . . . . . . . . . . 7 What Are Proto-Patterns? 7 The “Pattern” Tests 8 Rule of Three 9 Summary 9 3. Structuring and Writing Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 The Structure of a Design Pattern 11 Well-Written Patterns 12 Writing a Pattern 13 Summary 14 4. Anti-Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 What Are Anti-Patterns? 15 Anti-Patterns in JavaScript 16 Summary 17 5. Modern JavaScript Syntax and Features. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 The Importance of Decoupling Applications 19 Modules with Imports and Exports 20 Module Objects 22 iii

📄 Page 6

Modules Loaded from Remote Sources 23 Static Imports 23 Dynamic Imports 23 Import on Interaction 24 Import on Visibility 24 Modules for the Server 24 Advantages of Using Modules 25 Classes with Constructors, Getters, and Setters 26 Classes in JavaScript Frameworks 28 Summary 29 Related Reading 29 6. Categories of Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Background 31 Creational Design Patterns 32 Structural Design Patterns 32 Behavioral Design Patterns 32 Design Pattern Classes 32 Summary 34 7. JavaScript Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Creational Patterns 35 The Constructor Pattern 36 Object Creation 36 Basic Constructors 38 Constructors with Prototypes 39 The Module Pattern 40 Object Literals 40 The Module Pattern 42 Module Pattern Variations 46 Modern Module Pattern with WeakMap 48 Modules with Modern Libraries 50 The Revealing Module Pattern 51 Advantages 53 Disadvantages 53 The Singleton Pattern 53 State Management in React 57 The Prototype Pattern 58 The Factory Pattern 61 When to Use the Factory Pattern 64 When Not to Use the Factory Pattern 64 Abstract Factories 64 Structural Patterns 65 iv | Table of Contents

📄 Page 7

The Facade Pattern 66 The Mixin Pattern 68 Subclassing 68 Mixins 69 Advantages and Disadvantages 72 The Decorator Pattern 73 Pseudoclassical Decorators 76 Interfaces 77 Abstract Decorators 78 Advantages and Disadvantages 81 Flyweight 82 Using Flyweights 83 Flyweights and Sharing Data 83 Implementing Classical Flyweights 83 Converting Code to Use the Flyweight Pattern 86 A Basic Factory 89 Managing the Extrinsic States 89 The Flyweight Pattern and the DOM 91 Example: Centralized Event Handling 91 Behavioral Patterns 93 The Observer Pattern 93 Differences Between the Observer and Publish/Subscribe Pattern 97 Advantages 100 Disadvantages 100 Publish/Subscribe Implementations 100 The Mediator Pattern 110 A Simple Mediator 111 Similarities and Differences 112 Event Aggregator Use 114 Mediator Use 114 Event Aggregator (Pub/Sub) and Mediator Together 115 Mediator/Middleware in Modern JavaScript 116 Mediator Versus Facade 117 The Command Pattern 117 Summary 119 8. JavaScript MV* Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 MVC 121 Smalltalk-80 MVC 122 MVC for JavaScript Developers 122 Models 123 Views 124 Templating 126 Table of Contents | v

📄 Page 8

Controllers 128 What Does MVC Give Us? 128 Smalltalk-80 MVC in JavaScript 128 Summary of MVC 129 MVP 129 Models, Views, and Presenters 130 MVP or MVC? 131 MVVM 132 History 132 Model 133 View 133 ViewModel 134 Recap: The View and the ViewModel 134 ViewModel Versus Model 134 Pros and Cons 135 Advantages 135 Disadvantages 135 MVC Versus MVP Versus MVVM 135 Modern MV* Patterns 136 MV* and React.js 136 Summary 137 9. Asynchronous Programming Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Asynchronous Programming 139 Background 141 Promise Patterns 142 Promise Chaining 143 Promise Error Handling 144 Promise Parallelism 144 Promise Sequential Execution 144 Promise Memoization 144 Promise Pipeline 145 Promise Retry 146 Promise Decorator 146 Promise Race 147 async/await Patterns 147 async Function Composition 147 async Iteration 148 async Error Handling 148 async Parallelism 148 async Sequential Execution 149 async Memoization 149 async Event Handling 149 vi | Table of Contents

📄 Page 9

async/await Pipeline 150 async Retry 150 async/await Decorator 150 Additional Practical Examples 151 Making an HTTP Request 151 Reading a File from the Filesystem 151 Writing to a File on the Filesystem 151 Executing Multiple async Operations 152 Executing Multiple async Operations in Sequence 152 Caching the Result of an async Operation 152 Handling Events with async/await 153 Retrying an async Operation on Failure 153 Creating an async/await Decorator 153 Summary 154 10. Modular JavaScript Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 A Note on Script Loaders 155 AMD 156 Getting Started with Modules 156 AMD Modules with jQuery 160 AMD Conclusions 163 CommonJS 163 Getting Started 164 Consuming Multiple Dependencies 165 CommonJS in Node.js 166 Is CommonJS Suitable for the Browser? 166 Related Reading for CommonJS 167 AMD and CommonJS: Competing, but Equally Valid Standards 167 UMD: AMD and CommonJS-Compatible Modules for Plug-ins 168 Summary 173 11. Namespacing Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Namespacing Fundamentals 175 Single Global Variables 176 Prefix Namespacing 176 Object Literal Notation 177 Nested Namespacing 180 Immediately Invoked Function Expressions 181 Namespace Injection 184 Advanced Namespacing Patterns 186 Automating Nested Namespacing 186 Dependency Declaration Pattern 188 Deep Object Extension 189 Table of Contents | vii

📄 Page 10

Recommendation 191 Summary 192 12. React.js Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 An Introduction to React 193 Terminology Used 194 Basic Concepts 194 Higher-Order Components 196 Composing 199 Pros 199 Cons 200 Render Props Pattern 200 Lifting State 202 Children as a Function 204 Pros 205 Cons 205 Hooks Pattern 205 Class Components 206 Restructuring 207 Complexity 208 Hooks 208 State Hook 208 Effect Hook 210 Custom Hooks 211 Additional Hooks Guidance 213 Pros and Cons of Using Hooks 213 React Hooks Versus Classes 216 Static Import 216 Dynamic Import 217 Loadable Components 219 Import on Interaction 220 Import on Visibility 220 Code-Splitting 221 Route-based Splitting 221 Bundle Splitting 222 PRPL Pattern 224 Loading Prioritization 226 Preload in Single-Page Apps 227 Preload + the async Hack 228 Preload in Chrome 95+ 228 List Virtualization 228 How Does Windowing/Virtualization Work? 228 Lists 229 viii | Table of Contents

📄 Page 11

Grid 230 Improvements in the Web Platform 232 Conclusions 232 Summary 232 13. Rendering Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Importance of Rendering Patterns 234 Client-Side Rendering 236 Server-Side Rendering 236 Static Rendering 237 Incremental Static Regeneration 238 On-Demand ISR 239 Summary of Static Rendering 239 Streaming SSR 240 Edge SSR 241 Hybrid Rendering 241 Progressive Hydration 242 Islands Architecture 243 Implementing Islands 243 Pros and Cons 244 React Server Components 245 Hybrid Rendering with RSC and the Next.js App Router 246 Summary 246 14. Application Structure for React.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Introduction 249 Group by Module, Feature, or Route 250 Group by File Type 250 Hybrid Grouping Based on Domain and Common Components 251 Application Structure for Modern React Features 252 Redux 253 Containers 253 Hooks 253 Styled Components 254 Other Best Practices 254 Application Structure for Next.js Apps 256 Summary 257 15. Conclusions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Appendix: References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Table of Contents | ix

📄 Page 12

(This page has no text content)

📄 Page 13

Preface The world of JavaScript has come a long way since I wrote the first edition of Learn‐ ing 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 Java‐ Script language has evolved to include modules, promises, and async/await, which has heavily influenced how we architect applications. The way developers write com‐ ponents, 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 ren‐ dering 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 signifi‐ cantly 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 xi

📄 Page 14

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 frame‐ work 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 build‐ ing 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 applica‐ tions. You will learn how to structure your code for maximum maintainability and scalability and how to optimize your code for performance. Structure of the Book This book is organized into 15 chapters, designed to walk you through JavaScript design patterns from a modern perspective, incorporating updated language features and React-specific patterns. Each chapter builds upon the previous one, enabling you to grow your knowledge incrementally and apply it effectively: • Chapter 1, “Introduction to Design Patterns”: Get acquainted with the history of design patterns and their significance in the programming world. • Chapter 2, ““Pattern”-ity Testing, Proto-Patterns, and the Rule of Three”: Under‐ stand the process of evaluating and refining design patterns. • Chapter 3, “Structuring and Writing Patterns”: Learn the anatomy of a well- written pattern and how to create one. • Chapter 4, “Anti-Patterns”: Discover what anti-patterns are and how to avoid them in your code. • Chapter 5, “Modern JavaScript Syntax and Features”: Explore the latest Java‐ Script language features and their impact on design patterns. xii | Preface

📄 Page 15

• Chapter 6, “Categories of Design Patterns”: Delve into the different categories of design patterns: creational, structural, and behavioral. • Chapter 7, “JavaScript Design Patterns”: Study over 20 classic design patterns in JavaScript and their modern adaptations. • Chapter 8, “JavaScript MV* Patterns”: Learn about architectural patterns like MVC, MVP, and MVVM and their significance in modern web development. • Chapter 9, “Asynchronous Programming Patterns”: Understand the power of asynchronous programming in JavaScript and various patterns for handling it. • Chapter 10, “Modular JavaScript Design Patterns”: Discover patterns for organ‐ izing and modularizing your JavaScript code. • Chapter 11, “Namespacing Patterns”: Learn various techniques for namespacing your JavaScript code to avoid global namespace pollution. • Chapter 12, “React.js Design Patterns”: Explore React-specific patterns, including Higher-Order Components, Render Props, and Hooks. • Chapter 13, “Rendering Patterns”: Understand different rendering techniques like client-side rendering, server-side rendering, progressive hydration, and Islands architecture. • Chapter 14, “Application Structure for React.js”: Learn how to structure your React application for better organization, maintainability, and scalability. • Chapter 15, “Conclusions”: Wrap up the book with key takeaways and final thoughts. Throughout the book, practical examples are provided to illustrate the patterns and concepts discussed. By the end of your journey, you’ll have a solid understanding of JavaScript design patterns and be equipped to write elegant, maintainable, and scal‐ able code. Whether you’re a seasoned web developer or just starting out, this book will provide the knowledge and tools you need to build modern, maintainable, and scalable web applications. I hope that this book will be a valuable resource for you as you continue to develop your skills and build amazing web applications. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Preface | xiii

📄 Page 16

Constant width Used for program listings, as well as within paragraphs to refer to program ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a tip or suggestion. This element signifies a general note. Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/addyosmani/learning-jsdp. If you have a technical question or a problem using the code examples, please send email to bookquestions@oreilly.com. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission. We appreciate, but generally do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Learning JavaScript Design Patterns, 2nd ed., by Addy Osmani (O’Reilly). Copyright 2023 Adnan Osmani, 978-1-098-13987-2.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com. xiv | Preface

📄 Page 17

O’Reilly Online Learning For more than 40 years, O’Reilly Media has provided technol‐ ogy and business training, knowledge, and insight to help companies succeed. Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit https://oreilly.com. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at https://oreil.ly/js_design_patterns_2e. Email bookquestions@oreilly.com to comment or ask technical questions about this book. For news and information about our books and courses, visit https://oreilly.com. Find us on LinkedIn: https://linkedin.com/company/oreilly-media Follow us on Twitter: https://twitter.com/oreillymedia Watch us on YouTube: https://youtube.com/oreillymedia Acknowledgments I would like to thank the amazing reviewers for the second edition, including Stoyan Stefanov, Julian Setiawan, Viswesh Ravi Shrimali, Adam Scott, and Lydia Hallie. The first edition’s passionate, talented technical reviewers included Nicholas Zakas, Andrée Hansson, Luke Smith, Eric Ferraiuolo, Peter Michaux, and Alex Sexton. They—as well as members of the community at large—helped review and improve Preface | xv

📄 Page 18

this book, and the knowledge and enthusiasm they brought to the project was simply amazing. A special thanks to Leena Sohoni-Kasture for her contributions and feedback to the editing of the second edition. Finally, I would like to thank my wonderful wife, Elle, for all of her support while I was putting together this publication. xvi | Preface

📄 Page 19

CHAPTER 1 Introduction to Design Patterns Good code is like a love letter to the next developer who will maintain it! Design patterns provide a common vocabulary to structure code, making it easier to understand. They help enhance the quality of this connection to other developers. Knowledge of design patterns helps us identify recurring themes in requirements and map them to definitive solutions. We can rely on the experience of others who have encountered a similar problem and devised an optimized method to address it. This knowledge is invaluable as it paves the way for writing or refactoring code to make it maintainable. Whether on the server or client, JavaScript is a cornerstone of modern web applica‐ tion development. The previous edition of this book focused on several popular design patterns in the JavaScript context. Over the years, JavaScript has significantly evolved as a language in terms of features and syntax. It now supports modules, classes, arrow functions, and template literals that it did not previously. We also have advanced JavaScript libraries and frameworks that have made life easy for many web developers. How relevant, then, are design patterns in the modern JavaScript context? It’s important to note that traditionally, design patterns are neither prescriptive nor language-specific. You can apply them when you think they fit, but you don’t have to. Like data structures or algorithms, you can still apply classic design patterns using modern programming languages, including JavaScript. You may not need some of these design patterns in modern frameworks or libraries where they are already abstracted. Conversely, the use of specific patterns may even be encouraged by some frameworks. In this edition, we are taking a pragmatic approach to patterns. We will explore why specific patterns may be the right fit for implementing certain features and if a pat‐ tern is still recommended in the modern JavaScript context. 1

📄 Page 20

As applications got more interactive, requiring a large amount of JavaScript, the lan‐ guage came under constant criticism for its negative impact on performance. Devel‐ opers are continuously looking for new patterns that can optimize JavaScript performance. This edition highlights such improvements wherever relevant. We will also discuss framework-specific patterns such as React Hooks and Higher-Order Components that have become increasingly popular in the age of React.js. Going back a step, let us start by exploring the history and importance of design pat‐ terns. If you’re already familiar with this history, feel free to skip to “What Is a Pat‐ tern?” on page 2 to continue reading. History of Design Patterns Design patterns can be traced back to the early work of an architect named Christo‐ pher Alexander. He often wrote about his experiences in solving design issues and how they related to buildings and towns. One day, it occurred to Alexander that cer‐ tain design constructs lead to a desired optimal effect when used repeatedly. Alexander produced a pattern language in collaboration with two other architects, Sara Ishikawa and Murray Silverstein. This language would help empower anyone wishing to design and build at any scale. They published it in 1977 in a paper titled “A Pattern Language,” later released as a complete hardcover book. Around 1990, software engineers began to incorporate the principles Alexander had written about into the first documentation about design patterns to guide novice developers looking to improve their coding skills. It’s important to note that the con‐ cepts behind design patterns have been around in the programming industry since its inception, albeit in a less formalized form. One of the first and arguably the most iconic formal works published on design pat‐ terns in software engineering was a book in 1995 called Design Patterns: Elements of Reusable Object-Oriented Software—written by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. Most engineers today recognize this group as the Gang of Four (GoF). The GoF publication was particularly instrumental in pushing the concept of design patterns further in our field. It describes several development techniques and pitfalls and provides 23 core object-oriented design patterns frequently used worldwide today. We will cover these patterns in more detail in Chapter 6, and they also form the basis for our discussion in Chapter 7. What Is a Pattern? A pattern is a reusable solution template that you can apply to recurring problems and themes in software design. Similar to other programming languages, when build‐ 2 | Chapter 1: Introduction to Design Patterns