Architecture Pattern vs Design Pattern (BPD)

I’m reading the Effective Angular by Roberto Heckers and I found the difference beteween Architecture Patterns and Design Patterns. For this reason, I decided to share some insights on this topic.

I started the series of articles Be a Professional Developer (BPD) by describing principles and patterns. Before we dive deep into others principles and patterns, let’s first understand what an Architecture Pattern is.

 

Architecture Pattern

According to Roberto Heckers:

Architectural patterns focus on how you structure your code and provide rules for abstracting business logic away from specific implementations.

Depending on the project and the technologies we choose, there will be a more suitable option to use.

In Angular, for example, it’s common to use:

  • Model View Controller (MVC)
  • Hexagonal Architecture
  • Layered Architecture

The importance

Architectural patterns are the foundations for building any software. If we choose the wrong one, we may encounter problems such as:

Heckers presented the image below in his book, which represents the speed and time to delivery of software without architecture versus with architecture:

I just put the word “good” because I’ve seen projects that used a bad architecture, and the result was worse than having no architecture at all:

 

How to choose?

Here we can see some options to use (and there are even more😪) :

It’s difficult to choose, isn’t it? So, how to choose?

As my old programming teacher would say:

It depends

It depends of the goals, technologies, team, requirements… However, a common mistake some developers make is trying to reinvent the wheel.

Personally, I follow the philosophy of: the basics that work, although I have a base to the main architecture patterns.

 

Design Pattern

Design Pattern is a “template” for solving issues that frequently arise during software development, providing a well-structured, flexible and maintainable codebase.

As mentioned in the second article of the BPD series, the Design Patterns book alone contains 23 patterns. By understanding these patterns and others, we can offer better solutions for any task.

 

Architecture Patterns vs Design Patterns

Heckers said:

While architectural patterns focus on a high-level overview of how we segment and abstract our code, design patterns focus on how we implement things within our code.

Using a Angular Application as an example with MVC Architecure Pattern, we will have:

Model

  • Services
  • Data models
  • API services

View

  • HTML
  • CSS

Controller

  • Typescript file behind the HTML file

Insides this files, we can we use various design patterns. So, essentially, the architecture pattern represents the “macro” level of any application, while design patterns operate at the “micro” level. For example:

 

Conclusion

Anyone can create a software, but only professionals can provide a better architecture according to the product. Studying principles, patterns and design techniques will help us to be a professional. This kind of study is just as important as learning a new framework, lib e etc.

I hope you enjoyed the article. Bye 🙂

 

Previous Article

#4 – Open/Closed Principle of SOLID (BPD)

Leave a Reply