Angular Material vs. Material Design Lite
https://scotch.io/bar-talk/angular-material-vs-material-design-lite
In this article we’re going to explore the options that Google provides us when implementing Material Design in our websites & apps. While both Angular Material and Material Design Lite follow the Material Design specs, each library implements it in a different way.
It’s important to mention that both libraries have decent online documentation. They also have fast releases cycles and good support on github and related forums.
It’s also important to mention that both libraries, namespace their classes with the md- or mdl-prefix. Which is a good practice that helps preventing classes conflicts. Unlike the classes provided with bootstrap (btn for example).
#Material Design
Material Design is a design language developed by Google. It aimed to make a consistent experience across all Google apps & platforms (YouTube, Android, Play, Inbox, Gmail, etc.).
Google announced Material Design at the 2014 Google I/O conference.
Material Design emphasizes on responsive interactions, mainly through ripple effects.
Examine how the Material Response makes the element responsive to our touch input:
Source:https://www.google.com/design/spec/animation/responsive-interaction.html
Material Design also emphasizes on shadow effects to convey depth.
Watch the video again and notice how the element is being lifted on touch.
After the success that Material Design received with the Launch of Android 5, which was the first Material Design implementation, Google decided to release SDKs that allowed developers to integrate Material Design in their apps. Hence,Angular Material and Material Design Lite.
It’s not a competition between Angular Material and Material Design Lite. Google released those 2 SDKs so they can give us more choice depending on our use case.
#Getting started with Material Design Lite
Since Material Design Lite does not have any dependency, it’s going to be easy to set up.
You can use your favorite tool to grab its source code.
bower:
bower install material-design-lite --save
npm:
npm install material-design-lite --save
Or you can just browse to getmdl.io and grab the source code.
Next, we need to create an index.html file and include MDL’s CSS file and JS files:
<html>
<body>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.3/material.min.js"></script>
</body>
</html>
Now we can immediately use any of the MDL components.
Let’s say we want to add a raised button with ripples, we just need to add the following to the body:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
Although MDL has a Javascript library included, in most scenarios you won’t need to use Javascript at all. You only need to use the javascript library to register components when dynamically injecting templates.
componentHandler.upgradeAllRegistered();
Material Design Lite offers a variety of components such as buttons, cards, tabs, menus, sliders, text fields and more..
Here are some other elements using Material Design Lite:
Input
Checkboxes
Tabs
#Theming
Next, we need to be able to apply our brand’s colors to Material Design Lite. We can customize Material Design Lite from the Customize page. They have a cool widget that lets you choose complementary colors according to the Material Design color palette specs. And then download the corresponding CSS and include it in our project, or you can simply link to the CDN.
#Getting started with Angular Material
Angular Material depends on angular, angular-animate and angular-aria. If you’re using bower ornpm to manage your dependencies, then they will be automatically installed alongside angular-material.
Let’s start by grabbing the source code for Angular Material.
bower:
bower install angular-material --save
npm:
npm install angular-material --save
Or if you’re not using any command line tool to download your dependencies, then continue reading and use the CDN links provided below.
Let’s setup the index.html page:
<html ng-app="app">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Notice that we added ng-app="app" to our HTML tag because we need to bootstrap our angular app inside main.js
(function(){
"use strict";
var app = angular.module('app', ['ngMaterial']);
})();
We added ngMaterial as a dependency to ourapp module. And now we we can get started and add another raised button with ripples, but this time using Angular Material:
<md-button class="md-raised">Hello There!</md-button>
Notice that adding a button is much easier using Angular Material because we have access to all the available directives. Directives make it easier to use Material Design functionality without having to worry about the underlying HTML structure and classes.
Here are some other elements in Angular Material:
Input
Dialog
Tabs
#Theming
Angular Material handles theming way differently than Material Design Lite.
It exposes $mdThemingProvider in the config part of the bootstrapping process. Which allows us to set 3 main color palettes: Primary, Accent and Warn.
(function(){
"use strict";
angular.module('app').config( function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('indigo')
.accentPalette('grey')
.warnPalette('red');
});
})();
For more details on theming, check out Angular Material theming docs.
#Summary
I gathered the most important information to come up with the below comparison. I don’t personally consider the minified JS and minified CSS as an important factor. But I’m sure that it might interest some readers.
Angular Material depends on Angular and two angular modules: angular-animate (ngAnimate) and angular-aria (ngAria). Whereas Material Design Lite has no dependencies.
ngAria provides accessibility support for assistive technologies, such as screen readers. It automatically sets aria attributes using the corresponding angular directives. For example, it sets the aria-hidden attribute according to the value of the ngShow attribute. Material Design Lite does not have any internal accessibility support, but you can take care of it manually.
Being able to use directives to abstract the UI layer is a major plus in my opinion. I prefer writing the following
<md-button>Get Started</md-button>
instead of
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Get Started
</button>
Angular Material supports more than 30 components, whereas Material Design Lite supports about 15. That’s because the goal from Material Design Lite is to remain as a lite library, rather than a full fledged UI framework.
Here’s a table that summarizes the main differences between the 2 alternatives:
| Angular Material | Material Design Lite | |
|---|---|---|
| Dependencies | Angular, ngAnimate, ngAria | – |
| Directives | Yes | No |
| minified JS | ~175KB (excluding dependencies) | ~59KB |
| minified CSS | ~175KB | ~120KB |
| Accessibility | Built-in (ngAria) | – |
| Icons Font File | Yes | Yes |
| Components | ~30 components | ~15 components |
#Decision Matrix
The most important question that you should ask yourself is the following: Are you already using AngularJS? Or are you willing to use it?
If the answer to any of those two questions is Yes, then Angular Material is probably the way to go.
Here’s an elaborate matrix that explains all the different scenarios.
| Using AngularJs? | Complex UI? | Preference |
|---|---|---|
| Yes | Yes | Angular Material |
| Yes | No | Depends on your experience |
| No | Yes | Material Design Lite |
| No | No | Material Design Lite |
Another important factor would be comparing thecomponents available by Angular material to thecomponents available by Material Design Lite. Because sometimes there’s a specific component that matters a lot and of course, you don’t want to reinvent the wheel.
#Grid & Layout
| Angular Material | Material Design Lite | ||
|---|---|---|---|
| Desktop | percentage (0-100) | 12 columns | |
| Tablet | percentage (0-100) | 8 columns | |
| Phone | percentage (0-100) | 4 columns | |
| Uses FlexBox | Yes | Yes | |
| Vertical Layout | Yes | No | |
| Vertical Centering | Yes (out of the box) | No (needs manual implementation ) | |
| Flex order | Yes | No | |
| Advanced | Yes | No |
Angular Material’s Grid is much more powerful than Material Design Lite’s grid. Because Material Design Lite is meant for less complex UIs. Angular Material offers a wide range of features when it comes to layouts. You can specify if a layout is horizontal (default) or vertical. This is all done using flexbox. You can also specify child layout alignment, for example center center or space-between center. Check out the official documentation.
These are extremely helpful when building complex dashboards and/or advanced page layouts.
#Browser Support
Browser support is something that I want to expand on.
Both Angular Material and Material Design Lite use the latest and greatest of CSS (flexbox, calc, etc.) which means they both need evergreen browsers to work perfectly. Evergreen browsers are browsers that auto-update whenever a new version is available.
Chrome, Firefox, Safari, Opera and Edge (Available on Windows 10) are all evergreen browsers.
After running quick tests using Internet Explorer 10 and Internet Explorer 11, I noticed that all components are expected to work on IE10 with a downgraded experience. But because both grids rely on Flexbox, they might not work on IE10.
For that reason, I’d recommend you setup an unsupported browser page to notify all Internet Explorer 10 users. You can add the following to the of your page:
<script type="text/javascript">document.location.href ='https://browser-update.org/update.html'%lt;/script>
#Polymer & Paper Elements
Polymer is a library that allows us to use Web Components, even though some APIs for Web Components are missing in some browsers. So it includes a lightweight shim for Web Components.
If you’re wondering what Web Components are, you can think of them as Angular Directives, that work without the need for Angular. In other terms, it allows us to bundle markup, styles and Javascript into custom elements. Say for example:
<google-map latitude="37.790" longitude="-122.390"></google-map>
Paper Elements are an implementation of Material Design using Polymer.
So Paper Elements are indeed a third alternative that I wanted to hold off until the end of the article.
You can consider Paper Elements to be the most advanced compared to Angular Material and Material Design Lite. But if you feel like learning Web Components, then I’d recommend giving it a try.
#Resources
Below are a list of useful resources when working with Angular Material or Material Design Lite.
- Material Design Lite website: getmdl.io
- Angular Material website:material.angularjs.org
- Polymer Project polymer-project
- Paper Elements paper-elements
- Material Design specs
- Material Design color palette
- A tiny angular wrapper on top of MDL:angular-material-design-lite
- Using Laravel & Angular? Laravel5 angular material starter
- Ionic Material Design Lite ionic-material-design-lite
- Quick starter for Angular Material material-start
#Conclusion
It turned out that Angular plays an important role when choosing between Angular Material and Material Design Lite. But we also saw that other factors can affect our decision. For bigger projects with more complex UI, Angular Material is much more powerful. Especially with the separation of concerns that you get from Angular.
As a conclusion, we can see that Angular Material is more suitable for bigger projects with complex User Interfaces, whereas Material Design Lite is more suitable when you just want to get started quickly with minimal complexity.
Feel free to post any questions or feedback in the comments, I’d be happy to answer!