Искусство написания чистого кода: 5 полезных приемов

Перевод статьи «The Art Of Writing Clean Code: My 5 Go-To Tricks».

Кто угодно может научиться писать код. Но, помимо этого, нужно научиться писать его чисто. В этой статье я поделюсь с вами собственными приемами, благодаря которым код становится чище, а структура папок — понятнее. Я занимаюсь веб-разработкой на React, но эти приемы, в принципе, применимы к любому стеку.

1. Пользуйтесь палитрами цветов

Это может стать одним из самых удачных ваших решений. Использование цветовой палитры позволит вам не толь ко писать более чистый код, но и без проблем сменить всю тему вашего приложения, изменив всего 6 символов (hex-код).

Взгляните на цветовую палитру, которую я использую в своем проекте на React Native.

// создание и экспорт палитры цветов
export default {
  black: "#000",
  darkBlue: "#090446",
  darkGreen: "#002E27",
  green: "#00B14F",
  light: "#ede6e6",
  medium: "#6e6969",
  pink: "#fc5c65",
  purple: "#4530B3",
  white: "#FFFFFF",
};

// использование палитры (default import as colors)
const styles = StyleSheet.create({
  foodName: {
    color: colors.white,
    fontSize: 22,
    fontWeight: "bold",
    margin: 5,
  },
  foodPrice: {
    color: colors.green,
    fontSize: 16,
    margin: 5,
  },
});

Я могу изменить зеленый цвет, выбрав другой оттенок, и для этого мне придется отредактировать только основную палитру, а не все файлы проекта. Вы можете пойти еще дальше и объявить первичные и вторичные цвета.

2. Сортируйте параметры и ключи по алфавиту

Это просто вопрос чистоты. Вот пара примеров:

function doSomething(anArgument, anotherArgument, bIsAfterA, cIsAfterB, moreArgument, zIsTheLastAlphabet) {
   // do something...
}

container: {
  backgroundColor: colors.darkGreen,
  borderRadius: 10,
  justifyContent: "space-around",
  margin: 10,
  padding: 10,
  width: 180,
  height: 180,
},

3. Делайте имена выразительными, даже если они при этом будут длинными

Все советуют писать код покороче, и это действительно имеет смысл. Но когда дело касается имен переменных и функций, можно сделать исключение.

Давайте рассмотрим пример:

const handlePress = () => {
  // do something...
}

const handlePress2 = () => {
  // do something...
}

const handlePress3 = () => {
  // do something...
}

Если у вас маленькое приложение, можно остановиться на варианте нейминга, приведенном выше. Но представьте, что речь идет о масштабируемых проектах в крупной компании, где множество разработчиков работают над огромной кодовой базой. Поверьте, последнее, чего вам захочется посреди напряженного трудового дня, это вычитывать плохо написанный код и пытаться угадать, что он делает.

Вот куда лучшие имена тех же функций:

const handlePressAddButton = () => {
  // do something...
}

const handlePressCrossButton = () => {
  // do something...
}

const handlePressCircularView = () => {
  // do something...
}

4. Создавайте очень расширяемую структуру директорий даже для маленьких проектов

Возможно, это самый важный из моих советов.

Как мне представляется, создать расширяемую структуру проекта — несложно. Все, что вам нужно, это поискать в Google образец для вашего стека технологий. А между тем, этот шаг принесет вам много пользы в течение всего цикла разработки.

Вот скриншот структуры одного из моих проектов:

5. Создавайте маленькие, расширяемые и пригодные для многократного использования компоненты

Пример React-компонента, пригодного для повторного использования:

function Text({ children, style, ...otherProps }) {
  return (
    <h1 style={[styles.myCustomStyle, style]} {...otherProps}>
      {children}
    </h1>
  );
}

Здесь мы имеем полностью готовый тег h1 с дефолтными стилями. Все, что вам нужно, это использовать его в своем приложении. А благодаря последнему параметру REST компонент Text может иметь дополнительные свойства, а может и не иметь — по вашему желанию. Но это еще не все. Стиль этого компонента написан так, чтобы быть самодостаточным, но его также можно расширять или перезаписывать (параметр style).

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]