Что такое современная угловая оснастка?
Поскольку 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.