Какие знаешь практики хорошего кода

Разбор вопроса «Какие знаешь практики хорошего кода» для Frontend Developer: что проверяет интервьюер, ключевые тезисы, практические примеры и частые ошибки.

Что хочет услышать интервьюер

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

Ключевые тезисы

Использование семантического HTML для улучшения читаемости и доступности кода.
Следование принципам DRY (Don't Repeat Yourself) для избежания дублирования кода.
Применение модульного подхода и компонентной архитектуры для упрощения поддержки и масштабирования.
Использование инструментов линтинга и форматирования (например, ESLint, Prettier) для соблюдения единого стиля кода.
Написание чистого и читаемого кода с понятными названиями переменных и функций.
Регулярное рефакторинг кода для улучшения его структуры и производительности.
Тестирование кода (юнит-тесты, интеграционные тесты) для обеспечения его надежности.
Оптимизация производительности, включая минификацию и сжатие ресурсов.
Использование системы контроля версий (например, Git) для отслеживания изменений и совместной работы.

Практики хорошего кода — это набор принципов и подходов, которые помогают разработчикам писать чистый, поддерживаемый и эффективный код. Одной из ключевых практик является использование семантического HTML, который улучшает читаемость и доступность кода, делая его понятным как для разработчиков, так и для браузеров и вспомогательных технологий. Например, использование тега <header> для шапки страницы или <nav> для навигации помогает четко структурировать контент.

Следование принципу DRY (Don't Repeat Yourself) позволяет избежать дублирования кода, что упрощает его поддержку и снижает вероятность ошибок. Например, вместо того чтобы писать одну и ту же функцию для валидации формы в нескольких местах, можно создать одну универсальную функцию и использовать её повторно.

Модульный подход и компонентная архитектура, особенно в современных фреймворках, таких как Vue или React, позволяют разбивать код на независимые компоненты, что упрощает разработку и тестирование. Например, компонент кнопки можно использовать в разных частях приложения, не переписывая его каждый раз.

Использование инструментов линтинга, таких как ESLint и Prettier, помогает соблюдать единый стиль кода и избегать ошибок. Например, ESLint может автоматически находить проблемы с синтаксисом или стилем, а Prettier форматирует код в соответствии с заданными правилами.

Практические примеры

Пример 1

Пример использования семантического HTML:

<header>
  <h1>Заголовок сайта</h1>
  <nav>
    <ul>
      <li><a href='/'>Главная</a></li>
      <li><a href='/about'>О нас</a></li>
    </ul>
  </nav>
</header>

Пример 2

Пример применения принципа DRY:

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// Использование функции в разных местах
const email1 = 'test@example.com';
const email2 = 'user@domain.com';
console.log(validateEmail(email1)); // true
console.log(validateEmail(email2)); // true

Пример 3

Пример модульного подхода в Vue:

<template>
  <button class='btn' @click='handleClick'>{{ label }}</button>
</template>

<script>
export default {
  props: ['label'],
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

Частые ошибки

Использование не семантических тегов, таких как <div> для всего, что снижает читаемость и доступность кода.
Дублирование кода вместо создания универсальных функций или компонентов, что усложняет поддержку.
Игнорирование инструментов линтинга и форматирования, что приводит к несогласованному стилю кода.

Связанные темы

Принципы SOLID в разработке
Компонентная архитектура в современных фреймворках
Тестирование доступности интерфейсов (a11y)
Оптимизация производительности веб-приложений

Follow-up вопросы

Как ты применяешь принцип DRY в реальных проектах?

Уровень: basic

Использую функции-хелперы, миксины (в CSS), компоненты (во фронтенд-фреймворках) и утилитарные классы для повторного использования кода. Например, выношу общую логику обработки ошибок API в отдельный модуль.

Какие инструменты линтинга ты используешь и как настраиваешь правила?

Уровень: intermediate

ESLint с плагинами (например, для React/Vue), Prettier для форматирования. Настройки либо беру стандартные (airbnb, standard), либо кастомизирую через .eslintrc, учитывая специфику проекта. Важно согласовать правила с командой.

Уровень: intermediate

Использую семантические HTML-теги, ARIA-атрибуты, инструменты вроде axe-core или Lighthouse. Также проверяю навигацию с клавиатуры и работу с screen readers (NVDA, VoiceOver). Доступность — часть Definition of Done.

Как ты выбираешь между утилитарными CSS-классами и компонентным подходом?

Уровень: advanced

Утилитарные классы (Tailwind) хороши для быстрого прототипирования, но компоненты (BEM, CSS-in-JS) лучше для сложных систем. Критерии: масштаб проекта, частота изменений дизайна и необходимость тематизации.

Как ты организуешь структуру проекта для упрощения поддержки?