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: dragan.gaic@gmail.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:
  1. MV-Whatever pattern (variation of MVC)
  2. Two way data binding
  3. Templates
  4. Form Validations
  5. Deep Linking
  6. 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.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


1. Intro

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
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
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.
  • Conclusion
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).

3. Marketing

This topic is important to me; I don’t like products based on a false premise/promises.
  • Ionic
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.
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.
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.
  • Onsen UI
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.
Onsen UI is responsive. View adjusts based on screen size and it’s as easy as using the tag to have a two-column view for tablets and one-column view for smartphones. Onsen UI supports a broad range of devices and platforms. It is fully tested and works well with Android 2.3 and up, iOS 6 and up, Firefox OS, Chrome, and Safari.
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.
  • Conclusion
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:
All images © 2014 ionicframework.com
All images © 2014 onsen.io/
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).
  • Ionic
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
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).
Unlike Ionic, (this may change in the future) Onsen UI provides different themes for provided platforms. It CSS core is built around the Topcoat library . It is an open source CSS library designed with speed in mind. Because it doesn’t contain any JavaScript, Topcoat was chosen as a perfect UI building block.
  • Conclusion
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).
Continue Reading

  • stephan

    You mix up “saw” and “so”. 😉

  • dirk

    Thanks, good post!

  • David

    Yea, really good information and detailed analysis. I just discovered Onsen and I thought (or we always seem to think) I knew the entire playing field of alternative hybrid approaches that are not JQM.

    The fact Onsen allows what I suspect is easier simultaneous usage of jQuery it makes it really appealing to me. I always wonder though Ionic is getting so much attention right now in the US – and how companies looking to build out their strategies, seem to go with and usually for good measure, solutions and platforms that are solid in the marketplace. Analysis of the company behind Onsen vs. say Ionic’s folks just getting a bunch of new $ investment to grow is an area I always look to weigh into the equation. Like I am using App Framework right now via Intel XDK – and there are many great things about XDK. But, the support and business side of Intel keeping the right resources on this puny piece of their business seems at times kind of thin. So, though you can accomplish everything you need to now – the future is clearly about outputting more closely NATIVE (FB’s React Native, Ionic, Onsen, Appcelerator) – so I wonder how you would comment or evaluate upon this aspect from what you know?

    Thanks again –


    • Who knows what future is about.

      Each year I think how hybrid mobile development is probably dead and each year something surprises me. Last year it was Ionic and OnsenUI … Famo.us up to the point.

      I still feel hybrid mobile development is essentially dead. It’s a growing market but name me one good hybrid mobile application. Currently, native is still a safe way to go, but that may change with
      more powerfull mobile devices. Think about it, there are only two major downsides of hybrid applications. The first one is slow smartphones (JavaScript performance) and the second one are bad developers.

      Both problems are fixable, give enough time.

  • hello, very nice and helpfull topic,
    i love onsenui it’s very clean, but dos not looks like ios llike android
    anyway try to use it it’s very good
    thank you

  • Raga

    Have u tried Framework7? I know ionic is very good in marketing – but Framework7 is done by a lone dev in Russia (I think) – check it out… its really really good – and has so many elements out of the box than ionic & onsen ui.

    • I’m already preparing Framework7 review.

  • Gregor Srdic

    Very nice comparison, I am using Ionic and just recently discovered about onsenui, this article helped me to get some insight

  • Juan Carlos Alpizar Chinchilla

    Excellent article, it helped me decide on which one to use or at least try first 🙂 I’m coming from jQuery Mobile and I’m concerned about performance, is the use of jQuery in these frameworks slowing down or affecting the performance in any way?

    • Let’s be real, use of any hybrid mobile framework will result in lower performance compared to native applications. And while jQuery is slower than vanilla JavaScript, if you don’t overuse it, your application won’t suffer. Same goes for Angular.

      The main problem with jQuery combined with Ionic or OnsenUI is DOM access. If you want to change anything DOM related, if we’re talking about heavy changes, consider using vanilla JavaScript.

  • Arham Zulqarnaen

    Excellent article. Very well balance. Concise and easy to understand. You should write a book (or two) for these UI framework! And I will be more than happy to buy it.