It’s never late to learn something new especially if you’re full of ideas; you also don’t even need any prior native development knowledge. I’m writing this article for AngularJS community in a hope some of you will choose hybrid mobile application development. You also don’t need to worry too much, hybrid mobile application development is not what it used to be. Long past are the days when everything hybrid was clunky and jerky, those frameworks are not with us anymore, new kids are here to step in their place.
 
At the same time, you should also not live in the illusion, hybrid mobile application development is still not on the level of native development though this gap is getting shorter with every day. This day will come sooner or later. Currently, available frameworks are highly optimized, but our mobile devices still require some catching up to do.
 
 

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.


 

Intro

Some time ago, I used to work a lot with jQuery Mobile. It was a great time for hybrid mobile development, think of it as a new frontier. Unfortunately, it was far from a great framework. Remember when I told you long past are the days when everything hybrid was clunky and jerky, well jQuery Mobile was the best depiction of those days.
 
I’m almost ashamed, but I spent too much time playing with it, more than I’m willing to admit. Just take a look at my StackOverflow support score for jQuery Mobile.
 
Thankfully, almost two years ago I’ve decided to switch from jQuery to AngularJS. Since then I tried nearly every possible AngularJS based hybrid mobile framework you can think. So here’s the list of the chosen five.
 

Table Of Contents

Before we start take a look at a list of my chosen 5 in alphabetical order:
 
  • Page 1 | Ionic Framework
  • Page 1 | Kendo UI
  • Page 1 | Mobile Angular UI
  • Page 1 | Onsen UI
  • Page 2 | Supersonic
  • Page 2 | Conclusion && Recomendations
 

Ionic Framework

 
 
 
 
The Ionic Framework is probably the best known AngularJS based hybrid mobile application framework. I will not intentionally say it’s the best one, it’s up to you to decide which one of these frameworks you want to use.
 
Just a word of warning before we continue, I’m an active member of the Ionic Forum so everything I say here may sound biased.
 
The Ionic FrameWork is almost two years old framework; because it’s no longer in beta, it can be considered a mature product. It’s free and open source, offering you library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Everything is built with SASS and finally optimized for AngularJS. And while we’re on this topic, the Ionic framework wraps around AngularJS, which is an enormous benefit, speed wise.
 
Even better, the Ionic is not just a framework. Just like with the OnsenUI, the Ionic provides much more than a framework alone. You can do almost everything directly from the CLI interface, be it create/build/deploy/upload projects. Do you prefer doing your business online? Then you can use any number of online IDE tools to work on your Ionic application (desktop tools are also available). Do you want to show your application to your customers? Just upload it to Ionic.IO and share your application ID, no need for deployment. Have you created a 3rd party plugin, theme or a starter app? Then upload it at Ionic Market and make some money out of it.
 
One last thing, I have already written a detailed overview of the Ionic Framework, you can find it in the “Interesting resources” section below. There’s simply no point in repeating everything again.
 
Official Site Documentation GitHub
 
 

Good

  • It’s open-source and free
  • Built around AngularJS, it even wraps it
  • iOS/Android support though it also unofficially works on Windows Mobile platform
  • optimized for touch devices (though it will, up to the point, also work on desktop browsers)
  • CLI tool (you will not need to use Cordova CLI)
  • SASS support
  • Supports Cordova, PhoneGap
  • Offers a large number of 3rd party resources, plugins, themes, starter apps
  • Offers a sizable number or tools like Ionic Market, Ionic.IO, etc.
  • Excellent support, especially the Ionic forum
 

Bad

  • If you like HTML5 markup based frameworks then this is not a framework for you.
  • Don’t expect the same level of support as in the case of KendoUI, at least not for now
  • It’s a step behind OnsenUI, feature wise
 

Interesting resources

 
Detailed Review
 
Tutorial
 
170+ Ionic Framework Resources
 
 
 
 

Kendo UI

 
 
 
 
Kendo UI is a modern mobile application framework, made by Telerik. Following the latest HTML5, CSS3, and JavaScript standards, it delivers everything you need for your client and server-side applications. While initially jQuery-powered, it also comes with a complete AngularJS integration and Bootstrap support.
 
I should also mention that Kendo UI is a commercial product that makes it great if you need a dedicated support. Technically two versions are available, an open source Core edition, and a commercial version. This is also an excellent framework if you have a prior jQuery Mobile experience, and you want to step into the world of AngularJS. Think of it as the best of both worlds.
 
The core edition contains 40 different web widgets, the core framework, various DataSource components, templates, drag-and-drop support, and themeable widgets, as well as AngularJS directives.
 
I would go so far to call it the best framework simply on the account of support you receive with a commercial edition.
 
One last thing, I have already written a detailed overview of the Kendo UI, you can find it in the “Interesting resources” section below. There’s simply no point in repeating everything again.
 
Official Site Documentation GitHub
 
 

Good

  • jQuery and AngularJS support
  • HTML markup based
  • Great documentation (there’s room for the improvement)
  • Offers a native look and feel depending on a mobile platform
  • Great template system
  • Usable also for a classic web development
  • 40 widgets included in core edition
  • Excellent customer support if you own an enterprise edition
 

Bad

  • It’s commercial. Core edition is excellent, but it’s nothing compared to the enterprise version.
  • Lack of a significant 3rd party support, mainly due to its commercial nature
  • Some people don’t like mixing jQuery and AngularJS
 

Interesting resources

 
Detailed Review
 
 
 
 
Continue Reading

  • Rashid NK

    nice comparison of the top frameworks, did u miss intel XDK ?

    • Hi Rashid, there’s a good reason. It was not included because it’s not a framework per se, it’s an IDE toolkit. While great it’s the topic for some other article.

  • AHmed Rebai

    why you don’t speak about phonegap sir , it’s a grateful hybrid framework fro mobile development ans it use Angularjs

    • Phonegap, just like Cordova, is not a hybrid mobile framework. It’s a wrapper framework you can use to create a native mobile app shell around some HTML5/CSS/JavaScript content.. Also you can use anything inside it, you can go even so far to use only HTML5 and CSS without JavaScript of any kind.