Вибір фреймворку 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, безумовно, має найбільшу користувальницьку базу, і це повинно мати велике значення.