Angular with Style - Comparing UI Frameworks - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development
Blog page

There are a lot of great UI frameworks today that make scaffolding your web app a breeze. With all of these options, though, it can sometimes be tricky to find the right one for your angular project. We put together a quick comparison of a few of the frameworks we have used.

Materialize

Materialize provides a comprehensive set of beautiful components that cover almost any functionality you will need in your website. The documentation covers the functionality of each component very well and the site looks great!

 

Angular users are also in luck, as there is an Angular module (developed separately from Materialize itself) that facilitates implementing the framework in your Single Page Application. Unfortunately, the documentation for the Angular module is limited because it is not created by the Materialize team (in fact it was created by just one person) but with some perseverance, figuring out how to bind data to the elements for different tasks turns out to be a fairly simple task.

Ng-Bootstrap

Bootstrap is the go-to UI framework for many independent developers, people learning to code, and even professional development teams. Ng-Bootstrap takes that framework and wraps it in a very easy-to-use Angular library that just plain works. Documentation is simple and straightforward and the library is so easy my grandma could us it.

While this library is very clean and easy to use, you will probably find that it doesn’t have a lot of important components that you are going to need for your app, especially when you begin to scale. This may be an issue in almost every framework, but Ng-Bootstrap at this time doesn’t provide a lot of basic styles out-of-the-box. Also, one reason big companies don’t like to use bootstrap, in general, is because it looks too generic. If everybody used the same styling it would be a bit tough to stand out.

Bulma

If you have looked into any UI frameworks recently, you have probably seen or heard of Bulma. Bulma is a hot new framework that has a ton of community support. The layouts are unique and the components and elements look beautiful. Documentation is fantastic as well.

A great benefit that Bulma has over the other frameworks mentioned is modularity. Each component and element is split into different UI modules so you only need to add the parts that you need to your app, resulting in faster load times for users. This has also sparked the creation of Bulma “extensions” from the community that fill the gaps they feel are present in the framework. These extensions all use the core Bulma CSS that is required for any Bulma component.

The only downside with Bulma may be that there currently exists no reliable Angular module, but integrating the styling into your app is not too difficult, and because most of the elements are just CSS classes, you can easily use Angular’s built-in directives like ngClass to get the right functionality out of each element.

Wrap Up

When working in web development, or even just development in general, frameworks are going to have their pros and cons. It is hard to say which of the UI frameworks is better because they have all been useful in different situations. Picking a framework usually comes down to personal preference. What are your favorite UI frameworks?

 

Check Us Out

We regularly host meetups about the technology we like to use, so stop by our Meetup page or Eventbrite and sign up. If you’re interested in talking or hearing about a topic, let us know!

Meetup

The Washington DC Ionic Framework Meetup

Washington, DC
109 Members

This is a group for anyone interested in the Ionic Framework for web and mobile application development, including  PWAs or Progressive Web Apps… This includes related techn…

Next Meetup

Working with GraphQL & Ionic

Tuesday, Sep 18, 2018, 6:30 PM
1 Attending

Check out this Meetup Group →

 

Eventbrite

Blast From The Past

We have blog posts for other past meetups. Read them!

Text to Speech and Speech to Text in the Ionic Framework

Easy Virtual Reality with A-Frame

Getting Started with Unit Testing in Ionic 2+ Apps

NgRx State Management with Inclusive Innovation Incubator