Не Bootstrap единым

26 июня 2017г.  angular     ui     teradata covalent     material design     компоненты     angular material     bootstrap     project clarity     primeng     semantic ui   


Каждый раз когда создаю новый проект, по привычке начинаю ориентироваться на верстку, которую предлагает старый добрый Bootstrap 3. Каюсь, просто очень привык. Тем не менее, существует большое число альтернативных CSS-фреймворков и сборников компонентов, о некоторых из которых я бы хотел рассказать.

Меня особо интересуют фреймворки, которые хорошо уживаются с Angular-ом.


Semantic UI

Semantic UI достаточно навороченный фреймворк, который с первого взгляда очень сильно напоминает тот же Bootstrap, но при этом обладает гораздо большим количеством готовых компонентов. Официально не дружит с Angular 2+, но при этом без проблем можно нагуглить проекты вроде ngSemantic, в которых есть поддержка основного числа компонентов. В крайнем случае, можно вообще отказаться от подобной поддержки, и подключить исключительно необходимые CSS файлы к вашему Angular-проекту (как я обычно и делаю в случае с bootstrap). Все равно, вряд ли вам пригодится jQuery.

Из основных фишек, кроме разнообразия компонентов, хотел бы выделить крутую систему шаблонизации. Вы очень просто сможете создавать и переключать темы, тем самым меняя внешний вид вашего UI с "a la Bootstrap" на Material Design.

Semantic UI предоставляет большое кол-во виджетов и UI компонентов на все случаи жизни. Поддержка FontAwesome из коробки. Гибкая система сеток с разбивкой до 16 колонок, адаптивность. гибкая настройка самих компонентов (до десятка вариантов отображения одного компонента в рамках одного шаблона). Все выглядит довольно аккуратно, работает шустро и отзывчиво. Однозначно хороший способ разбавить засилье опостылевших Bootstrap-интерфейсов чем-то новым.

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


PrimeNG

PrimeNG, в отличие от того же Bootstrap или Semantic UI, уже не просто набор html-компонентов, приправленных jQuery-скриптами, а набор Angular-компонентов. Этот проект берет свое начало (как не очень сложно догадаться) от PrimeFaces UI. Если вы писали приложения на Java, то возможно сталкивались с этим набором UI-компонентов.

Данная сборка порадовала еще большим разнообразием всяких полезных компонентов, большая часть из которых не просто позволяет "сделать красиво", а еще и добавляет немало функциональности из коробки (наконец-то, без всяких jQuery). LazyLoading для панелей с большим количеством данных, удобные DataGrid-таблицы, Drag'n'Drop из коробки, загрузка файлов, графики, галереи, десятки input-компонентов и многое другое! Даже перечислять все не хочется, лучше сами пройдите по ссылке и полюбуйтесь на это изобилие (тут Bootstrap 4 залился красной краской) вживую.

Разумеется, в наличие есть уже привычная адаптивная grid-система, с помощью которой несложно собрать Layout вашей мечты. В качестве иконок выбран любимый многими шрифт FontAwesome. Каких-то существенных недостатков я пока не обнаружил. Возможно, нужно просто сперва попробовать собрать на нем какой-нибудь проект и что-то вылезет во время разработки, но не думаю, что это что-то будет критичным и неисправимым.

Отдельно хочу отметить, что PrimeFaces UI существует в виде ReactJS компонентов - PrimeReact. Оптимус Прайм одобряе.


Angular Material

Набор компонентов Angular Material 2 довольно сложно пропустить, так как Google довольно активно его продвигает. Одно время призыв использовать эти компоненты находился на самом видном месте стартовой страницы angular.io. Правда в то время они были еще в бете и работали достаточно сыровато. С тех пор много воды утекло, но озирая количество новых компонентов и их скорость работы, я не могу сказать, что разработчиками было проделано столь же много работы.

Если сравнивать с остальными наборами, то большого разнообразия вы тут не найдете. Менее десятка контролов для форм, не слишком гибкая в настройках сетка, и куча анимаций, которые походу и являются главными виновниками некоторой "тормознутости" MD-компонентов. Можете упрекнуть меня в излишне медленной системе. Но на мой взгляд, отзывчивость UI является основным критерием при выборе, а на красоте (в виде анимаций) можно и сэкономить.

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


Teradata Covalent

Разработчики из Teradata для своих внутренних нужд создали свой набор компонентов для свеженького Angular-а, обильно приправили его Material Design-ом, назвали все это Teradata Covalent и выложили на всеобщее обозрение. Посмотрим, что получилось.

А получилось достаточно интересно. В наличие неплохой выбор компонентов, каждый из которых соответствует гугловским гайдлайнам. Тут, как и в PrimeNG, имеются не только визуальные компоненты, типа кнопок и слайдеров, но и настраиваемые Data Tables, для удобного отображения данных, подсветка JSON-а, компоненты загрузки файлов, кучка полезных Pipe-ов (это реально круто, в других наборах я подобного не видел), готовые Layout-ы, адаптивная сетка и много чего еще, вплоть до собственного HTTP-сервиса.

В качестве иконок в этот раз используются Material Icons. Есть готовые цветовые палитры, продуманная типография, а также полезные css-хелперы. Люди, привыкшие к Bootstrap, должны почувствовать себя в своей тарелке.

Из минусов могу отметить доставшуюся по наследству от Material Design компонентов общую тормознутость интерфейса и пониженную отзывчивость на действия пользователя. Что, возможно, излечится в Teradata Covalent само по себе, если разработчики Angular Material проделают полезную работу в этом направлении.

В целом, неидеально, но достаточно интересно, стоит добавить в закладки и следить за развитием данного проекта.


Project Clarity

Последний в данной подборке сборник Angular компонентов от ребят из VMWare — Project Clarity. По первым ощущениям, не слишком перегруженный и довольно шустрый в плане отзывчивости. Добились они это похоже тем, что не стали превращать каждый свой компонент в компонент Angular-а. Вы можете добавить вполне себе обычный набор html-элементов, повесить нужные классы и оно превратится во что-то более полезное. 

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

Разнообразие компонентов хорошее, больше всего мне понравились вариации Datagrid, достаточно много вариаций использования. Input-ы форм отзывчивые и внешне очень похожи на те, что используются в Material Design. Готовые Layout-ы выглядят с одной стороны достаточно просто, с другой, совершенно не перегружены излишней мишурой, любители минимализма должны оценить.

Адаптивная сетка в данном проекте практически такая же, как и в третьем Bootstrap. Поэтому разберетесь достаточно быстро. Единственное, добавился xl-размер, а размер отступов 24px (по 12px справа и слева).

Иконография представлена не шрифтами, а собственными svg-иконками, в обычном и solid-начертании. Не слишком богатый выбор, по сравнению с FontAwesome, но смотрятся они приятно. Есть заранее подготовленные цветовые палитры, если вы сами не можете решить, какие сочетания цветов будут выглядеть наиболее удачно.


Из представленных выше наборов, ощущение "хочу делать новый проект на Angular c этим UI" появилось при знакомстве с PrimeNG и Project Clarity. Teradata Covalent я бы стал использовать только на таком проекте, в котором явно нужны те компоненты, которые есть только в данном наборе, но отсутствуют в других. Semantic UI очень хорошая альтернатива Bootstrap-у. Material Design, на мой взгляд, требует серьезной работы по оптимизации и увеличению производительности. Ну или если вы работаете в Google и у вас нет свободы выбора.