10 лучших инструментов для разработчиков, использующих Angular

0
696
views

Перевод статьи «11 Top Angular Developer Tools for 2020».

Инструменты для Angular

Angular это фреймворк с невероятно богатой экосистемой, причем вспомогательный инструментарий для него создается не только основной командой, но и сообществом.

В этом посте я перечислю свои любимые инструменты, с которыми мне самому приятно работать и которые я с удовольствием рекомендую всем остальным.

Я разделил эти инструменты на три категории:

  • инструменты разработки
  • библиотеки
  • инструменты тестирования.

Приступим!

Инструменты разработки

1. Angular State Inspector

Если сравнивать этот инструмент с более известным Augury, можно сказать, что он делает только одну вещь, но хорошо. С помощью Angular State Inspector можно проверять состояние в рамках каждого отдельного DOM-элемента.

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

Angular State Inspector интегрируется с инструментами разработчика Chrome, он быстрый и легковесный. Если вам нужно что-то с более богатым функционалом, вы можете предпочесть Augury, но имейте в виду, что он не будет работать столь же шустро, как Angular State Inspector.

Angular State Inspector

2. Stackblitz

Stackblitz стал, фактически, основным инструментом Angular-разработчиков для написания сниппетов кода (или даже целых приложений) полностью в браузерном редакторе.

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

Stackblitz

Библиотеки

3. Angular CDK / Material

Вероятно, представления здесь излишни, но если все же кто-то не знает, Angular Material это, пожалуй, лучшая библиотека компонентов (и определенно моя любимая).

Angular CDK / Material

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

Но даже если вся библиотека вам не нужна, можно использовать только CDK. Если вам нужны drag&drop, виртуальный скроллинг, управление фокусом и многие другие функции, CDK будет для вас прекрасным решением.

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

4. FlexLayout

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

Как можно понять из названия, FlexLayout конвертирует директивы во Flexbox-свойства. Flexbox это не самая простая в работе система, но FlexLayout превращает эту работу в удовольствие.

FlexLayout предоставляет список высокоуровневых директив, которые преобразуются в CSS-правила. Вы практически можете построить целое приложение, не используя при этом CSS!

5. Ngx-Bootstrap

Если ваша компания или клиент использует систему дизайна на базе Bootstrap, весьма вероятно, что вы будете пользоваться и этой библиотекой, созданной Valor Software.

Библиотека содержит большое количество нативных компонентов Angular, благодаря чему можно использовать Bootstrap без привязки к его компаньону — библиотеке jQuery.

Я работал над многими приложениями, где использовалась тема Bootstrap, и библиотека Ngx-Bootstrap была просто незаменимой для запуска приложений в считанные минуты.

6. Transloco

Поскольку ngx-translate не поддерживается, а Angular i18n предлагает ограниченные решения (по крайней мере на момент написания этой статьи), Transloco стал моим любимым инструментом для добавления интернационализации в мои приложения.

Помимо ожидаемых стандартных фич (файлы перевода JSON, структурные директивы, конвейер и сервис), Transloco также предлагает поддержку локализации, комментарии для переводчиков, одновременное использование нескольких языков, поддержку SSR и менеджер клавиш.

Благодаря интеграции с Angular CLI, для начала работы нужно выполнить всего одну команду. На данный момент было бы даже странно не порекомендовать этот инструмент!

7. NgRx / Akita / NgXs

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

Хотя я главным образом работаю с NgRx, я считаю, что все три библиотеки одинаково хороши и выбор зависит только от личных предпочтений. Так что было бы нечестно не включить в список любую из них. Я советую попробовать все три и посмотреть, какая лучше вам подойдет.

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

Инструменты тестирования

8. Spectator

Testing Angular иногда бывает слишком многословным и требует многократного повторения операций. Spectator позволяет пропускать большую часть повторяющегося кода благодаря применению целого ряда утилит, а это очень ускоряет процесс написания модульных тестов.

Но Spectator не только позволяет быстрее писать тесты. Благодаря его чистому API код также будет невероятно читаемым, а все детали API модульного тестирования будут скрыты за библиотекой.

Это уже третья позиция в списке, являющаяся детищем ngNeat, так что комплименты этой команде!

9. Angular Testing Library

Создатели этой библиотеки изначально вдохновлялись методологией React Testing Library, но в своей библиотеке применили другой подход, отличающийся от всех остальных.

Эта библиотека максимально облегчает работу с DOM, вместо того чтобы фокусироваться на тестировании отдельных компонентов и взаимодействовать с компонентами программным образом.

Angular Testing Library предлагает API для взаимодействия с узлами DOM, а не с содержимым компонентов. В результате, если реализация компонентов изменится, а поведение сохранится, ваши тесты по-прежнему будут прекрасно работать.

10. Angular Benchpress

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

Angular BenchPress

Если производительность — важная часть вашего бизнеса, Angular Benchpress определенно будет прекрасным инструментом в вашем техническом стеке, особенно, если ваши сквозные тесты написаны при помощи Protractor.

Просто запуская тесты Protractor, можно создавать сценарии, которые Angular Benchpress будет многократно повторять и докладывать о показателях производительности в читаемом формате.

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

Заключение

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here