Neron_Kesar May 10 2020 at 23:10

Новый взгляд на code style

7 min

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

В этой статье я хочу поделиться своим опытом и подходом к стилизации кода. Мы рассмотрим стилизацию со стороны программирования, а затем немного коснемся нейропсихологии для более глубокого понимания самого процесса и степени его важности для разработчика. Последний год я работаю в компании Secreate, где занимаюсь разработкой мобильных приложений на фреймворке React Native, поэтому примеры кода, приведенные в этой статье, будут на языке Javascript. Знания, полученные из этой статьи, можно будет легко применить к любому языку программирования. В конце статьи вас ждут полезные примеры стилизации кода. Приятного чтения!

Что такое стилизация

Каждый программист имеет свое представление о code style. Для меня стилизация — это набор правил для оформления, таких как: отступы, пробелы, переносы, последовательность и так далее. Тем не менее, каждый программист оформляет свой код по-своему. Давайте рассмотрим несколько примеров такого оформления.

Импорты

Некоторые программисты пишут их так:

import {SomeClass} from ‘some/file’

Некоторые так:

import { SomeClass } from ‘some/file’

Еще можно встретить такое:

import {SomeClass, someFunction, someConst, AnotherClass и еще много чего в длинную строку} from ‘some/file’

Или такое:

import {
  SomeClass,
  somefunction,
  someConst,
  AnotherClass,
  и еще много чего в столбик
} from ‘some/file’

Объявление функций

Часто встречается такое оформление:

function foo() {
  some code...
}

Также можно встретить такое:

function foo ()
{
  some code…
}

Тернарная условная операция

Можно встретить такое:

condition ?
some very long long long long long expression :
another expression

Или такое:

condition
  ? some very long long long long long expression
  :  another expression

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

Что стилизация может дать

Давайте сделаем небольшое отступление. Представим, что вы начинающий программист. У вас стоит задача разработать некий функционал. Вы долго писали код, завершили разработку и начинаете проверять функционал. И, о ужас, результат его работы не тот, который вы ожидаете. Начинаются поиски ошибки. Просматриваете беглым взглядом свой код, и вроде все верно. При внимательном и детальном изучении ошибка все равно не находится. Это продолжается еще несколько часов. В отчаянии обращаетесь за помощью к старшему коллеге, и менее чем через минуту он уже указывает пальцем на ошибку и предлагает варианты решения. После внесения изменений вы не верите своему счастью — все заработало!

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

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

На данном этапе ваш слайдер выполняет только одну задачу и выглядит всегда одинаково. В будущем у вас может появится необходимость разработать слайдер для другого приложения, который должен выглядеть иначе. Вы обращаетесь к вашей библиотеке. Получается, что наш первый слайдер нужно модифицировать. Тогда вы начинаете дорабатывать и улучшать свою библиотеку. Добавляете новые возможности: менять внешний вид слайдера, менять анимации, тем самым налаживая нейронные связи. Затем добавляете возможность создавать два бегунка и так далее. И когда снова возникнет необходимость в создании слайдера, просто обратитесь к вашей библиотеке с нужными параметрами и она сама сформирует слайдер. При этом она сделает это в сотни раз быстрее, чем если бы вы заново его разрабатывали.

Подобным образом работает и человеческий мозг. Постоянно совершая некое действие, вы формируете, а затем налаживаете нейронные связи вашего мозга. Иными словами, вы учите ваш мозг выполнять некие действия без участия вашего сознания. Так, при анализе кода мы формируем нейронную связь (создаем библиотеку). Затем при помощи правил стиля мы ее налаживаем (улучшаем библиотеку). Наш мозг способен на подсознательном уровне, самостоятельно обрабатывать всю полученную о коде информацию и найти все синтаксические, структурные и архитектурные ошибки буквально за доли секунды. Ведь не секрет, что подсознание работает во много раз быстрее, чем сознание.

Как она это делает

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

Стилизация кода выполняет ту же функцию, что и таблички с указаниями. Иными словами, придерживаясь четких правил стиля, вы сможете легко ориентироваться в вашем коде и быстро подмечать любые ошибки. К примеру, если вы допустите структурную ошибку или даже опечатку, ваш мозг среагирует на нее таким образом, как будто привычная синяя секция лабиринта вдруг стала желтой. И не заметить такое будет очень сложно, ведь на табличке написано “синяя секция”.

Итоги

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

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

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

Длина строки

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

Уровни вложенности

Выделяйте уровни вложенности отступом в 2 пробела. Так вы всегда будете знать, дочерний это элемент или отдельный.

Пример:

<View>
  <Text>Some text</Text>
  <TouchableOpacity>
    <Text>Title</Text>
  <TouchableOpacity/>
</View>

или

Animated.timing(
  animatedValue,
  {
    toValue: someValue,
    duration: someDuration,
    anotherOptions,
  },
)

Объявление объекта

Если полей в объекте немного и строка не превышает нужную ширину, то отделяйте поля пробелом.

const object = { field: value, anotherField: value }

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

const object = {
  field: value,
  anotherField: value,
  moreFields,
}

Объявление функции

Отделяйте пробелом закрывающую круглую скобку от открывающей фигурной скобки. Тело функции переносите на следующую строку.

Пример:

function someFunction() {
  some code
}

Ключевые слова

Отделяйте пустой строкой ключевые слова.

Пример:

function sum(a, b) {
  const result = a + b

  return result
}

Или:

if (condition) {
  do this

} else {
  do that
}

Или 

switch (value) {
  case someCase:
    do this

    break

  case anotherCase:
    do that

    break
}

Отделяйте пустой строкой объявление функций и разнотипные действия

Пример:

function someFunction() {
  do something
}

function anotherFunction() {
  do another thing
}

Или:

function someFunction() {
  const someConst
  const anotherConst

  let someLet
  let anotherLet

  if (condition) {
    do something
  }

  this.function()
  this.anotherFunction()
}

Последовательность элементов

Соблюдайте строгую последовательность элементов.

Пример класса расширяющего React.Component:

Static’и.
Поля класса.
Конструктор.
State.
Функции жизненного цикла.
Вспомогательные функции.
Обработчики действий.
Вспомогательные render функции.
Render.

Отделяйте пробелом самозакрывающий тэг

Пример:

<View style={styles.underline} />

Переносите props’ы на следующую строку, если их больше одного

Пример:

<TouchableOpacity
  style={styles.button}
  onPress={this.handlePress}
>
  <Text>Title</Text>
</TouchableOpacity>

Длинные условия

Разбивайте длинные условия на несколько строк, начиная каждую строку с условного символа.

Пример:

if (
  condition
  && anotherCondition
  && (
    value < anotherValue
    || someCondition
  )
) {
  do something
}

Или:

<View>
  {
    this.state.isButtonVisible
      ? (
        <TouchableOpacity>
          <Text>Title</Text>
        </TouchableOpacity>
      )
      : null
  }
</View>

Отделяйте пробелами условные символы

Пример:

const sum = a + b

Или:

return a < b ? a : b

Или:

const object = {
  field: value,
  ...value > 0 ? { value } : {},
}

Tags:

Hubs: