Descubra como Implementar o Princípio DRY para um Código Mais Limpo

Se você está buscando aprimorar suas habilidades como programador, este post é para você. Vamos discutir o conceito de “DRY”, que significa “Don’t Repeat Yourself” (Não Se Repita). Vou explicar o que é o DRY e como podemos aplicá-lo no nosso cotidiano de programação.

Este é o primeiro de uma série de posts destinados a elevar suas habilidades como programador. Se aprecia esse tipo de conteúdo, assine nossa newsletter para ficar por dentro das novidades do blog.

Afinal, O Que é o DRY?

DRY, que significa “Don’t Repeat Yourself” ou “Não Se Repita” em tradução livre, foi proposto por Andy Hunt e Dave Thomas em seu livro “The Pragmatic Programmer”.

A definição formal desse princípio é: “Cada parte do conhecimento deve ter uma representação única, não ambígua e definitiva dentro do sistema.” Em termos mais simples, podemos entendê-lo como “Não repita código desnecessariamente”.

É fácil cair nesse erro ao utilizar facilitadores, geradores de código ou ao pular etapas de planejamento e design. O princípio do DRY visa resolver esse problema, evitando a repetição de código em diferentes partes do sistema, isolando trechos repetitivos em funções ou classes.

Como Evitar a Repetição de Código?

Para evitar a repetição de código, é crucial ter uma clara compreensão das funcionalidades do sistema e dos componentes UI. Planeje o que pode ser compartilhado e o que é específico para cada parte do sistema.

Vamos analisar um exemplo de código que pode ser otimizado:

(function () {
  const btn1 = document.getElementById("meu-btn-1");
  const btn2 = document.getElementById("meu-btn-2");

  function changeCard() {
    const card = document.querySelector(".card");
    if (card.classList.contains("active")) {
      card.classList.remove("active");
    } else {
      card.classList.add("active");
    }
  }

  btn1.addEventListener("click", function () {
    changeCard();
  });

  btn2.addEventListener("mouseover", function () {
    changeCard();
  });
})();

Ao isolar a lógica dos eventos em uma função única, o código fica mais simples, legível e fácil de manter.

Aplicando o DRY no CSS

No desenvolvimento de UI/UX, é ideal ter um “design system” que especifique espaçamentos, componentes e tipografia. Caso contrário, identifique os principais componentes que tendem a se repetir, como botões, cards e títulos, e otimize-os.

Evite a repetição de seletores. Armazene o resultado da seleção em uma constante para melhorar a legibilidade do código. Veja o exemplo abaixo:

<style>
  .primary-button {
    background-color: green;
    color: white;
    border-radius: 8px;
  } 
</style>

<header>
  <button class="primary-button">Botão 1</button>
</header>
<main>
  <button class="primary-button">Botão 2</button>
</main>
<footer>
  <button class="primary-button">Botão 3</button>
</footer>

Ao seguir essas práticas, você cria um código mais fácil de entender, menor e menos poluído. Aplicar o princípio DRY no seu dia a dia proporciona uma experiência positiva de programação.

Deixe nos comentários se este post foi útil para você ou se há algo que gostaria de acrescentar. Fique atento para mais novidades e até a próxima!

Outros links:

• Instagram: @devraphaelcorrea
• YouTube