Some time ago I wrote an article where I discussed the difference between jQuery Mobile and Sencha Touch while that article stands on it own I have neglected other available frameworks.
 
Let me give you a warning. This article will discuss HTML5 frameworks use for hybrid mobile applications. I am not going to talk about front-end frameworks like Bootstrap, this is not the point of this article.
 
Back to the topic, admit it or not, jQuery Mobile and Sencha Touch are old frameworks, still usable but still old. That’s why we need to talk about bright new stars and some old ones. I will discuss currently best available mobile frameworks while mentioning few of the older one at the end of this article.
 
 

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

 
Update (July 30, 2015): I'm planning to replace jQuery Mobile or Sencha Touch with Meteor, what do you think about it? Also, ReactJS is hot stuff right now, so I'm waiting for any ReactJS based mobile UI. Reapp.IO and TouchstoneJS are on my short list, but I want to wait for them to mature a bit.
 
 
For those who don’t know, Hybrid App is a combination of native app and mobile web app concepts. Typically the native code is provided by a wrapper framework (like Phonegap) which bridges a gap between native side and a JavaScript API so that the app’s JavaScript code can perform native functions such as taking a picture with the camera.
 
Unlike a classic mobile web app’s, which works with a server side code, hybrid mobile apps will wrap HTML, JavaScript, and CSS files locally (while in same cases it can still be used from a server side) so no Internet access is required.
 
I will try to be as objective as I can. I used to be a jQuery Mobile and Sencha Touch developer, now I’m working with OnsenUI and Ionic Framework. I have also spent a lot of time playing with these frameworks. This, of course, doesn’t mean other frameworks are bad or inadequate, as you will see, my decision was hard, and it took time.
 

Specific platforms

 
If you require a hybrid mobile application framework for a specific underlying technology (jQuery, AngularJS) follow these links:
 
 
 
 
 

Table of Content

 
Before I start take a look at a list of my chosen 7 in alphabetical order:
 
 

1. Famo.us

 
Famo.us is a free, open-source JavaScript framework that helps you create smooth, complex mobile applications. Like Ionic, Famo.us is made for hybrid mobile development, though, up to the point, it can be used for desktop web applications development (unfortunately, at this point, Chrome, Firefox and Chrome usage is still buggy). But, and here’s one large BUT, this framework is nothing you have seen so far. Famo.us development looks more like an animation or a game system than like conventional mobile app design.
 
This is because Famo.us is the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL (this statement is only partly true because there are some other frameworks that can offer similar functionalities, like threejs.org).
 
 
Detailed Review Link GitHub
 
 

Good

 
  • Open-source and free
  • Usable with AngularJS
  • iOS and Android support (including buggy desktop support)
  • 3D layout engine
  • 3D physics based animation library
  • 60 fps animations (though I would like to see this on lower end devices)
  • Can be rendered to DOM (Canvas, or WebGL are in a roadmap)
  • Supports Cordova, PhoneGap, Trigger.io or Crosswalk plus its own native wrapper
  • Help is available throug the IRC chanell
 

Bad

 
  • It’s not a animation/tweening library nor it is a jQuery animation replacement tool
  • You can’t use it for classic web development
  • Famo.us is very different from many Javascript frameworks since it endorses zero touches to the DOM.
  • If you like HTML5 markup based frameworks then this is not a framework for you.
 
 
 
