Developing SPA with Angular Material

Fast, convenient, tricky. These are the first three words that come to mind if someone asks how it feels to develop with Angular Material. The project’s documentation states the following right on the first page: “For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.” Let’s take a close look at whether it is 100% true based on our extensive experience of developing SPAs with Angular Material here at DSR Corporation.

 Fast

Well, let’s drop all these subjective metrics and talk features:

• Angular Material is a flex-based framework which provides an impressive set of tools to manipulate the layout. What does it give us? We can drop a huge amount of CSS purposed to position our DOM elements the way we want. Position inside a block is set with well-documented directives right in our HTML, which makes it quite easy to read.
• Built-in nice animated dialogs.
• Built-in services and directives to work with font-icons and SVG pictures with ability to switch between different icon sets and modify the icon style quick and painless.
• Built-in toasts.
• Mobile-friendly date picker.
• Basic support of swipe actions.
• Resource-friendly list that reuses DOM elements to render long scrollable lists in order to improve performance.
• Built-in tooltips.

 Convenient

As its name suggests, Angular Material implements Google's Material Design Specification. So if you want to follow Google’s guidelines you’ll find that many things work right out of the box as expected. Just keep in mind that this is one of many ways to implement it. Get ready to be flexible in your design and to alter it in favor of keeping your code clean. With great power comes great responsibility. With many built-in features, directives, services, animations, and CSS’ rules comes a hard-to-modify predefined behavior. We are not saying it’s impossible to change the way things work in Angular Material, but it would take another dirty hack to do it.

After all, convenience is a very subjective thing so here are some key features that should make your life easier:

• Adjustable autofocus for dialogs and navigation bars
• Beautifully animated buttons
• Custom designed checkboxes
• Custom designed selects
• Built-in chips
• Built-in complex menus and navigation bars
• Animated input containers with support of ngMessages for error displaying and built-in text’s length counter
• Custom designed radio buttons
• Built-in sliders
• Built-in switches
• Animated tabs with custom actions on select and deselect

Tricky

Here comes a fly in the ointment. Since Angular Material is pretty young, it has all expected “puberty” problems. At the moment of writing this article it has 1545 open issues and 90 pending pull requests. That’s for a good reason: as long as it works fairly good under Chrome, it starts showing teeth under Firefox and constantly fails here and there under Safari, especially mobile Safari. If your target platform is Mac OS, you still can keep your code more or less readable, but cascade of hacks can bring your app to its knees in case you must make it work under OS X. Not to say that it’s not going to work in the end, but you will have to sacrifice some built-in features or spend hours making custom overrides, which kind of undermines the whole idea behind using Angular Material.

To sum up all of the above we can say that Angular Material is a promising powerful tool that can help you a lot and drastically improve your performance. Just keep in mind its current limitations and issues in order to not build an unmaintainable monster.

If you would like to learn more, have a project in mind, or want to share some comments, please connect with us at contact@dsr-company.com.