What is a software design pattern?

In software development, it is common for certain processes and tasks to appear in multiple projects, in one way or another, or with some degree of variation. A design pattern is a proven solution for such similar problems. It does not prescribe code but acts like a reasoning template, an approach that has been abstracted independent of the implementation to be reused and adapted to particular circumstances. In practice, there is plenty of room for creativity to apply a pattern. Entire books have been dedicated to this subject and provide more detail than the scope of this book allows. In the following pages, we will take a look at what I consider to be the most recurrent patterns to keep in mind for Vue 3 applications. Even though we see them in isolation for the purposes of studying them, the reality is that often the implementation overlaps, mixes, and encapsulates multiple patterns in a single piece of code. For example, you can use a singleton to act as a decorator and a proxy to simplify or alter the communication between services in your application (we will do this quite often, actually, and the full code can be seen in Chapter 8, Multithreading with Web Workers).

Design patterns can also be understood as software engineering and development best practices. And the opposite of that, bad practice, is often referred to as an anti-pattern. Anti-patterns are “solutions” that, even though they fix an issue in the short term, create problems and bad consequences along the line. They generate the need to work around the problem and destabilize the whole structure and implementation.

Let’s now view a list of patterns that should be part of your toolbox for Vue 3 projects.