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: