I am writing this as a continuation of my previous article called “Top 7 mobile application HTML5 frameworks“. It will try to cover somewhat lesser known mobile HTML5 frameworks, ones not fit for my previous article. Lesser known should not translate to “not so good”. Frameworks I am about to cover are several years old, but information about them are still more or less scarce.
 
If you don’t know what mobile HTML5 frameworks are (or used) take a look at my previously mention article, I will not repeat myself, for the sake of article clarity. So let’s dive straight through.
 
 

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

 
I will try to be as much objective as I can. Let me be transparent first, I am a jQuery Mobile and Sencha Touch developer. I had spent a lot of time playing with available frameworks before I chose those two. I don’t want to say other frameworks are inadequate or incompetent, as you will see, my decision was difficult, and it took time. All of them are great but as Rolling Stones sang “You can’t always get what you want“.
 
Before I start take a look at a list of my chosen 7 in alphabetical order:
 
 
 
DavinciSDK
 
Link: http://www.davincisdk.com
Price: Free / Commercial
Mobile platforms supported: iOS, Android
 
We will begin with a “unique” bird. Unlike other candidates, Davinci SDK is IDE built around Eclipse made to help you create HTML5 web applications (mobile included). They have combined a wide variety of open source frameworks such as jQuery Mobile, KnockOut, Underscore, Handlebars, Backbone, etc. to aid you in HTML5 web app development. All in all, this is an excellent idea, precisely what jQuery Mobile needs, a good IDE.
 
Combined with a large number of related frameworks, where I would like to single out Backbone and Underscore. It offers ready-made presets and an action editor with which HTML5 content may be created without a single line of coding. This kind of IDE and development will appeal to iOS developers. Don’t forget that it supports native binary compiling for both iOS and Android OS.
 

Pro

 
  • WYSIWYG development, almost everything is point and click
  • It combines highly popular javascript frameworks
  • Structure based on jQuery and the jQuery Mobile framework, documentation and support will not be a problem
  • Model View Controller (MVC) and Data Binding provided thanks to additional frameworks
  • Data Binding tool provides easy integration for 3rd party open APIs
  • iOs and Android native packaging, no more Phonegap.
  • IDE has more sense then one made for Sencha Touch, still Sencha Touch is much faster
  • This is what jQuery Mobile should become
 

Con

 
  • Built on jQuery Mobile. This is my subjective comment and I’m providing it to you as jQuery Mobile developer. While it is a great framework it lags behind its competitors. It’s simply not fast or robust enough for complex HTML5 mobile applications, not to mention that it looks rather bad when viewed on desktop browsers. This will of course change with time.
  • Lack of information about the framework itself (Framework age can easily explained this).
  • Commercial version. This is only problem because you can also buy Kendo UI, which will not provide you with this great IDE, but is faster then jQuery Mobile.

 

Author notes

 
This is a must have IDE for jQuery Mobile developers primarily it includes tight integration with Backbone, Knockout, and Underscore. Phonegap is no more needed, for native support. I can’t stress this enough, Phonegap and a jQuery Mobile combination is killing them, if possible stay away from Phonegap. If you are a jQuery Mobile developer intent on fast and easy development, this is a tool for you. On the other hand, if you need speed steer clear from jQuery Mobile.
 

Additional info

 
 
 
Jo
 
Link: http://joapp.com/
Price: Free
Mobile platforms supported: iOS, Android, Blackberry, Symbian, WebOS
 
Jo is a lightweight HTML5 mobile app framework which provides UI widgets, a flexible event model, a wrapper for sound, and a light data layer. Minified it takes only 12 Kb, which is around 25x less then jQuery Mobile. It requires PhoneGap as a native wrapper. I personally don’t like Phonegap it but that’s just me. It is optimized for Android (even version 1.6), iOS and WebOS usage, so, you guessed it, it runs fast.
 

Pro

 
  • Small and fast, unlike jQuery Mobile this one actually works OK combined with Phonegap
  • Javascript based. Usually, this is not something I like but this framework is a little jewel. Its javascript syntax is pretty flexible, just use it as you like it. Requires OOP knowledge (this may also be a deterrent for some people).
  • Extensive widget support, I can’t believe so many of them are gathered in so little code.
  • full desktop and mobile browser support, unlike some pure WebKit frameworks.
 

