Design patterns are proven, reusable solutions to commonly occurring problems in software design. This post introduces the concept of design patterns and covers key examples from the three main categories: creational patterns (how objects are created), structural patterns (how objects are composed), and behavioral patterns (how objects communicate).
What's a design pattern?
- A general repeatable solution to a commonly occurring problem in software
- Not tied to a specific problem. They're very general and can be applied to a broad spectrum of problems.
Controlled Components
Controlled components are a design pattern for forms. In some situations, you may end up creating an input with special interactivity attached to it. You may want to reuse the input for other forms.
- A component that outputs an input for a form. (ie. Text box, checkbox, radio button, etc.)
- Doesn't have its own state.
- Relies on the parent component for data.
- Emits an event when the user attempts to change the input.
Separation of Concerns
It's a design pattern for deciding how we should architect an application. Let's say we need to switch the UI framework. At this moment we use Bootstrap. What if we wanted to switch to tailwind, completely rewriting an application and can take up a lot of time?
One question you should ask yourself is how much code can you reuse if your code can be dropped in any project, you have highly reusable code regardless of the framework. The question is how do we achieve reusable code separation of concerns as a principle for deciding how code should be split?
If we think about it, there are two types of logic in an application. There's UI and business logic. In this instance, UI logic refers to the code inside the template block of a component. For example, v-for, v-if, v-bind directives are examples of UI logic. Business logic refers to the code that handles the data in your application. By categorizing our code will be able to separate them. This is the idea of separation of concerns. It's a principle for splitting logic. Code for handling UI should be separated from code for handling business logic. By dividing our code, we'll be able to change one without affecting the other.
The Teleport Component
Teleporting is a design pattern for moving an element from one location to another while still keeping the hierarchy of components intact. Teleporting was introduced to make it easier to structure a project without using export or emitting events through multiple components.
A teleport will take an element from one location and move it elsewhere.
Frequently Asked Questions
What are software design patterns?
Design patterns are general, reusable solutions to common problems in software design that represent best practices evolved over time by experienced developers; they are templates or blueprints, not finished code that can be directly applied.
What is the Singleton design pattern?
The Singleton pattern ensures that a class has only one instance throughout the application's lifecycle and provides a global access point to that instance, useful for shared resources like configuration managers or logging services.