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

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/