Angular продолжает набирать популярность и с каждым днем становится все более популярным среди Frontend-реализаций.
В этом кратком руководстве мы рассмотрим некоторые из самых лучших и популярных наборов пользовательского интерфейса и фреймворков, пытаясь понять, какой из них может стать правильным выбором для вашего следующего проекта.
Angular Material
Angular Material считается сегодня одним из самых популярных UI kit для Angular, возможно, самым популярным, несмотря на его корневую особенность, которая делает его привязанным к стилю Material Design, что может быть не для всех. Имея более 22 тысяч звезд на GitHub, этот набор доказывает, что он так любим разработчиками и гарантирует хорошую поддержку сообщества, которое продолжает публиковать и обсуждать ошибки, функции для интеграции, проблемы производительности и многое другое.
Плюсы
Очень популярный
Представляет собой базу, на которую опираются другие наборы пользовательского интерфейса
Приличное количество компонентов
Интегрирует Material Design
Множество модулей, не монолитный
Интегрирует хороший CDK
Обеспечивает некоторые функции доступности
Все еще поддерживает IE 11
Минусы
Сложность настройки: работа с этим набором заставит вас страдать от странных структур DOM, призрачных тегов и трудно кодируемых стилей CSS, которые в некоторых случаях требуют пресловутого (и плохого) подхода ::ng-deep rules
Строго привязан к стилю дизайна Material
Документация не слишком исчерпывающая, что приведет вас к поиску в StackOverflow. Также отсутствует хорошая система поиска на страницах документации.
Вердикт
Хорош для разработки CRM или административного ПО, но очень плох для универсального Front end. По-прежнему не хватает хорошей документации, а внешний вид и функциональность не всем могут подойти. Нашел его очень стабильным: используйте его и не стремитесь его сильно настраивать, потому что, несмотря на CDK, он сведет вас с ума.
Ng-bootstrap
Определяемый авторами как "Bootstrap widgets - The angular way", комплект пользовательского интерфейса Ng-bootstrap был популярен в течение многих лет и был одним из первых доступных комплектов.
Гимном стало "давайте повторим возможности Bootstrap и сделаем их все доступными для Angular". В результате получился хороший базовый набор UI без претензий, но действительно необходимый. Некоторые компоненты немного неадекватны по сравнению с оригинальными, а документация очень лаконична. Хороший выбор, если вам нужен "базовый bootstrap", но не намного больше.
Плюсы
Незаменимый, что может быть преимуществом
Прост в использовании
Очень близок к оригиналу по внешнему виду и ощущениям
Легко настраивается
Множество модулей, не монолитный
Наследие
Минусы
По существу... вероятно, вы не будете довольствоваться только этим и заставите разработчика интегрировать функции с другими вещами
Не так популярны в настоящее время, может не хватать поддержки по конкретным вопросам
Вердикт
Ng-bootstrap - хороший набор, если вам нужны простые функции Bootstrap, не очень полезный, если вам нужно больше. Сегодня он страдает с библиотекой Ngx в качестве конкурента, но Ngx более полный, более новый и даже более профессиональный в некоторых случаях, так что давайте выберем его, если вам не нужно многого.
Ngx-bootstrap
Этот недавно разработанный компанией Valor Software комплект пользовательского интерфейса становится все более популярным и живет под девизом "Разрабатывай быстрее и лучше". Может показаться, что это клон Ng-bootstrap, и его можно считать чем-то похожим, но правда в том, что он полностью переработан и предоставляет лучшие возможности и продвинутые компоненты.
Поддерживает Bootstrap 3, 4 и даже 5 версию, доказывая, что эта библиотека имеет хорошее сообщество поддержки и часто обновляется.
Плюсы
Похожа на Bootstrap, но более продвинута.
Очень хорошая документация
Множество модулей, не монолитный
Из Bootstrap убраны специфические компоненты, например, "Рейтинг".
Минусы
Внешний вид очень важен, требует пользовательских правил CSS
Иногда трудно понять, что является настоящим Ngx, а что нет, потому что термин Ngx сегодня используется многими другими библиотеками и компонентами
Очень стабильный, даже на продвинутых компонентах
Вердикт
На мой взгляд, Ngx - это лучший UI Kit на основе Bootstrap. Очень прочный, очень полная документация, и никогда не было проблем. Считайте его основным стандартом для современных веб-приложений. Если вам чего-то не хватает, просто интегрируйте. Для меня это настоящий Bootstrap.
MDBoostrap
Еще один комплект пользовательского интерфейса на основе Bootstrap, MDBootstrap - это огромный комплект и почти квинтэссенция компонентов пользовательского интерфейса для Angular, предоставляющий действительно все для любых нужд.
Это единственный набор, который поставляется с CLI, премиум-поддержкой, и который выглядит как "профессиональный" инструмент. Но кроме этого результат не слишком удовлетворяет. Я нашел его очень грязным, очень тяжелым и сложным в настройке.
Плюсы
Вероятно, самый большой по количеству компонентов
Хорошее эстетическое восприятие, намного лучше, чем базовый bootstrap
Хорошо выглядит, если вам нужен UI Kit премиум-класса
Предоставляет внешние услуги: хостинг и инструмент для сборки
Доступна версия MDB Pro (требуется в некоторых случаях)
Множество модулей, не монолитный... но в этом случае не слишком эффективен с точки зрения производительности
Доступно также для Vue.js и React
Минусы
Выглядит "тяжелым"
Трудно понять из-за его сложности, требуется некоторое время для освоения
Выглядит как коммерческий продукт
Вердикт
У меня был небольшой опыт работы с этим продуктом, и он просто не соответствовал моим потребностям. Может быть хорошим выбором, если вы хотите потратить некоторое время, чтобы действительно понять его и принять его как "стандартный процесс разработки компании", но не очень подходит для свободных разработчиков или проектов с открытым исходным кодом. Слишком сложный и не очень понятный, больше похоже на работу с "большим Java-фреймворком", чем на UI Kit для Angular.
Carbon Components для Angular
Решение от IBM для нужд Front end: этот UI Kit выглядит корпоративно, профессионально и даже красиво. Carbon не стал настоящим прорывом в панораме UI-комплектов и конкуренции, но попробовать его стоит.
Документация превосходна и охватывает действительно много аспектов реализации компонентов.
Плюсы
Профессиональный инструмент, поддерживаемый IBM
Исчерпывающая документация с живыми примерами
Множественные модули, не монолитные
Встроенные паттерны проектирования и подходы
Минусы
Слишком много профессионализма для некоторых потребностей B2C
Не очень популярно... решите ли вы свои проблемы?
Требует хороших навыков
Вердикт
Решение Carbon IBM выглядит очень увлекательно и очаровательно, но его следует рассматривать как продвинутый инструмент, который может не подойти для ваших нужд. Существует множество проектов, в которых вам не нужно так много техники, а его сложность заставит вас потратить несколько часов, чтобы действительно понять подходы и механизмы. Попробуйте, если вам нужен корпоративный инструмент.
Ng-Zorro
Этот набор пользовательского интерфейса корпоративного класса для Angular основан на дизайне Ant и за последние 2 года стал день ото дня популярнее. У меня была пара возможностей внедрить его в некоторые из моих проектов, и у меня было время убедиться, что он действительно работает.
Он содержит около 60+ компонентов, написан на Typescript и поддерживает интернационализацию. Стоит попробовать.
Плюсы
Альтернативный дизайн... наконец-то!
Хорошо структурирован, даже в документации
Множество модулей, не монолитный
Поддерживает Electron
Поддерживает LTR
Хорошие возможности настройки
Минусы
Некоторые компоненты не очень гибкие
Иногда документация не очень глубока в деталях
Некоторые компоненты до смешного бесполезны: например, аватар. Из-за этого комплект выглядит скорее непрофессионально, чем профессионально.
Альтернативный дизайн может заставить ваш внешний материал или библиотеку bootstrap плохо вписаться в ваше приложение.
Вердикт
Мне очень понравился этот набор UI после того, как я использовал его в течение нескольких месяцев в одном проекте. Документация действительно хорошо организована, и мне очень понравилась эстетическая часть, которая, наконец, является индивидуальной и выходит за рамки концепции bootstrap или material. Это очень хороший фреймворк с большим (действительно большим) количеством компонентов, и я уверен, что он будет развиваться еще больше.
Заключительное слово
Несмотря на то, что существует множество других бесплатных и корпоративных UI-комплектов, поддерживающих Angular, в этом кратком сравнении я просто попытался сосредоточиться на лучших из них и на тех, которые, по моему мнению, будут расти в популярности в ближайшие пару лет.
Если вам нужен базовый вариант без излишних претензий, Ng-bootstrap может быть подходящим вариантом. С другой стороны, я нашел Ngx более гибким, полным и профессиональным, действительно поддерживающим разработку во многих нуждах и ежедневных задачах. Zorro - это реальная альтернатива, если вы хотите чего-то другого, и он очень хорошо показал себя во время моих тестов, так что следите за ним.