Choosing A UI Framework — Angular 8.0

Starting with a new project is fun, easy and extremely confusing. SO many dashboards, some free some are worth paying for. But no, you want to choose the UI library on your own. That’s cool.

I have built many websites and dashboards with a lot of different “best” UI kits ( with Angular and Vue). Each library promises the best components with the most seamless mobile friendly animations and etc… So confusing, so much looks the same, why choose one over another. Here are some questions to ask your self before choosing, I wish I had when I went though the same process.

1. What are the most repetitive components you think your app will use?
   So lets say we are creating a “ToDo ”app (obviously). An important component will be the date/time picker right? There for its important to make sure that your date component is as configurable as can be, A more dynamic component is more important than how to combines with the UI of the site.
2. What types of components are you going to use?
   For some reason, for the life of me I have never used it, a lot of UI kits have a timeline component (its cool? I guess). Is this something you need? or is it just a cool component you are trying to force into your app? Remember, Adding a new component element will effect bundle size (even with IVY on its way).
3. Who is your target audience?
   This sounds funny, but the pitfall of UI kits is that we as developers have a better intuition when it comes to the logic of the view component. we aren’t as phased from a new refresh look, but others might. If your product aims at the insurance sector or car services, a more classical old school design might be the better choice than a cutting edge super slick UI ( I’m looking at you Ant design, which I love to abuse so much).
4. How important is the mobile view?
   Even if today 80% of traffic is mobile. Maybe your app will not be used a lot on mobile. In this case, you can put less regard on the mobile view and focus on the full screen view.

When it comes to Angular there are the main UI libraries : Material-Angular / Ant Design of Angular / NGX Bootstrap / NG-Prime

All these are highly recommended. But don’t be hasty, each of these are vastly different in design and answers all the questions above in a very different manner. If you answer these questions truthfully you will get a different answer than you thought. There are always better things and worse things in each framework, for example I despise the stepper component in Material Angular but love its expansion panel. But if I don’t need an expansion panel, I should not force it into my app. I will just look for an UI kit with a better stepper and worse, if any at all, stepper component.

This Little article may seem funny at first, But as an app grows those small things you thought might not be a big difference will become the difficult parts of your webapp.

Good luck to you all