Hi before you start reading this article let me assure you that I don’t want to launch a flame war here, this article is going to be as objective as I can make it. I will favor none of these frameworks; you will need to decide on your own. Please notify me if you find any technical or information inaccuracies so I can update this article to address them, leave me a comment down below or you can even mail me to: email@example.com.
Mobile framework world is extremely competitive one; this is the reason I’m trying to assure you that I’m not attempting to initiate a flame/fanboy war. Until recently, jQuery library was a king (as a mobile core framework), but far from the best one. It was used so many times as a core framework (jQuery Mobile, Kendo UI, PhoneJS, jQ touch, App Framework) that I’m baffled why no one thought to replace it with something more suitable. Let’s be honest, anything built upon MVC would suffice.
Don’t get me wrong, jQuery is a great library if you want to maintain, manipulate, and control DOM elements, unfortunately, it lacks MVC architecture and jQuery Mobile is a best example why this is a failed approach. On the other hand, AngularJS can do everything that jQuery does and much more like:
- MV-Whatever pattern (variation of MVC)
- Two way data binding
- Form Validations
- Deep Linking
- Dependency injection
Ionic and Onsen UI are AngularJS based mobile UI frameworks. AngularJS core (approach) makes them very similar; if you ever wrote such application your transition is going to be smooth and painless.
This article is a part of a series where I am trying to explain differences between different HTML5 application frameworks. I already wrote articles covering Ionic Framework and Onsen UI, now I’m trying to compare them.
2. Platform support
Before you event start coding, this is something you need to consider.
Ionic framework targets iPhone and Android devices. It supports iOS 6+ and Android 4.1 + (though 4.0 and 2.3.X should work up to some point). Windows Phone and FirefoxOS support are somewhere on the roadmap. It may or may not change in the future. I intend to update this article when such thing happens.
It is made for native/hybrid mobile apps rather than mobile websites. You can still use it for classic web development, but it will not look good when viewed on larger screens. It looks like an oversized mobile application. If you ever worked with jQuery Mobile, then you should know what I was talking.
Since November, (2014) Ionic supports a split-view functionality, this will help when an application is viewed on a table device.
Onsen UI, on the other hand, supports Android 2.3 and up, iOS 6 and up, Firefox OS, Chrome, and Safari. They went even further supporting two-column view for tablets and one-column view for smartphones. This makes Onsen UI an excellent choice if you want to create a tablet application.
According to Onsen UI developers, support for Windows Mobile 8.1 is on the way.
Everything said here should be taken with a grain of salt. Both frameworks claim they work with Android 2.3, if only partially (Ionic). This is not something I would personally advertize, Android 2.X is a bad platform for hybrid applications, you should forget it even exists.
On paper, Onsen UI has a better platform support, but this is not a significant advantage. While not explicitly written, Ionic also supports web-kit desktop browsers that make them similar in comparison. The only feature, which stands out is better Onsen UI tablet support (currently it is more flexible then Ionic split view feature).
This topic is important to me; I don’t like products based on a false premise/promises.
[quote align=”center”]Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Constructed with Sass and optimized for AngularJS.[/quote]
[quote align=”center”]Speed is important. So important that you only notice when it isn’t there. Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery and hardware accelerated transitions, one thing is for sure: You’ll be impressed.[/quote]
[quote align=”center”]Clean, simple, and functional. Ionic has been designed to work and display beautifully on all current mobile devices. With tons of popular mobile components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme, you’ll wonder how you lived without it.[/quote]
[quote align=”center”]Onsen UI is designed and implemented to deliver unprecedented user experience for your apps.
Frustrated with the lack of native-like performance? Try Onsen UI, and you’ll feel the difference right away.[/quote]
[quote align=”center”]Onsen UI is responsive. View adjusts based on screen size and it’s as easy as using the
[quote align=”center”]Onsen UI is a perfect solution for developing hybrid apps. That’s because our priority is performance and ease of use. Onsen UI is fully open source and never locks you in. It also provides the option of deploying your apps to the server to use as a tool to build a performance website.[/quote]
There’s nothing controversial or false here; both frameworks will deliver what they’re promising. Onsen UI is somewhat vague about Android 2.3 support; I’m talking about the claim that Onsen UI works with this specific Android version. Personally they should state that some features will not work on such an old Android platform.
4. UI and visual impressions
This is going to be a close call. From the visual standpoint, both frameworks went with a modern looking flat UI:
As you can see each framework has a distinctive unique look and feel, thankfully they don’t seem Bootstrap like. Don’t get me wrong, I don’t have anything against Bootstrap, I simply don’t like other UI libraries copying that particular look and feel (it’s so unoriginal).
Beauty of Ionic framework is in its modern simplicity. Basic UI walks a thin line between iOS and Android, sometimes it feels like I’m working with Android Material Design UI (Android Lollipop), sometimes it feels uncanny iOS 7 like. UI works fast and reliable, it looks like Ionic developers learned a lot from jQuery Mobile mistakes (CSS3 effects, especially shadows are performance cloggers).
Ionic provides multiple different directives for your mobile app and this number is growing every day. But theres one problem here, many components have a pure HTML/CSS double. For example there’s a CSS version of list and there s list directive, I find this unnecesary confusing.
Everything is customizable through SASS; you can even automate it via provided CLI tool. Use SASS to override Ionic’s default styles and customize an app to fit your needs. I’d highly suggest learning SASS, it will greatly speed up your CSS development.
If you are working on a multi-platform application it will not look 100% the same on Android and iOS. Some features, like tabs, will be styled according to used mobile platform (you can always override this).
Onsen UI walks a similar path but unique in its own way. Default theme is naturally flat and distinctively different then Ionic one, especially if you spend some time playing with it. First time I saw it I was disappointed a bit, you need to understand it was after I decided to switch from jQuery Mobile. I missed various CSS3 effects; everything looked bland and empty. Then I saw how fast it works on a real mobile device, I build more complex demo apps. Then it struck me, I fell in love. On the other hand, the default theme suffers from jQuery Mobile clone-like visual problem. What makes it unique also makes it look and feel the same (this is my subjective feeling after I spent three years slaving with jQuery Mobile).
Again, both frameworks are very similar in nature; they have a distinctive default flat UI, both of them rely heavily on directives. They have a theme roller support, plus they provide easy theme customization solutions, there’s only one thing that currently sets them apart. It’s Onsen UI platform dependent theming. This may swing you towards Onsen UI, it is a nice feature after all (then again this is not a significant advantage, hybrid mobile development strives more to platform look and feel unification).