В моей нынешней организации мы используем платформу Next.js для написания кода внешнего интерфейса, Emotion.js для стилизации и Relay в качестве клиента GraphQL. Однако эта статья не посвящена библиотекам и пакетам, которые мы используем для создания нашего продукта; вместо этого он фокусируется на тех инструментах, которые не влияют напрямую на продукт, но значительно облегчают процесс разработки.
Форматирование кода и линтинг
Одна из первых вещей, которые мне нравится настраивать при создании нового проекта, — это правила форматирования кода и проверки.
Пакеты форматирования кода, такие как «Prettier», придают вашему коду единообразную структуру и обеспечивают соблюдение единых правил форматирования внутри команды. Помимо эстетики, хорошо отформатированный код намного легче отслеживать и понимать.
После того, как структура кода будет отсортирована, полезно установить набор основных правил для проекта, таких как «нет неиспользуемых переменных», «завершение строк точкой с запятой» и т. д. сложные правила, такие как «наименование интерфейсов с префиксом «I»». Такие пакеты, как «ESLint», способствуют обеспечению соблюдения этих правил. Кроме того, ESLint предлагает отличные плагины для React; один из моих любимых плагинов — «eslint-plugin-react-hooks», который выдает предупреждение, если зависимость перехватчика React не имеет никакого значения.
Стоит отметить, что такие IDE, как «VSCode», обеспечивают надежную поддержку этих пакетов, обеспечивая предупреждения и форматирование в реальном времени.
Добавить проверки перед фиксацией
Лучше всего выполнять проверки форматирования и проверки перед фиксацией кода. Для создания таких проверок перед фиксацией я использую пакет под названием «Husky». Коммиты будут продолжены только в том случае, если эти проверки пройдены, обеспечивая целостность кода перед отправкой его в репозиторий.
Юнит-тесты и сквозные (E2E) тесты
По мере роста кодовой базы отслеживание потенциального влияния небольшого изменения кода становится все более сложной задачей. Даже при запуске нового проекта наличие четко определенных тестовых примеров повышает уверенность в коде и учитывает все известные сценарии. Я не могу переоценить, как часто модульные тесты и E2E-тесты помогали мне выявлять ошибки в моем коде.
Для модульного тестирования я использую «Jest», а «Cypress» отвечает моим потребностям в тестировании E2E. E2E-тесты во внешнем интерфейсе по существу моделируют действия пользователя и проверяют полученные результаты.
Примечание. Вы можете включить эти тесты в ловушку предварительной фиксации, чтобы убедиться, что они пройдены перед фиксацией кода.
Иметь дизайн-систему
В мире фронтенд-разработки ключевым моментом является последовательность. Обеспечение единообразного внешнего вида пользовательского интерфейса вашего приложения для всех компонентов и страниц может оказаться непростой задачей по мере роста вашего проекта. Именно здесь в игру вступает система дизайна Frontend, которая делает процесс разработки более плавным, а взаимодействие с пользователем — более совершенным.
Система дизайна внешнего интерфейса — это набор повторно используемых компонентов, рекомендаций и принципов проектирования, которые управляют визуальными и интерактивными аспектами вашего пользовательского интерфейса. Он действует как централизованное хранилище элементов пользовательского интерфейса, таких как кнопки, формы, типографика, цвета и многое другое. Думайте об этом как о руководстве по стилю, которое сделает вашу разработку интерфейса последовательной и эффективной. Я считаю, что «Storybook» — отличный инструмент для создания и документирования этих компонентов.
Мониторинг
Как только код будет готов к развертыванию и будет использоваться множеством пользователей. Крайне важно следить за работоспособностью и производительностью ваших приложений. Когда возникают проблемы, будь то ошибки, сбои или узкие места в производительности, их видимость является ключом к обеспечению бесперебойной работы пользователя. Одним из мощных инструментов для этой цели является «Sentry».
Sentry — это платформа отслеживания и мониторинга ошибок с открытым исходным кодом, которая помогает разработчикам выявлять, диагностировать и решать проблемы в режиме реального времени. Он предоставляет ценную информацию об ошибках и исключениях интерфейса, позволяя вам активно устранять их, прежде чем они повлияют на пользователей.
Спасибо, что прочитали эту статью. Я надеюсь, что приведенный выше пункт поможет вам улучшить процесс разработки.
Перечислить пакеты, упомянутые выше
- красивее: https://prettier.io/
- ESlint: https://eslint.org/
- шутка:https://jestjs.io/
- кипарис: https://www.cypress.io/
- хаски: https://www.npmjs.com/package/husky
- книга рассказов: https://storybook.js.org/
- Sentry: https://sentry.io/
Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.