Ionic is considered one of the most advanced HTML5 Mobile App Development Framework for building hybrid mobile applications. Ionic Apps are based on AngularJS and Cordova, and the framework’s components allow developers to create great looking mobile apps that could match their native counterparts. While Ionic equally supports iOS and Android, the development experience (and issues) slightly diverge between the two platforms. In this article, we are going to focus on Ionic and Material Design.
Background
Ionic 1.0 was released in May 2015. Since its inception, the platform incorporated the concept of Platform Continuity which translates into Platform-specific styles. This means that developers focus on building beautiful apps which design elements will meet the user’s experience no matter what platform they are using. They can also customize the styles and settings however they see fit.
Ionic supported iOS 9 the day it was released in September 2015. Developers had to test their app and make the necessary changes. Apps still had the flat style (if not customized) and the new features of the operating system were made available for developers.
Ionic’s support for the new versions of Android however, has been controversial. While the apps worked well on Android devices, the framework still does not support (natively) the redesigned Android User Interface built around the new design language known as “Material Design”. Material Design was first seen with the introduction of Android Lollipop.
What is Material Design?
As featured on Wikipedia:
Material Design (codenamed Quantum Paper) is a design language developed by Google. Expanding upon the “card” motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
In essence, Material Design is aimed to make a consistent experience across Google Platforms, Web and Mobile applications.
Ionic and Material Design… What Are My Options
At the time of writing, Ionic does not integrate native support for Material Design for Android. However, there are different options that you can explore if you’d like to work with Ionic and Material Design today. Some of them are promising!
Angular Material
Angular Material is the implementation of Material Design for AngularJS applications. The project is backed internally by Google. It offers a wide range of UI components from the Material Design library as Angular Directives.
After you run through the demos and documentation, you will get the feeling that you can get productive fairly quickly. At first glance, it sounds like the best option for integrating Material Design into your Ionic applications.
Once you add it to your Ionic application, you will notice that some of the components require additional work (CSS or JS). You will find many workarounds online but be careful what version they mean to target. Upgrading to a new version of Angular Material may not be trivial either. I advise you to go this route, only when it’s your only option!
Ionic Material
Ionic Material (not maintained by Google) aims to bring Material Design to Ionic with no complexity. It comes in the form of an add-on, which can be easily plugged in to enhance the Ionic components. Your Ionic development workflow remains the same as this is just an extension.
The demos look very promising but the project seems to be stranded (last commit 3 months ago), maybe because it’s long overdue. It’s still a valid option if you’re okay working with a pre-release version. But, it is certainly not production ready!
Materialize CSS
Materialize CSS is a plain CSS and JavaScript framework that is based on Material Design. It is easy to use and very well documented. It has pretty much all the Material Design components you may need. It is also very actively maintained with more than 50+ contributors.
The implementation is aimed to bring Material Design to any Web Application and not specifically AngularJS applications. This means that by nature it will not conflict with your Ionic directives. However, it doesn’t officially support Ionic applications, so you are entirely on your own there. Remember, this is a CSS framework so you have complete control over the styles (Yikes! It requires jQuery)
Material Design Lite
Material Design Lite (backed internally by Google) is a lightweight framework that brings Material Design to Web Applications using vanilla HTML, CSS and JavaScript. It has a rich set of components and is also customizable with a Theme Builder. It’s also actively maintained and supports major browsers.
A few developers are working on a project which integrates Material Design Lite with Ionic. Unfortunately, it’s not in active development anymore.
Other Libraries
If you are unhappy with the above options for your next Ionic and Material Design project, then you can look at some other implementations and templates such as:
Ionic Material Design Template
Want Native Support? Ionic 2 is Coming!
Back in October 2015, Ionic Alpha was announced with official and full support of Material Design. That is Awesome! We no longer have to deal with messy workarounds and a myriad of libraries that might look encouraging, but none of them officially support a production ready Ionic application.
The Ionic 2 website states which Platform style will be applied to each platform:
Closing Thoughts
Material Design continues to rage in the Mobile ecosystem, and more and more customers are requesting support for Google’s Material Design guidelines. As Ionic developers (looking to implement Ionic and Material Design) we are currently limited to work in progress frameworks that claim to support Ionic, or to complete CSS frameworks which are far from being Ionic friendly. Drama aside, we have options, and as developers we get to select the one that seems more appropriate for the application that we are trying to build.
The future however seems very promising, with Ionic 2 scheduled to be released in a few months. We will get built-in Material Design support, with a cherry on top.
The post Ionic and Material Design, what’s the story? appeared first on Falafel Software Blog.
