Что такое современная угловая оснастка?

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

Modern Angular Tooling — это термин, используемый для описания современных инструментов, которые позволят вам и вашей команде создать комплексную среду разработки. Эта среда разработки использует последние улучшения в экосистеме JavaScript для повышения производительности, согласованности, надежности, масштабируемости и удобства разработчиков при создании приложений и библиотек Angular.

Что такое современные инструменты Angular?

Мы считаем Modern Tools дополнительными инструментами, которые можно и нужно использовать при создании Angular-приложений и библиотек Angular. Эти инструменты имеют тенденцию сосредотачиваться на более архитектурной стороне разработки программного обеспечения.

Кипарис — E2E-тестирование

Angular CLI больше не включает решение e2e при создании приложения Angular. Это означает, что больше нет Protractor из коробки с приложениями Angular. Следовательно, это оставляет значительный пробел в стандартном опыте работы с Angular. Cypress имеет один из лучших интерфейсов для разработчиков и может использоваться не только для тестирования приложений Angular. С Cypress легко писать, запускать и отлаживать тесты, он поддерживает кроссбраузерное тестирование, поддерживает браузеры семейства Chrome (включая Electron и Edge) и Firefox. Также есть открытое предложение поддержать Сафари.

Шутка — модульное тестирование

На данный момент Jest — лучший в своем классе инструмент модульного тестирования в экосистеме JavaScript. Angular CLI включает Karma при создании приложения, еще один инструмент модульного тестирования; однако Карма заметно медленнее, что сокращает время цикла обратной связи.

Jest намного быстрее, работает без запуска браузера и может использовать JSDom для модульного тестирования шаблонов компонентов. Он также может работать параллельно, что позволяет значительно ускорить цикл обратной связи.

ESLint — Линтинг

ESLint стал де-факто инструментом линтинга в мире JavaScript, даже заменив TSLint в проектах TypeScript. В прошлом Angular CLI включал TSLint для проверки приложений Angular, но когда поддержка TSLint закончилась в декабре 2020 года, Angular CLI перестал включать TSLint. На самом деле, Angular CLI больше не включает никаких встроенных инструментов для анализа кода.

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

Сборник историй — Дизайн компонентов

Фронтенд-фреймворки и библиотеки объединились в единую базовую парадигму проектирования, сосредоточенную вокруг компонентов. Создание этих компонентов в контексте вашего приложения — это хорошо, но это может стать громоздким. Это может привести к несоответствиям в дизайне и падению производительности, поскольку вам придется запускать приложение каждый раз, когда вы хотите проверить свои изменения, пытаясь согласовать дизайн в нескольких областях вашего приложения.

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

Красивее — форматирование

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

Почему мы должны заботиться об этом?

Есть много причин, по которым мы должны стремиться использовать современные инструменты с Angular. Многие из этих причин были упомянуты выше в связи с каждым из инструментов, которые мы определили как необходимые для современной разработки на Angular. Когда мы объединяем их все в одно рабочее пространство для разработки, мы получаем:

Повышение производительности

  • Сборник рассказов может помочь в создании компонентов без запуска вашего приложения.
  • Разработчики тратят меньше времени на форматирование и больше времени на написание кода.

Быстрая обратная связь (ошибки, тесты, сборки)

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

Улучшенная отладка

  • Используя современные инструменты, становится намного проще находить и устранять ошибки и дефекты.
  • Все они были созданы для работы с экосистемой JavaScript, которая уже содержит отличные инструменты отладки, такие как функции отладки в VSCode или Chrome DevTools.

Лучшие ограничения для команд

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

Последовательность между командами

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

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

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

Как Nx может помочь?

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

npx create-nx-workspace — preset=angular

Если вы предпочитаете Yarn, вы можете использовать

yarn create nx-workspace — preset=angular

Эта команда создаст ваше рабочее пространство и автоматически интегрирует указанные выше инструменты. Единственный инструмент, который не будет интегрироваться автоматически, — это Storybook. Однако Nx позволяет легко интегрировать и это! После создания рабочей области все, что вам нужно сделать, это запустить следующую команду в корне вашей рабочей области:

npm run ng g @nrwl/angular:storybook-configuration

Или с помощью пряжи

yarn ng g @nrwl/angular:storybook-configuration

Чтобы узнать больше о Nx и о том, как он может помочь в вашей разработке, ознакомьтесь с нашей документацией на Angular.