Con

 
  • Documentation, the disease of many great HTML frameworks. While extensive it lacks images and working examples.
  • To few framework images what so ever. It may sound stupid and shallow but images are there to sell products. Why would I want to spend my time with a framework I cant initially see.
  • Available theme. It looks nice but I wouldn’t call it native-like. It’s designed for mobile use, but it still feels like using a web app.

 

Author notes

 
From what I’ve seen so far this is a quick and fast framework. It is small but versatile, just like Swiss knife. I would strongly advise it if javascript OOP syntax or documentation is not a big problem for you. At the same time don’t expect a large developer or community support. This is still a work in progress and I don’t think it is production ready.
 

Additional info

 
 
 
Junior
 
Junior is another jQuery based HTML5 front-end framework for creating mobile apps that look and behave like native. Unlike Project M and Davinci SDK it is based on Zepto.js and has integration with Backbone. It uses Ratchet CSS for its UI components. For those of you who don’t know Ratchet is used to prototype iPhone apps with simple HTML, CSS, and JS components. Inclusion of the Zepto.js and Ratchet tells you that this framework also aims at been light and small.
 
Link: http://justspamjustin.github.io/junior
Price: Free
Mobile platforms supported: iOS
 

Pro

 
  • Small and light
  • MVC support with Backbone included
  • jQuery based which makes it easy to master
  • Modernizer support
 

Con

 
  • Retchet UI is nothing special, I don’t find it to be ready and responsive for a mobile HTML5 framework. There are numerous better solutions. But a lot of blame is also on a Junior implementation.
  • Documentation don’t exist. Because it uses several frameworks you will need to look at their specific pages.
  • UI is problematic, visual errors and problems are noticeable
  • In a perfect world combining several distinct frameworks looks like a good idea …. in the real life its not.

 

Author notes

 
I don’t know what to think about this framework. Form one perspective it is small and fast. On the other hand, it is built form several distinct frameworks that may or may not work correctly together. From may experience this is a quick but lazy development. I am most disappointed with its UI; it simply don’t have a native feeling, not to mention constant visual errors.
 
 
The Project M
 
Now this is something I like. The project M is an alternative version of jQuery Mobile, think of it as a pimped out version of jQuery Mobile. It provides developers with an MVC-based architecture for structured and convenient application development, something that original jQuery Mobile really needs. That is not all, you don’t need PhoneGap any more as a native app wrapper. Everything you need comes with a nifty tool called Espresso. It is a powerful build tool, that eases up the development process in many ways: It initializes the project, creates required components, provides a built-in web server, optimizes and packs the application, deploys it to e.g. an FTP server and builds native iOS/Android apps. Basically, it’s similar to the (un)holly combination of jQuery Mobile and Backbone and Phonegap, with everything positive that can provide, without most of their combined problems.
 
Link: http://www.the-m-project.org/
Price: Free
Mobile platforms supported: iOS, Android (Blackberry and Palm webOS – without native support)
 

Pro

 
  • jQuery Mobile is the core framework
  • integrated MVC support – something that original jQuery Mobile needs the most
  • No more Phonegap
  • Internationalization support
  • Sencha Touch syntax compared to jQuery Mobile HTML approach
  • Offline support (automatic cache manifest generation)
 

Con

 
  • Documentation again. Because it uses completely different development approach original jQuery Mobile documentation is almost useless. Some documentation links are broken (nobody fixed it, even after 7 months after this problem was reported)
  • While better then original jQuery Mobile it is not much faster
  • It lags behind original jQuery mobile, not much but still a problem if you want some new goodies.

 

Author notes

 
I am in love. If you have enough time (and want to spend it with an improved version of jQuery Mobile) spend it learning this framework. It will take some time to learn it javascript approach, in the end it will worth your time. Its MVC support is much better then jQuery Mobile combined with Backbone. Anyone using this combination know how bad it can be sometimes. Only downside I can think of is don’t expect Kendo UI / Sencha Touch native speed.
 
