Как навести порядок во фронтенде и избавиться от дублирования кода

😄Как я перестал копипастить и начал жить: наводим порядок во фронтенде

Знаете это чувство, когда хочешь поменять одну кнопку в меню, а приходится открывать 20 разных HTML-файлов? 🤯

Недавно я занимался, казалось бы, простой задачей собирал классический HTML-сайт с блогом.

Никаких тяжелых фреймворков, старый добрый код. И очень быстро уперся в проблему, которая убивает время даже на маленьких проектах: дублирование.

В каждом файле у тебя один и тот же кусок кода для аналитики, одна и та же шапка, один и тот же футер.

Стоит захотеть добавить новый пункт в меню или сменить ID счетчика ты превращаешься в робота, который делает Ctrl+C -> Ctrl+V по всему проекту.

Что я сделал:

Пошел по пути «сухой» разработки (DRY — Don't Repeat Yourself). Вынес все повторяющиеся куски скрипты аналитики, шапку сайта, подвал в отдельные файлы и подключил их в index.html

В чем профит?

Скорость: Правка вносится в одном месте и мгновенно применяется ко всем страницам.

Чистота: Код страницы становится читаемым. Видно контент, а не бесконечные простыни технических скриптов.

Меньше багов: сложно забыть обновить меню на какой-нибудь забытой странице .

💃 Это база архитектуры, о которой часто забывают в погоне за быстрым запуском.

Но как руководитель проектов я знаю: технический долг накапливается мгновенно.

Если не структурировать проект на старте, через месяц любая мелкая правка будет стоить вам часов работы разработчика.

Неважно, пилите вы сложный SaaS или простой лендинг модульность экономит вам деньги.

А как у вас с легаси-кодом? Сразу делаете «по красоте» или потом героически переписываете?

Пиши в комментарии 😓