I wrote the first version of this article almost 5 years ago, and while I’m proud of it I must admit it did not age well.
jQuery Mobile was the king back then. Everyone was doing jQuery, so why not jump on the jQuery Mobile bandwagon.
To make story short, jQuery Mobile sucked, people we looking for the next best thing, Angular and few other frameworks were released, and boom here came the second golden age of hybrid mobile frameworks.
The idea behind this article was to showcase you the best in this world. In one form or another, I have used all of these frameworks so you will get a well-round perspective of pros and cons.
These days, a story has changed a bit, so we have two available variations:
The first approach is also older compared to the second one. While this technology more or less exists for the past ten years we have only now reached the level of smartphone sophistication that can actually run these applications on the almost real-like level.
Table of Content
These frameworks here are my chose seven. I have ordered them alphabetically so hopefully, no one will accuse me of favoritism:
- Page 1 | Framework 7
- Page 2 | Ionic Framework
- Page 3 | jQuery Mobile
- Page 4 | Kendo UI
- Page 5 | OnsenUI
- Page 6 | React Native
- Page 7 | Titanium Appcelerator
1. Framework 7
Framework7 is a free and open-source hybrid mobile framework to develop applications or web apps with iOS & Android native look and feel. It is also a fast prototyping tool if you need to quickly showcase your working app prototype.
At the same time, Framework 7 is, to put it mildly, a “strange duck”. For some unknown reason, at the same time, Framework 7 is advertised as an iOS exclusive framework and iOS + Android framework. Which is extremely confusing. To make this even more confusing this is iOS “exclusive” framework that works with a Material design theme. To make things straight, you can use this framework on both platforms.
This confusion aside, one thing that makes this framework shine is that its library is agnostic. While this is not a unique trait (Onsen UI offers the same approach), it is something you should consider if you don’t care about current Angular/React war. There’s another thing I adore about Framework 7, it also comes with existing Vue + F7 and React + F7 documentation.
Last but not least, personally, what makes this framework shine even brighter is its fast learning curve. If you have any previous experience with jQuery Mobile then you know what I’m talking about.
- Open-source and free
- Library agnostic
- iOS and Android support
- Very fast
- Native scrolling including fast animations
- Actually working pages animation
- Existing Vue|React support
- Alive forum community
- A lot of ready-to-use UI elements
- Easy to learn and customize
- Average documentation
- Confusion over platform support
- If you don’t like HTML5 markup based solutions then this is not a framework for you.
2. Ionic Framework
If you want to enter a world of hybrid mobile development, the Ionic framework is the way to go.
I usually like to compare it with jQuery Mobile. It’s as attractive and all around accepted, but unlike jQuery Mobile, it’s not suffering from performance problems.
Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications. It’s pretty darn fast, it uses an extremely simple syntax (at least compared to Backbone or Knockout) and like jQuery, has a large number of 3rd party plugins and extensions. Angular comes with jqLite if you need to access the DOM, or you can always load jQuery (I would advise sticking to jqLite, it has a much smaller memory footprint than full-fledged jQuery).
What I like most about it is that it comes in two variations. Depending on your AngularJS preference you can choose between Ionic 1 and Ionic 2. Ionic 1 depends on AngularJS, were Ionic 2 depends on AngularJS 2.
Which one to choose? It depends on your prior experience. If you never worked on hybrid mobile applications then, by all means, choose Ionic 1. You’ll simply find much more learning materials and working examples. On the other hand, Ionic 2 is more suited for experienced developers.
- Open-source and free (under a permissive MIT license)
- Built around AngularJS/AngularJS2 (Ember and Backbone not supported)
- iOS, Android, Mobile Windows support
- Heavily optimized for touch devices (Ionic is focused on building native/hybrid mobile apps rather than mobile websites.)
- Great command line utility support (Cordova users will recognize the benefit)
- Optional Sass support
- Supports Cordova, PhoneGap, or Trigger.io
- Over 500 custom designed font icons MIT licensed
- Unlike jQuery Mobile or Kendo UI, Ionic mobile framework is meant to be used only for a hybrid mobile application development
- If you like HTML5 markup based frameworks then this is not a framework for you.
- Not for you if you prefer Ember, Backbone or Knockout
This is a framework you will want to use (same goes for OnsenUI).