DRY – источник плохих абстракций

В блоге Свижец Теллер вышла статья про принцип DRY. Самый худший и сложный для сопровождения код, который я видел или писал, был написан в погоне за DRY - Don't Repeat Yourself. Это один из первых принципов проектирования, который изучают разработчики и используют повсеместно.

⭐️ Бездумное использование принципа DRY приводит к созданию плохих абстракций в коде. Из-за чего код становится запутанным и сложно поддерживаемым.

Например, нужно показать навигационное меню:

// 1
const NavigationMenu = () => {
  return (
    <ul>
      <li>
        <a href="/about">
          <img src="question-icon.png" />
          About
        </a>
      </li>
      <li>
        <a href="/contact">
          <img src="person-icon.png" />
          Contact
        </a>
      </li>
      <li>
        <a href="/buy">
          <img src="cash-icon.png" />
          Buy
        </a>
      </li>
      // ...
    </ul>
  )
}

Если пойти в сторону принципа DRY, то можно написать функцию-фабрику создания пункта меню и использовать массив:

// 2
const NavigationMenu = () => {
  const items = [
    makeNavItem("/about", "question-icon.png", "About"),
    makeNavItem("/contact", "person-icon.png", "Contact"),
    makeNavItem("/buy", "cash-icon.png", "Buy"),
    // ...
  ]

  return (
    <ul>
      {items.map((item) => (
        <li>
          <a href={item.url}>
            <img src={item.icon} />
            {label}
          </a>
        </li>
      ))}
    </ul>
  )
}

Теперь добавление и удаление элементов меню стало проще, однако читать код стало тяжелее, т.к. приходится прыгать по строкам кода.

Представьте, что поступила задача – подсветить кнопку Buy красным цветом. Однако в текущем виде абстракция оптимизирована на отображение всех кнопок в одинаковом стиле. Можно попытаться добавить новые параметры в функцию-фабрику или попробовать переписать всю абстракцию. Но это усложнит код и будет проще вернуться к первому варианту кода.

https://swizec.com/blog/dry-the-common-source-of-bad-abstractions/