Choosing Angular UI components for Enterprise development
What you need to know before making a long-term decision.
Few words about a project we upgraded
Hello, my name is Sergey. I’m a full-stack software engineer with the initial .NET background, once headed towards front-end web development and UI engineering.
1 year ago, after few really tough attempts to upgrade messy CSS during UI redesign, eliminate old technologies, bring more maintainability and stop development-to-production time growth, we decided to upgrade front-end technology.
It wasn’t a hard decision to choose Angular as a core framework, as it’s more suitable for enterprise development than React or Vue.
So, the real challenge was to choose a UI components library. Why?
- In spite Angular has a relatively young ecosystem, there are already several large UI frameworks out there
- All of them are somewhat immature, so it’d be almost impossible not to face some breaking changes in future
- Libraries do offer plenty of different UI components, but not all of them are functional enough, and not all libraries offer a complete set of components, which are required for an enterprise development
Creating a short-list of UI libraries
Before you even start looking at particular UI libraries, you need to investigate your existing system to understand your needs.
- Create an inventory of components you already use in your system
- Identify which functionality of existing components is absolutely must-have, and which isn’t.
- Which functionality of existing components is currently missing or needs to be improved
After getting this data, you may start going through all available UI libraries and check if their offerings are close to what you want to get.
I went through the “Resources” section of Angular.io website and quickly eliminated most of the offerings due to dated/poor visuals, low performance, unavailability of a Datagrid and other enterprise components, and some non-official Material libs.
So, after this initial investigation, I came up with a short-list of 3 potentially suitable UI frameworks:
- Telerik Kendo UI for Angular
- Angular Material
- Vmware Clarity HTML/CSS framework with Angular components
Telerik Kendo UI for Angular
This one was almost the most obvious and natural choice, as we were already using Kendo components.
- Very large set of UI components, including advanced data grid with filtering/search/grouping/stacked columns/sticky columns
- Good performance for most of the components (though it may seem slow in demos on their website, it will work faster in a compiled app)
- Themes, customizable CSS, ability to easily define your own color palette
- Relatively clean UI
- Good components/API documentation with examples
- Globalization/accessibility features
- Product roadmap
- Ability to reuse some frontend code if you’re upgrading from JS version
- Advanced support
- Very generic UI design of stock components (though, this may be a good thing for some projects)
- No UI guidelines, no Sketch/Figma/XD/etc. UI kits. Upd.: they promise something soon.
- Though Theme Builder is a nice-to-have tool, it allows you to customize only very limited set of colors. You’ll often end up thinking about attaching SCSS sources and customizing them, but it will make you build process MUCH longer and much more complex.
- SCSS code is very complex, full of dependencies and hard to customize. Themes Github documentation is outdated (at least, it was at the moment when I was doing all that). It will be hard to get anything useful from support on this topic. If you’re hoping to use Kendo SCSS together with Bootstrap 4 scss utils and compiling it manually — PLEASE DON’T. A bootstrap theme has a lot of its own independent variables and doesn’t utilize all Bootstrap variables.
- The material theme was very bad a year ago. One of the worst implementations I’ve seen ever. It became better during last year, but it will never be identical to the original, as a visual structure of components is defined first and foremost for the default theme, and then it’s being used as a base for other themes. So, many components like MatTable or DatePicker will look completely different. Not bad, but different, thus you won’t be able to use Material UI kits with Telerik’s version of Material-styled components.
This UI library will be perfect for enterprise development, which is not very UI-focused. If you’re developing some closed system, which isn’t gonna be accessible for customers from the outside world, or you don’t care much about your visuals at all — this is your obvious choice.
Prototyping tools: 0/5
After playing with Telerik Kendo UI, I switched my attention to the next option — a UI framework by Google.
While it’s gonna be a good choice for the majority of relatively small projects, it may not be suitable for you due to a relatively poor set of components. If you need Table component with built-in individual column filtering and row details, sticky/stacked columns, built-in grouping, etc. — you might want to consider other option, or, at least, test MatTable component on some real-world test case.
- Pretty good set of UI components, which will cover most of your tasks
- Good performance
- Customizable components, ability to naturally integrate your own custom components
- CDK, which is allowing you to add advanced behavior to your own custom components
- Library roadmap is available
- The huge development community, lots of examples, tons of learning courses and videos from conferences
- Nice and clean UI design
- Huge design community, loads of design resources: icons, UI kits for almost any popular prototyping tool — Sketch, Figma, Adobe XD, Framer, etc. This is giving you an opportunity to upgrade the design process in your team and get a big advantage over your competitors. I’d recommend this set of design resources by Roman Kamushken, which will cover most of your tasks: Material Design UI Kit, Android UI Kit, Graphz UI Kit for mocking up charts, Websy UI Kit for rapid landing pages prototyping and many more.
- Open-source means you can go and read the source code of the entire library and documentation website, submit pull requests, fork primary repository and make your own custom version of a library.
- Lack of advanced components. You may love this library, but it may just be not suitable for you if your list of must-have components contains something that can’t be found in Angular Material, or can’t be simply interchanged with already existing components.
- Lack of documentation for some components and CDK entries
- UI design may not be Enterprise-looking enough.
This UI library will be perfect for an enterprise development, which is tightly integrated with external customers pages, company’s website, mobile apps.
Choose this framework if you’re ready to accept a limited set of bundled components or have resources to fill those gaps by yourself.
Prototyping tools: 5/5
When I first saw the Clarity design system, I simply fell in love with it.
Clean, beautiful, restrained — what else to desire for an enterprise UI?
It was looking like a huge design upgrade for a Bootstrap UI, which completely eliminated its generic, aging and non-professional look, but kept it clean, serious and restrained aesthetic.
But what about features?
I found them almost as limited as ones of a Material library, but with some dealbreaker differences — small details in every component, which were often partially closing the gap between the functionality of Material Library and Kendo UI:
- Datagrid has individual column filtering and row details functionality
- The Datagrid filter is customizable — you can create a custom reusable filter/sorter algorithm, add a custom component for a filter UI, and get anything you want.
- After a quick investigation, we found that Clarity Datagrid is perfectly capable of loading a dynamic set of columns, and it will work fine with the Show/hide column menu
- Drop-down menus have separators
We built 2 proof-of-concept apps — one using Telerik Kendo UI, another — using Clarity.
We found out that Clarity components API was much cleaner and easier to use than API of Kendo components, plus all critical functionality we needed was working fine with Clarity.
Long story short, we’ve chosen Clarity as our primary UI library, so let me tell you its pros and cons, based on 7 months of using it.
- Clean, modern, but calm and restrained UI. Very enterprise-friendly looking and not as widespread as Material design
- Limited, but capable for the majority of enterprise tasks set of UI components
- Good free support via Github issues. The community isn’t as large, as for Angular Material, but you will get an answer very fast in most cases. The team listens for feature requests and provides weekly updates with bugfixes and new features.
- Very good performance and overall UI responsiveness. In most cases, I’d say, it feels faster and more reliable, than Angular Material
- Documentation is good. It contains code examples and UI guidelines for each component.
- If documentation is not enough, entire Clarity website code is available on Github, as well as full framework source code.
- Datagrid offers compact rows and horizontal scrolling on small screens, which is one of the best implementations I’ve ever seen. It allows displaying all the data even on a mobile screen, without hiding any columns, truncating data, or breaking grid layout. Also, Clarity offers a lightweight table component for situations when you don’t need the full power of a Datagrid.
- Clarity offers a few unique navigation components — header+subnav for app layout/navigation with 2 levels of router hierarchy support, which transforms into mobile UI on smaller screens. If 2 levels of core hierarchy are good for you-you’ll get full application layout both for desktop and mobile with just a few lines of code. Also, for more complex scenarios, you’ll get tree-like Sidenav and collapsible VerticalNav components.
- Dark theme is available!!!
- Few more unique components: Wizard, Login Page, Signpost, separate Table component (both vertical and horizontal), 3 types of form controls layout: horizontal, vertical and compact.
- The design community isn’t large (or even big), but you have enough resources to start with: Clarity team offers Sketch templates with all components for both Light and Dark theme, plus separate template with Clarity icons. Also, there’s even better 3-rd party UI kit, created by me, available for the Light theme for Figma. Check it out in this article or 🛒Purchase Clarity UI kit for Figma through my Gumroad store.
- Clarity relies on open-source Metropolis font, which is available only for Latin languages. If you’re using Cyrillic, Arabic or other non-latin sets of symbols, you’ll have to search for a suitable font, which won’t ruin Clarity aesthetics and won’t break components or UI kit. Clarity CSS contains 2 fallback fonts — Avenir Next and Helvetica Neue. Both are not free, so make sure you’ll take care of proper licensing of those fonts.
- Clarity is a pretty opinionated library. If you don’t like how a particular feature works, you’ll probably have to deal with it or wait for the next wave of feature upgrade. For example, you can’t close Datagrid column’s filter by clicking outside of its popup, but you’ll get huge filtering redesign in future (though, this may take a lot of time to be released). There are some small arguable decisions or incomplete functionality in Clarity.
- The library is relatively mature, but not stable. Some updates introduce small breaking changes, and more of them are coming with a next major release. This is not something really catastrophic, but it will require additional time on fixing you codebase during some updates. The best example for this — new Form components, which are in Beta right now. Current components will be deprecated for removal in v2.0. New form controls are getting nice additional features like support for vertical/horizontal and compact layouts and extended support for validation messages, so if you already have several pages using old components, you’ll have to switch to updated components eventually.
- Some components lack nice-to-have features: DateTime picker doesn’t offer range selection; DataGrid doesn’t offer stacked/sticky column headers, frozen columns or header, and drag’n’drop for rearranging columns. Custom cell content may not work good in some situations, especially when cell content is wider or taller than it would be with just a text content; Vertical nav may not work well with drop-down menus in mobile view; The select component doesn’t offer text input for filtering drop-down or adding new value. We decided that we can live without such features, but make sure that this will work for you too.
- If your scenarios include restoring a state of some complex components like Datagrid, you may face some issues.
- Design guidelines and templates for Sketch and Figma are really nice to have, but Clarity clearly lacks any real-world examples. All you have — is their documentation website.
- Default margins/padding is not something to use blindly. You will always have to be careful about your spacing choices, which is what you’ll get with any other UI library. Design system doesn’t mean you won’t have to care about this.
Clarity UI framework is definitely one of the best on a market, but its limitations and incomplete feature set may be a no-go for your circumstances.
If you’re fine with the feature set, and it’s okay for your managers to spend time occasionally on small upgrades during the lifecycle of your app — you can always freeze NPM package version and test new Clarity releases manually and with automatic UI tests.
Prototyping tools: 4/5
The angular ecosystem is surprisingly good in terms of UI libraries choice for Enterprise apps. Surprisingly better than React ecosystem in this department.
I can’t definitely say that any of a reviewed libraries will work for everybody though. Each has its own strengths and weaknesses, so it’s up to you to decide.
Thanks for reading! Subscribe to my blog, send me an email or add me in Telegram (@sergey_durnov).
Have a good time with Angular and don’t forget to share you opinions! Best regards, Sergey.