Выбор CSS-фреймворка для Angular

Работая над проектом с Angular 4, я должен был выбрать CSS-фреймворк для построения его макета. Интересно, что CSS-фреймворки еще не перешли на компонентную архитектуру с той же скоростью, что и JS Frameworks, но есть несколько неплохих вариантов для работы.

Angular Material

Он поддерживается Angular Team и, конечно, является их рекомендацией для решения с пользовательским интерфейсом, но это относительно ранние шаги. Он пропускает много важных функций и, самое главное, не предлагает собственную систему макетов. Хотя рекомендуется связать его с проектом Flex Layout, который также поддерживается Angular Team.

Разделение этих двух элементов может быть полезным (поскольку Flex Layout можно интегрировать в другие проекты, не используя Angular Material), но это необходимо учитывать. Рано или поздно он будет соответствовать действующим Руководствам по материалам, но на данный момент это относительно бета-версия с неизвестными временными рамками проекта.

Bootstrap

О короле CSS-фреймворков говорить нечего. Bootstrap широко используется и обычно нравится, предлагает множество функций и имеет огромную базу пользователей, которая добавляет свой набор функций. В настоящее время на github есть два больших проекта, которые пытаются перенести все функциональные возможности Bootstrap на компонент Angular. Первый - это ngx-boostrap от команды разработчиков valor-software, а второй - это ng-bootstrap командой ng-bootstrap.

Библиотека Valor-Software предоставляет виджеты в версиях 3 и 4 в Bootstrap CSS, где библиотека NGX-Bootstrap полностью создана с учетом четвертой версии Bootstrap. Обе команды довольно хороши, хотя у NGX-Bootstrap довольно богатая история, поскольку они отвечают за библиотеку UI Bootstrap, которая является лучшим портом Bootstrap для AngularJS.

PrimeNG

Этот порт является в основном портом известного пакета PrimeFaces UI, который, по сути, является одним из лучших для экосистемы Java. PrimeNG предоставляет практически все общие компоненты и многое другое, чтобы помочь вам создать богатый пользовательский интерфейс. Это, безусловно, полный выбор и, безусловно, наиболее профессионально построенный из списка. Он находится в стадии разработки, хотя и не в бета-версии, поскольку они пытаются исправить любые ошибки или выполнить улучшения.

Недостатком этой структуры являются ее чисто тематические параметры, поскольку за более привлекательные (наподобие той, которая следует Руководству по проектированию материалов) платят. Есть несколько бесплатных, но им определенно не хватает определенной привлекательности. И последнее замечание: их документация не всегда совпадает с реальным продуктом, но это то, что они активно пытаются исправить.

Covalent UI

Teradata - компания по управлению данными и аналитике. Они начали разрабатывать набор пользовательского интерфейса, чтобы использовать его в своих собственных проектах, но они также открыли исходный код и сделали его общедоступным. Он следует за Material Design и на самом деле поставляется с очень полезными макетами, которые могут значительно ускорить процесс разработки.

Он содержит огромное количество компонентов и, возможно, лучшую документацию по всем остальным параметрам. Covalent на самом деле тоже имеет вкус Electron, так что если ваша команда работает над приложением Electron, это может принести много пользы. Если Teradata продолжит поддерживать его и поддерживать тот же объем работы, что и сейчас, Covalent станет очень серьезным вариантом, если не лучшим.

Clarity

Последний, но не менее важный вариант - это Clarity. Это продвигается как UX-решение, а не просто как фреймворк CSS. Он был создан командой VMware для использования в их продуктах, но они решили открыть его и опубликовать. Это следует рассматривать как нечто гораздо большее, чем UI Framework, поскольку их видение состоит в том, чтобы, во-первых, обеспечить надлежащие и унифицированные рекомендации по UX, а во-вторых, объединить их с популярными средами Javascript и создать соответствующие библиотеки.

Ясность как проект - фактически альтернатива Руководству по материалам Google, хотя они хотят предоставить в конечном счете соответствующие компоненты для этих руководящих принципов. На данный момент они проделали определенную работу над этим (в настоящее время работают только с Angular Framework).

Резюме

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

К сожалению, Angular Material значительно отстает от остальных в плане характеристик и готовности к производству, поэтому он вне конкуренции. То же самое можно сказать и о проекте Clarity, хотя этот проект очень перспективен, и за VMware определенно стоит обратить внимание.

Теперь, когда у нас есть ограничение на три варианта, выбор должен быть несколько проще. Библиотека Bootstrap, безусловно, имеет самую большую пользовательскую базу, и это должно иметь большое значение при выборе платформы, но ее распространение на различные группы разработчиков должно вызывать тревогу (хотя ng-bootstrap кажется подходящим выбором). Два других варианта, PrimeNG и Covalent, очень похожи.

Библиотека PrimeNG предоставляет больше возможностей и поддерживается более опытной (по крайней мере, в области пользовательского интерфейса) командой, но, библиотека Covalent обеспечивает интеграцию материалов бесплатно и из коробки, и кажется, что она скоро догонит набор функций своего конкурента. Прямо сейчас PrimeNG кажется лучшим выбором, но другие варианты действительно близки, и если их команды продолжат работу над ними, как они, возможно, у нас будет более явный победитель в этой относительно открытой области.