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

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

Здесь, в Bluekiri, мы находимся в процессе улучшения качества наших проектов JavaScript, используя передовой опыт. Позвольте мне показать, к чему мы стремимся ...

Тестирование

Для нас, как разработчиков, наиболее распространенным сценарием является написание модульных или интеграционных тестов. Иногда вы можете написать другие типы тестов, например, функциональные или E2E-тесты. В основном я сосредоточусь на модульном тестировании.

Мокко или шутка?

Среди фреймворков для тестирования JavasScript я уже много лет успешно использую Mocha. Это просто, быстро, стабильно и широко применяется. Mocha позволяет нам легко создавать наборы тестов (не обязательно модульные тесты, но также интеграционные тесты и даже функциональные тесты). Эта простота имеет небольшой недостаток: если вам нужны другие функции тестирования, вам придется потратить больше времени на установку и настройку дополнительных инструментов.

Недавно я попробовал Шутку. Он кажется немного медленнее, чем Mocha, но мне нравится тот факт, что многие функции уже интегрированы, а настройка - это кусок пирога. Например, я большой поклонник уведомлений на рабочем столе во время разработки. Иногда терминал, на котором вы запускаете тесты, минимизирован или не отображается на вашем рабочем столе в тот момент, когда вы вносите изменения в свой код. С уведомлениями на рабочем столе у ​​вас всегда будет мгновенная визуальная обратная связь, если вы что-то сломаете, что особенно полезно для TDD и его цикла красно-зеленого рефакторинга. Однако, если вы хотите получать уведомления на рабочем столе с помощью Mocha, вам необходимо установить дополнительные библиотеки, которые различаются для разных платформ (Linux, Windows и Mac).

Jest также включает встроенные отчеты о покрытии кода, поэтому, например, вы можете контролировать, проходят ли ваши сборки CI на основе этих отчетов. При работе с Mocha вам потребуется установить инструменты покрытия, такие как Istanbul. При этом встроенное покрытие кода Jest основано на Стамбуле, поэтому единственное отличие состоит в том, что Jest устанавливает его для вас и избавляет вас от необходимости писать некоторые сценарии для проверки покрытия кода.

В дополнение к использованию Mocha или Jest, я также использую Chai как способ написания более удобочитаемых утверждений. Чем читабельнее будут ваши тесты, тем лучше. Почему? Благодаря тому, что ваши тесты читаются, их легче поддерживать. Если ваши тесты просты в обслуживании, от них с меньшей вероятностью откажутся.

Линтинг кода

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

Некоторое время пользуюсь ESLint. ESLint позволяет создавать собственные определения стандартов кодирования, а также расширять существующие. Например, я иногда расширяю Руководство по стилю JavaScript Airbnb и адаптирую его под свои нужды. Вот пример файла .eslintrc для определения нашего собственного стандарта:

Кроме того, мы можем комбинировать ESLint с плагинами, такими как Prettier, для автоматического исправления наших ошибок линтинга.

НПМ

Итак, теперь, когда у нас установлены и настроены наши инструменты тестирования и линтинга, нам нужен набор определений задач или сценариев, которые интегрируют эти инструменты с нашими циклами разработки и сборки. По сути, это означает создание набора скриптов, необходимых для всех ваших задач разработки и сборки. Хотя Gulp или Grunt, безусловно, являются вариантом, я также думаю, что они добавляют ненужные абстракции и вводят больше зависимостей в ваш проект. Я предпочитаю использовать сценарии NPM, чтобы получить что-то вроде этого в нашем package.json:

"scripts": {
    "start": "node src",
    "start:watch": "nodemon src",
    "test": "jest test --collectCoverage --ci",
    "test:watch": "jest test --watchAll --notify",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
}

Чего мы здесь добились? Что ж, теперь у нас есть все эти команды в нашем распоряжении, поэтому, например, когда я начну вносить изменения в свой код, я, вероятно, запущу npm run start:watch, чтобы запустить свое приложение в режиме разработки, и в другом терминале npm run test:watch, чтобы запустить мой непрерывный сценарий тестирования, чтобы тесты запускались каждый раз, когда я вношу изменения в исходный код.

Наша среда CI также должна извлечь выгоду из этих сценариев и базовых определений сборки на их основе. Этап гипотетического тестирования будет выглядеть примерно так:

npm install
npm run lint
npm test

Что привело нас к моему последнему пункту на сегодня ...

Непрерывная интеграция

Обязательно запускайте тесты и линтер в своих сборках CI. Это обеспечит постоянное использование ваших тестов и стандартов кодирования.

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

Создать-js-пакет

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

  • Модульное тестирование с помощью Jest и Chai.
  • Наблюдатель за тестированием для непрерывного тестирования.
  • Проверка тестового покрытия.
  • Линтинг ES6 на основе ESlint и Prettier.

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

В следующем посте я подробнее расскажу о CI и управлении выпусками.