Triple Threat Match: Angular Material V.S Ionic 2 V.S Onsen UI

/ September 4, 2017

Two months ago, a fresh graduate developer started his project at one of the reputed financial company in Kingdom of Bahrain. On his first day he was assigned a mobile development project that should consolidate all the company’s mobile apps into one single app. The challenge to him of course was, what Frontend framework should he use? That fresh graduate came to us with that question and we promised to answer that question with a blog post at our website launch, so here we are, we are answering his question as our launch article.

Before we get down to the answer, its worth mentioning that we and him had many meetings discussing the nature and requirements of the app. Those meetings narrowed down the frameworks we have to select from to Angular Material, Ionic2 and Onsen UI. In our research for the answer we also examined options like Xamarin, and native script. The criteria for selecting a framework were:

  • Performance: The framework needs to delivery a performance as smooth as possible when compared to native apps.
  • Learning Curve: The developer had very little time to learn a framework.
  • Fastest framework to bootstrap the project: Due to the time constraint, the candidate framework should have minimal steps to bootstrap the project and start focusing on the main problem it self.
  • supporting latest platforms user interface features out of the box (e.g. pull to refresh).

Now that we had our criteria in mind, lets examine the candidate frameworks.

AngularJS Material


Directly from their website

“AngularJS 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”.

AngularJS Material supports the following user interface components out the box:

  • Autocomplete
  • Bottom sheet
  • Chips input
  • Cards
  • Floating Action Button(FAB)
  • Progress Bars
  • Side Navigation
  • Tabs
  • Swipe Events
  • Toast
  • Whiteframe

That is some good components list, but it lacks the following:

  • Pull to referesh
  • Animations for page transitions
  • Content Slider
  • Notifcations (Badges)
  • Segment
  • Search Input
  • Popover.
  • Uses Internal theme template provider of AngularJS

The outcome

We tinkered around with the angularJS Material and built a sample app using the framework. Here is the outcome according to the criteria we posted:

  • Performance:We noticed a lot of hiccups on the app when tried on a Huawei P10 which is a high end device. If we have to give it a rating, it would be 7/10.
  • Learning Curve & Time to bootstrap: AngularJS Material is based on AngularJS, we were able to start the project only 2 hours after reading the guide and demos on the website.
  • Supporting latest platform interface features: this is another aspect where AngularJS Material stays behind the other two. In today’s apps, you cannot live without features like pull to refresh, popovers, and content carousels.

Although the framework failed our criteria test, its worth mentioning that the guys behind AngularJS Material are working on Angular Material 2. You can take a look at the project’s Github page for latest news & Updates.

Ionic 2

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

Below are the supported user interface components out of the box in Ionic:

  • Action Sheets
  • Badges
  • Cards
  • DateTime
  • Floating Action Button
  • Gestures: (Tapped, Pressed, Panned, Swiped)
  • Amazing Lists support
  • Popover
  • Searchbar
  • Slides(Carousel)
  • Tabs
  • Toasts
  • Pull to refresh

When we examined the ionic framework, we could not find any lacking features, at least considering our requirements.

The outcome

We built the same app that we built in AngularJS Material and made it go through the criteria above. Below are the result of the Ionic framework testing:

  • Performance: The app performance difference between Ionic and AngularJS Material was very marginal. Very little hiccups have been noticed, but overall performance of the application is a 8.5/10.
  • Learning Curve & Time to bootstrap the project: Ionic 2 is built on Angular 2, which has a complete difference syntax compared to AngularJS. Learning Angular 2 was a bit of a hiccup for the test.
  • Supporting latest platforms features: Ionic 2 was right on target in this aspects. It supports all known features.

Ionic 2 was one of the selected candidates for final comparison. Next up is the last in our list, Onsen UI.

 

Onsen UI

Framework agnostic. Written in pure JavaScript. It is the most beautiful and efficient way to develop HTML5 hybrid and mobile web apps.

What does framework agnostic mean? It means Onsen UI can work independently from your Javascript framework of choice. Do you like working in native javascript? AngularJS? Angular 2/4? VueJS or reactJS? that is right, Onsen UI can support them all, which makes it the best frontend framework to work with, especially if your task is to facelift an existing app built in HTML5.

We will not list the frontend user interface components that Onsen UI supports as they are identical with the Ionic ones. We will move directly to the outcome.

The Outcome

Developing the same app again with Onsen UI lead to the following outcome:

  • Performance:Ionic and Onsen were both close to each other with Onsen UI being slightly better. We would give Onsen 9/10 when it comes to performance.
  • Learning Curve and Time to bootstrap the project: Thanks to the fact that Onsen UI is framework agnostic, learning curve is minimal and bootstrapping the project is minimal as well if you are already familiar with one of the javascript frameworks or if you prefer the native javascript way.
  • Support for latest frontend UI: Like Ionic, Onsen UI supports all up to date user interface features to their respective platforms. In fact, Onsen goes further by providing the ons.platform(‘android’) which transforms the ui look and feel to the respective platform user experience.

Conclusion

Selecting which framework between the two candidates, Ionic 2 and Onsen UI is a very tough one. Both provide latest user interface features, both are great on the performance end, but our personal recommendation goes to Onsen UI because if its framework agonstic feature, the way it handles switching between themes (android/ios/even custom themes), and the navigator component which supports Tabs navigation, sliding menu, and custom page transitions. The framework agnostic feature of Onsen UI is the deal maker for us, we work on tons of projects with existing source code, making this feature, the most valuable one for us in Onsen UI.

 

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*