🐘🏜️🤠

Design Patterns VS Design Principles

O que se diabéisso

Frontend Day 2025 | 2025-09-20 14:29

Quem sou eu?

Francisco Alessandro Feitoza de Patricio da Rocha de Sousa da Silva
um dos maiores nomes desse evento

Alessandro Feitoza

  • Fortaleza, Ceará
  • Professor de códigos e outras computarias ( ͡° ͜ʖ ͡°)
  • Programador/Dev/Severino
  • PHP com Rapadura | PHPeste
  • TechLead/Dev BússolaSocial

Agenda

  • Por que isso é importante?
  • Definições
  • Outras Definições
  • Mais Definições
  • e Exemplos Práticos

⚠️ Essa talk não é um mandamento

  • É uma coletânea de devaneios que tenho baseados na academia, literatura, e conhecimento das ruas
  • Só quero que você abra sua mente, seja mais crítico nas pequenas decisões (ou entenda porque elas foram tomadas)
  • Aproveite o que achar bom e descarte o restante

Jornada do Frontend

Figma / Layout HTML / CSS / JS Consumo de API Performance & Estado

Transformar layout em código

  • HTML, CSS, responsividade
  • Acessibilidade e usabilidade
  • Pixel-perfect

Consumir APIs e
lidar com a lógica

  • Integração com backend
  • Gerenciamento de estado
  • Performance (debounce, caching, lazy loading)
  • Escalabilidade e manutenção

Quem somos nozes 🌳 ?







1 - Por que essa talk é importante?

Algumas pessoas que fazem código, acham melhor entregar rápido do que entregar bem


.header {
  background-color: #3498db;
  color: #ffffff;
}

.navbar {
  background: #3498db;
  border-bottom: 2px solid #3498db;
}

.button-primary {
  background-color: #3498db;
  color: #fff;
}

.footer {
  background: #3498db;
  color: #ffffff;
}
  

:root {
  --primary-color: #3498db;
  --text-light: #ffffff;
}

.header {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.navbar {
  background: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.button-primary {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.footer {
  background: var(--primary-color);
  color: var(--text-light);
}

Acabamos de aplicar o DRY

Um Design Principle
A gente esquece que não é pedreire,
e sim Engenheire de Software

E que precisamos desenhar o software
Afinal, o que é design? 🖌️ 🎨
É o momento de decidir como os códigos do sistema se organizam, se comunicam e se comportam para alcançar os objetivos desejados.

Design

do Latim, designare

de- (de dentro, para fora)
signare- ( signum, indicar algo, marcar)
"Designar, Determinar"

O processo de planejar e estruturar a solução técnica.

Mas qual é o momento de "planejar e estruturar"?

No "inicio" do projeto

Peguemos este exemplo...


<html>
  <body>
    <h1 style="color: red; text-align:center;">
        Bem-vindo
    </h1>
    <button
        onclick="alert('Olá!')"
        style="background:blue;color:white;"
    >
        Clique aqui
    </button>
  </body>
</html>
  

<html>
  <head>
    
    
  </head>

  <body>
    
Bem-vindo

    <button
        class="btn-primary"
        data-id="btn"
    >
  </body>
</html>

Precisamos voltar alguns passos

2 - DEFINIÇÕES

Engenharia de Software

Como funciona a engenharia de software?

Como seria melhor?

Arquitetura?

Design?

Arquitetura (de soluções) é sobre a comunicação entre as diferentes tecnologias que compõem e auxiliam o Software.

Arquitetura (do código) é sobre a conunicação entre as camadas de códigos, pensando I/O

Design é sobre o "desenho" do fluxo de partes do código com o próprio código

Todo Projeto começa bonito e termina feio

CASCATA










seria o ideal?

Então poderiamos dizer que design de software se divide nisso?

O melhor seria isso











3 - OUTRAS DEFINIÇÕES

Patterns

Soluções "gerais" repetitiveis, para resolverem problemas comuns.

Cristopher Alexander, 1977

Um padrão descreve uma solução comprovada para um problema recorrente no design

Gang of Four, 1994

Cataloga e explica padrões comuns para resolver problemas de software orientado a objetos.

E como ninguém conhece esse livro?

O mesmo livro com outra capa

Sim, é um livro de arquitetura e urbanismo

E tá tudo bem, afinal,

Design de Software é uma parte da Engenharia de Software

Design Patterns

Exemplos conhecidos

  • Composite
  • Observer
  • Builder

Principles

Representam guidelines de alto nível ou boas práticas para considerar ao projetar a arquitetura do software.

Principles

do Latim, Principium

Começo/Inicio (Fundamento, Base)

Um conjunto de regras, diretrizes e considerações de design que formam a base de qualquer produto.

Design Principles

Exemplos Fundamentais

  • SOLID
  • DRY
  • SoC

Porque comparar os 2? Se são diferentes dos iguais










APLICABILIDADE

CONCEITO


Principles Guias para tomar decisões de design.
Patterns Soluções prontas para problemas recorrentes.

Abordagem


Principles Filosofia e comportamento do código.
Patterns Implementação Prática.

Flexibilidade


Principles São aplicáveis em qualquer tipo de código.
Patterns Podem ser usados em contextos especificos.

Há um 🐘 elefante
na Sala

boW2ra Feitoza, quero ver códigos

Temos um problema: Criar um sistema de venda de ingressos

AQUI TEM CORAGEM

Arquitetura baseada em camadas é um nome melhor pra definir isso

Temos outro problema: Criar um esquema de dar descontos nos ingressos do evento

O que usamos ali?
Pattern ou Principle?

E qual?

Strategy

Design Pattern

Podemos simplesmente criar outro tipo de desconto sem afetar as classes existentes

Outro problema: Gravar logs

Violando SRP


    class Logger {
      log(message, level = "INFO") {
        const timestamp = new Date().toISOString();
        const formattedMessage = `[${level}] ${timestamp} - ${message}`;
        console.log(formattedMessage);
      }
    }

    const logger = new Logger();
    logger.log("Usuário logado", "INFO");
    logger.log("Erro de conexão", "ERROR");

Código com várias responsabilidades: formatação, nível e saída.

Aplicando SRP


    class MessageFormatter {
      format(message, level = "INFO") {
        const timestamp = new Date().toISOString();
        return `[${level}] ${timestamp} - ${message}`;
      }
    }

    class ConsoleWriter {
      write(message) {
        console.log(message);
      }
    }

    class Logger {
      constructor(formatter, writer) {
        this.formatter = formatter;
        this.writer = writer;
      }

      log(message, level = "INFO") {
        const formatted = this.formatter.format(message, level);
        this.writer.write(formatted);
      }
    }

    const formatter = new MessageFormatter();
    const writer = new ConsoleWriter();
    const logger = new Logger(formatter, writer);

    logger.log("Usuário logado", "INFO");
    logger.log("Erro de conexão", "ERROR");

Cada classe tem uma única responsabilidade, facilitando manutenção e extensão.

O que foi isso aqui?

SOLID

SRP - Single Reposnability Principle

E com isso a gente vê o quanto essa Teoria é Prática

Mas cuidado, pra não matar uma formiga com uma bazuca

E é isso

5 - CONCLUSÃO

  • Pilares da Eng de Software
  • Design
  • Diferença Patterns/Principles
  • Aplicação Prática

Como dizia minha ex:
TERMINAMOS

Referências

DÚVIDAS?

Valeu o Boi, valeu o Vaqueiro


@alessandro_feitoza
https://linkedin.com/in/AlessandroFeitoza
slides.feitoza.tec.br