Continue Reading

  • kaiyes ansary

    Hi, nice one…I have an app that I made with Jquery mobile + phonegap. Its a bit slow and I was wondering what the next framework I should try in the hope of making the app faster. Sencha touch vs Lungo or may be something else. Only the app being fast and easy transition from jquery mobile matters. Please advice.
    Cheers

    • If money is not an obstacle or if you are creating a non-commercial app then this would be my top 3:

      1. Kendo UI (best solution if you have an experience with jQuery)
      2. Sencha Touch (best overall speed, but it takes a lot of time to master)
      3. PhoneJS (extremely similar to Kendo UI)

      If you need a open source solution then I would advise you:

      Intel App Framework (extremely fast but documentation is rather bad, useful but it takes time to understand)

  • Dear Dragan,
    your articles are simply outstanding. Incredibly well written stuff.

    By the way, have you tried Icenium or Application Craft?
    If so, what do you think of these?

    I’ve built most of my mobile Apps on the latter platform and aside from speed issues (as is the case with most non-native Apps),
    the learning curve and final outcome are simply more than satisfactory.

    Regards

    • I already have a plan to write an article about Icenium, I will also create a review of Application Craft. Thanks for giving me another topic 🙂

  • Mike

    We chose Sencha Touch but the learning curve until now is steep. I have extensive experience with javascript but I have got used into seeing HTML as well. I was thinking about the Ionic framework which use angularjs and seems easy but the managers will not probably like the fact no one is using it yet. Have you tried Ionic? Would you suggest it for a professional app?

  • Dave

    Nice write up – I would value your opinion on two items (regarding the 7 known and 7 lesser known frameworks)

    1) What if you do not want to bundle your HTML5 into a downloadable app and just have a online website – do the standing still say the same or are you assuming you want to make an installable app.

    2) What if you want to style/theme your website to your own look and feel regardless of device – which is best. It seems like you give greater value to frameworks which UI’s match their native OS. But I would of thought most sites (not apps) want their own personalised style anyway.

    • 1) Thing will considerably change in case you want to have classic online web site. It will require less time to implement and you wouldn’t need to worry about mobile app performances. Classic web site usually loads faster then web site build into a installable app.

      2) Frameworks usually come with a skin prepared for desktop browsers so you don’t need to worry about it. Regarding my preference to frameworks which have native OS UI look a like is because my blog was intended to cover everything regarded hybrid mobile development. My personal advice would be to skip mentioned frameworks and to create your mobile site with Boostrap framework (ex Twitter Boostrap). Unlike mentioned frameworks this one is intended for desktop mobile and desktop browsers, where previously mentioned ones usually work correctly only on mobile browsers (for example, jQuery Mobile looks extremely bad on large desktop resolutions).

      I hope I answered all of your questions. Feel free to ask if you want to know anything else.

  • Turbo

    Hello,

    Nice Article.

    But have what do you think of : Application Craft as an HTML5 Mobile Apps Development Platform.

  • Mathias Conradt

    I wonder why DevExpress / DevExtreme Mobile does not get much attention in the market or developer community, since it seems to be quite stable and already 4 years old. I am coming from a Java world and did a lot of native Android development, now looking more into hybrid frameworks, having to decide between Ionic or DevExtreme. Any thoughts about DevExtreme anybody? http://js.devexpress.com/MobileDevelopment/

    • At one point I used to advise my readers to take a look at PhoneJS (now DevExpress). At one point it was better then Kendo UI (I’m comparing it only to commercial products), I think it still is but they offer only “Free Trial”. Where Kendo UI offers free and commercial version. This way it’s only alluring to some companies and individuals.

      DevExpress most promissing advantages are available services and support. On the other hand Ionic Framework offers a large community while provided services are also on the same level to DevExpress.

      Personally, I would choose DevExpress if dedicated support is my main concern. In any other case I would choose Ionic Framework, though I would also like to recommend Onsen UI 2.0. It’s little bit better then Ionic Framework. It has a smaller community but at the same tile its JavaScript agnostic. You can use any JS framework you like.

      • Mathias Conradt

        Thanks for the info, I wasn’t aware that PhoneJS is now DevExpress.