If you ever read my blog, you should know that I favor Onsen UI over other frameworks like Ionic Framework or God forbid jQuery Mobile. To me, it was the first existing AngularJS based hybrid mobile framework and my first real introduction to AngularJS. We may argue over this point, but everything Ionic Framework did last few years was to stay close or at the same level as Onsen UI.
 
At this point, I’m not trying to attack Ionic Framework, those developers are also doing a stellar job, but it’s hard to innovate when Onsen UI developers are always a step ahead.
 
Unfortunately, this is also where Onsen UI fell short. Ionic Framework developers were too closely related to AngularJS developers, and this cooperation attracted a much larger hybrid mobile development community.
 
Onsen UI 2.0 may change this, hopefully it will.
 
 

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.


 

Onsen UI is Open Source

 
Official site GitHub
 
 
Onsen UI is an open source hybrid mobile framework, which means it’s open and free to use for almost everyone who knows how to use it. Onsen UI is designed and intended to give unparalleled UI and user experience for every mobile device, no matter wich mobile platform is used. Furthermore, Onsen UI is made to allow developers to create mobile applications using currently available web technologies.
 
Onsen UI is proven and tested to be a perfect solution for developers who want to build applications for various mobile operating systems. These are supported platforms:
 
  • Android 4.0.2+
  • iOS7+
  • Windows Phone 8.1+
  • WebKit browsers like Google Chrome or Safari
However, older Android/iOS platforms are not supported, at least not in the current 1.X version.
 

What’s the Difference between Onsen UI 1.x and Onsen UI 2.0

 
So, what makes it different compared to older version of Onsen UI1.x? Are there any differences in the components and features?
 
Although the first Onsen UI 1.x is bound to the Angular JS, The Onsen UI 2.0 brought about the biggest change of not being dependent anymore to the Angular JS. More importantly, the core library has nothing to do with the external dependencies of Onsen UI because it is purely instigated in the JavaScript. With this realization, Onsen UI can be effortlessly integrated into applications created using other frameworks.
 
Furter more, all existing components were remade as Web Components instead of AngularJS directives. To make it compatible with older iOS and Android devices (this also includes Windows Mobile), a bunch of polyfills was also included.
 
Another significant alteration made was the implementation of the core library with the help of ES6 rather than the use of ES5. This change allows developers to create a much cleaner code. This does not imply you must use ES6. If you wish you can use plain vanilla JavaScript or any other existing framework.
 

Onsen UI 2.0 Design

 
The new Onsen UI 2.0 is composed of a new Material Design theme that lets you quickly create a native-like experience for Android users. Let’s not forget the original flat theme, it’s still here.
 
 
If you’re reading this on your smartphone or tablet, you can find it directly here.
 

New Onsen UI 2.0 component

 
New Onsen UI iteration comes with a new component called ons-splitter. It combines the features of both the ons-split-view and the ons-sliding-menu. Technically it enables responsive layout by implementing both a two-column layout and a sliding menu layout.
 
 

Conclusion

 
While this is still a beta product, I’m already more than excited. This is everything I wanted from a hybrid mobile framework.
 
I don’t want limitations, and trust me, in this case, AngularJS was the greatest limitation. Don’t get me wrong, I adore AngularJS, but it’s hard to fight when you’re going against a giant like Ionic Framework. This way, Onsen UI can apply to a much wider specter of developers.
 
I can think of only one downside … now I need to rewrite all of my Onsen UI related articles, hahaha :).
  • Leo Budima

    Thanks for the article! A while ago, I chose Ionic over Onsen, but your article motivated me to revisit it for the upcoming project!

    I’ll make sure I check out your other Onsen articles.

  • bugyy

    Thanks for the article, i am developing a mobile app with onsen ui 2 on visual studio cordova project. And i nearly done finishing the app but i am having plugin problem with ngcordova plugins i installed plugin and tried almost everything also nearly everything on the net. Still couldn’t make it work and i couldn’t find documentation or knowledge from community. Right now i stucked and don’t know what to do saw your articles and hooped may be you can give me a clue.