Continue Reading
  • Excellent article.
    I have a question only if it develops a 100% phonegap mobile application and java script.
    It is faster than jquery mobile?
    It’s just as fast with sencha touch?
    What do you recommend for managing data in a disconnected Sqlite for a hybrid application

  • Sorry for a late response, I was having a rather long vacation.

    If you are willing to develop your own Phonegap app, creating your own custom GUI then you will do it much faster with jQuery Mobile or any other HTML5 framework. But if you create Phonegap app using vanilla java script and your own GUI then that app will be much much faster then app created with Phonegap + jQuery Mobile.

    It will be even faster then Sencha touch app.

    Regarding your offline date it all depends on how much data are we talking about. If you don’t need that much data I would advice you to use a lawnchair framework. In case of a lot of dynamic data you should use sqllite.

  • Anthony Tietjen

    Thank you for this article. I have looked at Sencha Touch and jQuery Mobile. I will take a look at Kendo UI.

    Thank You!

    • Currently my advise would be to choose between Kendo UI or Sencha Touch. If jQuery is your strong side then choose Kendo UI, in any other case choose Sencha UI. But be advises, both of them are commercial products.

  • huny

    Hi, I found your article really interesting. I am new to mobile app development.Keeping in mind an open source framework, What framework would you suggest other than jquery?

    • 1. Kendo UI – Easy like jQuery Mobile, built on jQuery, don’t suffer from jQuery Mobile problems
      2. Sencha Touch – Fast as Kendo UI, maybe even faster, much more complex syntax then Kendo UI
      3. Intel App Framework – Almost fast as Kendo UI and Sencha touch, unfortunately bad documentation

  • huny

    i asked about open source framework. There is the M Project framework,Davinci studio and wink that are open source.
    i want to develop a mobile app and i want to go for a framework that can provide extensive controls ,Good performance and requires a fine effort.
    For beginners which open source framework you would suggest??

    • Give me some time to take a look at M Project framework,Davinci studio and wink. In a mean time Intel App Framework is open source and fast like hell.

  • mj

    Nice article comparing some of the top JavaScript frameworks. Based on your article and further discussions, I am going to give Kendo UI a try. It looks promising, although you need to pay the license fee. (Will try that with their Icenium product)

    I have been doing some research and did a proof-of-concept app using Appcelerator Titanium and another one using Xamarin/iFactr. Like you said, Titanium is good for building prototype apps, but beyond that, you need to be careful. The framework seems to be less stables especially when it comes to their “Mobile Web” builds. Also, you would need special coding for iOS and Android in some cases.
    Since I have a .Net background, I like Xamarin and iFactr since it allows you to build cross-platform apps using .Net and C#. But, I think, iFactr is a bit limiting at this point, but if they can expand upon the concept, it has great potential in the future. (With Xamarin alone, you don’t get 100% reusability across all the platforms – the UI will need to be coded separately for each target platform. This is what iFactr tries to address, but in my opinion, they don’t go far enough, yet)

  • Jean Vence

    Thanks for a very helpful article. How about http://www.chocolatechip-ui.com – came across it recently and it looks promising albeit not well supported yet.

    • Thanks you on your kind words, regarding ChocolateChip UI, I will review it for my next article.

  • Great article. I come from a jQuery background and would like to uitilize this knowledge but with a framework that uses custom packaging for native apps. Any suggestions?
    Moreover, have you seen these http://ionicframework.com/ and http://www.icenium.com

  • First off all, great article and review of this mentioned frameworks. But, there is always “but” 😀

    I see that you missed to mention PhoneJS http://phonejs.devexpress.com/ . I have found this framework a few weeks ago and I plan to use it my next project, so I’m looking for good comparisons and reviews to see if it’s worth to use. I checked their documentation and demos and it looks pretty good, you can check it via link which I wrote above.

  • Nelson Cano Martínez

    Kendo is the champion if you combine speed, ease of development, support, cross-browser, cross-platform and combine with knockoutjs and headjs and have a platform to develop for mobiles, tablets and desktop into one!

  • Acami

    Do Kendo/Sencha Touch work together with Twitter Bootstrap or Twitter Bootstrap can replace Kendo UI and Sencha Touch for Web Mobile Application ?

    Do I need to learn anything else after mastering HTML5/CSS3/Javascript to develop HTML5 Mobile Application?

    What about PhoneGap?

    Thanks

    • Of course Twitter Bootstrap can be used with Kendo UI and Sencha Touch. Google a bit and you will find more then enough examples, even examples written by Kendo UI developers. You can easily master basic requirements for HTML5/CSS3/Javascript and HTML5 Mobile Application, but you will spend a lot of time fixing various CSS and HTML5 problems on various devices.

      Other then that, you can also master some kind of server side technology like PHP, .NET or Java.

      Phonegap is just an app wrapper, you will not spend much time mastering it, it is pretty much straight forward framework.

  • Thanks for the good article, Am new to mobile app development and I want yo develop an app that will be delivering live match update and news (mainly soccer) like goal live app. the app will be extracting data from database. I want also to embed push notification in my app and I want my app to have nice graphics as well as fast responce. which framework suits my needs.

    • It depends on several factors. Are you creating a free or commercial app? Basically if you are good with jQuery pick Kendo UI or PhoneJS, if you don’t want to spend money on a framework then pick jQUery Mobile. If you are more akin to pure javascript then pick Sencha Touch.

  • praveen

    Hi,, Can any one help me, how to store and retrieve data in kendo ui HTML5/Javascript framework?

    • Easiest way would be to use localstorage. Just google this topic and you will find more more then enough tutorials. Other solution would be to use frameworks like Persistence.js or Lawnchair.

  • vikram

    Thanks for the informative article.
    I am new in developing apps, but have developed plenty web sites, I am good with HTML5, CSS3, JQuery, C++, PHP. I intend to create a simple app (UI-wise and functionality-wise) which will have remote sync (backups) and local DB for offline mode. I dont have budget for commercial frameworks so was looking at titanium as a solution. As always need framework which is fast to develop on, creates fast apps, is future proof. Your views?

    • Tell me one more thing, are you creating a free or a commercial app?

  • vikram

    it will be free, depending on the popularity and economics I might get greedy 🙂

    • In that case pick Kendo UI or PhoneJS, there are free for non-commercial apps, not to mention very fast, well documented and jQuery based. In case you want fully free product you can choose between jQuery Mobile or AppFramework. jQuery Mobile is probably best known HTML5 mobile framework but it’s toooo slow and sluggish. App framework is fast as Kendo UI or PhoneJS but it is poorly documented.

  • vikram

    thanks for the reply, I will start from these, let see where it takes me 🙂

  • Paul Andersen

    Do you have a recommendation for offline capabilities – especially for eventual sync of relational data? Is there a separate one I can add on if I pick one of the above frameworks for non-offline capabilities?

    • Don

      I’m interested too in a mobile app which syncs with a remote database. Any suggestion?

  • clear and helpful!

  • Eddie

    Although you can do it, HTML is not particularly tuned up for writing modern User Interfaces.
    Why not use something like QtQuick (QML) or Kivy (python, kv) for application development?

    • It all comes up to personal preference. Use what every is comfortable for you. Thou I would always choose native mobile app over any kind of hybrid apps.

  • zicjin
  • Anthony

    Very nice article. Which framework in your opinion will still be supported in the near future and just doesn’t die out? Kendo UI and Sencha Touch? We are in the process of choosing and future support and releases are at the top of our list.

    • If I would have to pick one it would be Sencha Touch, but only by a slight margin.

  • Ama

    Dragan,

    Do you have a road map to become a Mobile Web App Developer? Recommended PAY (not free) books and videos?

    Thanks

    • What would you like to know? Except book title, I will add them soon.

  • We stumbled over here from a different web address and thought I
    might check things out. I like what I see so now i’m
    following you. Look forward to going over your web page for a second time.

  • Eric

    How could you leave out iUI? I’m currently responsible for maintaining an old iUI app and need to evaluate if it’s worth the trouble to update it to the latest version and learn how to learn its theming feature, or just throw it out and rebuild with another framework.

    Thanks for your ambitious review.

  • Pungggi
  • Prad

    Sencha has a commercial free license as long your app is delivered via browser that includes Phonegap.
    You only pay if you are using it as part of your SDK that creates apps or embed your apps in devices without the browser. This was the main reason using Sencha over KendoUI, I almost selected KendoUI due its ease with jQuery.
    Not surprisingly many devs have got this wrong idea as Sencha is a commercial org.

    Sencha as shallow learning (yes, not steep which means quicker) curve. But once you get its foundation right, it really stands out, primarily perhaps it is the only pure JS full stack framework that I can think of or know.

  • Bill

    Nice write-up. I appreciate the technical pros/cons comparison. There is so much happening in this space it’s really tough to stay on top of it all and make informed decisions. I’m still at the research stage to find the right dev environment for my app which ideally will be deployed on mobile (iOS, Android, Windows) and desktop (Mac/Win). Native like performance is a big criteria for my app (a productivity app) but ideally the widgets used will look and operate the same on all supported platforms. If there’s other well written technically oriented pros/cons articles out there on this topic, I’d love to find them to broaden the perspective.

    Question: Have you looked at Appgyver Steroids?

    Thanks for your input.

    • To be honest I never so Appgyver Steroids. Currently I am waiting for Famo.us to become available (few more days), from what I so it provides closest native-like touch and feel, of course maybe I’m wrong. I will write an article about it as soon as possible.

      • Bill

        Thanks. Any particular reason why you’re not considering Steroids? They recently got $2.5M in VC funding and seem to have some traction with real developers building real products on their platform. Thanks for the pointer on Famo.us. That looks quite promising. I’ll look forward to your technical review of that platform.

        • I never said I will not consider Steroids. Currently I am writing part 2 of this article where I will cover all this newly discovered frameworks. I wrote last one according to Stackoverflowstatistic. I took every major framework and searched how much is it represented at Stackoverflow.

  • Bill

    What about TideKit? They are making bold claims and if they actually deliver it seems like it could be a winner. Although they are consistently missing the mark on delivering something when they say it will be done, and they brag about “eating their own dog food” on their site and I was unable to purchase a “reservation” for early access because their dog food wasn’t working last week. Their open source earlier effort TideSDK had issues, but, some successful products (e.g. WunderList) were created with it. So much about all of this relies on solid execution and having sufficient resources to pull it off. Thanks again for the solid technical review.

    • I got burned so much time, I simply don’t buy this “pay now just so you can be one of the first to access” method any more. I prefer Kendo UI method, give me a basic framework to play with and if it’s ok I would buy professional license, everything else is waste of time. Thou I will check this framework once it becomes freely available.

    • Brian

      WunderList no longer uses TideSDK. They moved to native apps.

  • Bill
  • Bill

    Thanks for being a great resource for objective pros/cons on tools in this space. Please also have a look at Wakanda. They’re more focused on providing a tightly integrated back-end server/db with nice data modeling editor all using JS (javscript server side and client side). Apparently a future enterprise version (just learned this morning) will support Phonegap. Thanks.

  • David Glass

    Just to correct some inaccuracies. There is a lot of misinformation regarding Appcelerator. In particular that it compiles JavaScript to Native;

    Appcelerator actually uses a fully fledged JavaScript runtime with a bridge to native; this allows it to leverage all the language features such as closures, function references, etc. Translation to native is notoriously unpredictable since most languages don’t share the same features

    Also, like Sencha, it is a full fledged MVC and leverages Backbone.js, Underscore.js, and Moment.js among other popular frameworks to make development a breeze.

    I don’t know where you got the “horrible documentation” from, unless you haven’t checked it for a long time. Feel free to check

    http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.API

    I’d love to see a revision to this, otherwise this just helps to spread misconceptions.

    Another comment you might want to revise is one you made about the native looking UI; all the frameworks I have worked with, Hybrid or Native, have fully customizeable UIs; that they can’t be customized using CSS is another story

  • Bruno Quintanilha

    Hi,

    great article, thanks. I have a project to work on. It is a software to run on windows 7 (it can be web) with a 50 inch touch screen. I am wondering if a web based approach is the way to go or if WPF would be a better approach. Can you give a sugestion on that topic?

    • Web based approach is still viable, just take a look at Samsung TV Smart Hub, they are using HTML5.

  • Michael

    what about Ratchet by twitter bootstrap team?http://goratchet.com/ cos i want to use ratchet to do the UI for my app. whats your take on ratchet?

    • I will look at it when I finish going through Ionic.

  • Metin

    Intel App Framework has upgraded to App Framework 2.1 . In this version the say we can use jquery directly. I tried jquery mobile for a week and I found it extremely slow, specially changing to external html. Also there ara touch problems. When you touch a div and then hide it, the div behind is touched also. (preventdefault is used by the way )

    I would like to give a start for App. Framework 2.1 .

    If you have time can you look at this site ? As an expert on this subject I would like to hear your words.

    • App Framework is a fast one, I wrote an article about it. My main complain was extremely bad documentation and small community. I hope things changed in a good way.

  • Hey, I want to suggest you one more platform Configure.IT. This mobile app development platform have some amazing features. Just take a look and if you find them interesting, please add this platform in your post.

    1) Import Design PSD to create App Screens on fly

    Do you need custom design for your App? Design your App UI in
    Photoshop®, and you’ll be able to import your entire UI as .PSD files
    into Configure.IT Mobile Application Configurator – and Configure.IT
    convert .PSD files into mobile app design interface that you can
    instantly preview on device. This completely eliminates the time to
    implement design into actual app UI.

    2) PreviewIT – Live preview of app development on real device

    PreviewIT application is an exclusive preview app tool developed to
    look at the output of your app configurations in “real time” on your
    iPhone and iPad. The app shows native output (and not as a web app) with
    real data – fetching the data via API). The application offers seamless
    preview experience – with great productivity features to reduce time
    for review. The app requires a Configure.IT account or Preview User
    credentials to be able to preview app development projects.

    Source: http://www.configure.it/features/mobile-app-configuration/

  • Macke

    Thank you for a great comparsion! Easy to get an overview of most new mobile app frameworks from your article.
    I have been trying out http://mobileangularui.com/ a bit and i think it seems good too. It uses a stripped down version of bootstrap for the ui and works both on mobile and desktop. Have you tried it?

    • I have, I'll include it in my next article covering AngularJS mobile frameworks.

      I think this is an excellent replacement for jQuery Mobile, where there's a need for a mobile site, not a hybrid mobile application.

  • Tell me differences for Phonegap & Ionic framework ,Which one is best to develop mobile application ..?

    • You’re asking me about the difference between apples and oranges.

      PhoneGap (like Cordova) is application wrapper you can use to create a hybrid mobile app. It wraps your HTML5 mobile application into appropriate platform container, for example, Android apk file.

      Ionic is application HTML5 framework you can use to create a mobile applications.

      On the other hand, in my experience, Ionic framework is currently best available mobile framework.

      • Jonathan Seidman

        horrible explanation.

        you are talking to a total newb and clearly doesn’t get what a framework is and what an application wrapper is.

        you would have been better off giving an example of how the 2 can be used together.

  • Novina

    Can we get an update on this with react.js on the list?

  • I suggest molecular mobile app development platform – MMADP also. It has technological advantages and differentiators compared to others. Even more, the trial version is available for free currently…list it on your blog if you like it

    Source: http://www.weblineglobal.com/web-mobi-suite/molecular-mobile-app-development-platform-mmadp/

  • Thank you, I will check Cobalt. Though, you can also have almost fluid pager transitions with Ionic. You only need to use Native Transition Cordova plugin. Other frameworks are using the same trick.

    Unfortunately, this plugin was not made for Ionic in the first place, and it’s still in development, so it may misbehave on some devices. Hopefully, Ionic developers will take my advice and rebuilt this plugin directly for Ionic.

    • I know this plugin exists for a while now but I never tried it. This plugins works (as far as I know) by creating a screenshot of your app and use it to make a transition to the new screen. I found it a bit messy but okay. Another advantage of splitting your app into multiple html pages is that your code is lighter : less JS and less HTML in each page make your apps load quicker and more reactive.

      • You’re 100% correct, I know it’s messy, but it works. I only found one major problem with it, it should not be used if an application is expected to run some task/process during the page transition. It could add a significant delay, thus plugin animation could finish before Ionic application even triggers page transition.