Sunday, November 25, 2012

Who Is Murdering PhoneGap? It's jQuery Mobile

So many people are now arguing the bad performance of PG apps, because of that, many developers stopped entering the army of PG development.
Is PG really so bad?
The answer from me is absolutely NO.
I have to admit that there are so many bad PG apps. Why? Who made them? The most PhoneGap developers. But the developers are innocent of murdering PhoneGap. The real killer is jQuery Mobile.
The bad choice of jQuery Mobile for PhoneGap apps:
1. Not PhoneGap targeted.
jQuery Mobile is not targeting only for PhoneGap apps, instead, it’s developed for mobile WEBSITES. The pages/scripts/resources are organized in a website way, not a native app way. Take pages navigation for an example, a web app navigates to another page by changing the URL, but for desktop/native apps, we new an instance and put it into a wrapper control, the wrapper has full control to the new page, and can receive events of the page, which is quite different from web apps. So, if you are using jQuery Mobile to develop PhoneGap apps, you are probably missing a good application architecture.
2. Too fat & bad performance.
jQuery Mobile does provide very-very many controls/functions, but only a very small part of them are used in apps, which causes much waste of performance. I’d like to take a simple function for example, the scroll. As we know, most mobile browser cores don’t support fixed position, so we have to write custom code to do it and handle the scrolling. jQuery Mobile writes a lot of code for this function, at the same time, a few related touch functions are also provided, but in most cases, the developers only need the scroll. In a word, jQuery Mobile handles too much things for a simple action.
3. Bad documentation.
The jQuery Mobile documentation is not really documentation, but examples. Yeah, they are good examples, but absolutely bad documentation. Not all features are included in the examples, they missed many. This is quite hard for the developers. As some features are hidden from the developers, many developers have to write ugly code.
4. Critical bugs/issues not fixed.
There are so many posts about jQuery mobile scrolling and page flashing. Unfortunately, I don’t see a remarkable answer to their questions. I asked a few developers, they seem to have given it up, and leave the bug/issue as is.
How to make a good PhoneGap app? Here I can share some general ideas:
  • 1. Write your own javascript PhoneGap architecture if you are good at JavaScript. If you are not, you can follow me on codeplex where you can find PhoneGap architecture and demos.
  • 2. Don not write future code. You don’t need to write code that “may be used in future”, instead, write code that is really used.
  • 3. Resolve the critical bugs/issues by yourself. To make a good PhoneGap app, you must first be a JavaScript master, which means you can read others’ code and find the best solution for best of your app.
If you want to develop the best PhoneGap app, you can:
If you are looking for PhoneGap programmers or PhoneGap developers, please feel free to contact us. Free quote is available.

53 comments:

  1. I concur Leo. I wish people wouldn't use jQuery Mobile when developing PhoneGap apps. It requires you to load a lot of code with jQuery being a dependency of jQuery Mobile and a lot of that code is just not necessary. jQuery is a great framework but there is no need to include support for IE and FF in your mobile app running on a webkit based browser. As well there isn't really a good Android theme for jQM so all of your Android apps look like iOS apps.

    ReplyDelete
  2. I have no argument with your post, however I am curious if there are any frameworks you would recommend for use with Phonegap? jQM is a beast even in a browser context, but the reasons people use it are obvious:

    1.) It is free.
    2.) Designing a mobile UI from scratch is a LOT of work. There is a reason Bootstrap has been implemented all over the place.
    3.) It helps enforce uniformity (even if it is extremely awkward at times)
    4.) Not all developers are web designers, and not all developers have good access to designers especially when they are writing code to evaluate a platform.
    5.) Quick searches on google for "phonegap web framework" will lead you most likely to jQM.

    Quick searches for mobile frameworks delivers other options, but none I have found are developed to be used with PhoneGap specifically.


    ReplyDelete
    Replies
    1. Hi Greg,

      Thanks for your reply.

      I actually know a free PhoneGap framework. It's developed by my team. Though it's not perfect by this moment, we are improving it all the time.
      URL: http://cordova.codeplex.com/

      Core features:
      1. Completely free with MIT license
      2. PhoneGap targeted. Web features is not supported, for example, click, nav by URL. It lets the developers write apps in a desktop app way, not the web way.
      3. We have designed a suite of UI. We'll design more soon, as my team has a UI master.Some controls like toast, dialog are also available.
      4. In a word, best performance is our goal.

      If you are a JavaScript master and interested in improving it, I'd like to invite you to join our team.

      Regards,
      Leo

      Delete
  3. I used phonegap with sencha and that was the slowest and worst thing i've ever used as a programmer.

    no comments, phonegap can die by itself because most people require it to be faster, stabler and for gods sake easier to install. dont ask me why but I spent a whole afternoon trying to get it to work, with jqm it was a piece of cake straight out of the website.

    long live jqm.

    ReplyDelete
    Replies
    1. I don't think PhoneGap will die, instead, I think it's a very good thing. It will be a replace of most native apps, just like web apps replacing desktop on PC.

      Delete
  4. I hope Phonegap will find its success. It has a good idea behind, all it needs it's a better webkit only js framework.

    ReplyDelete
  5. Hi,
    I am using jQM and I am not super happy but it does a really good job of looking and have alot of nice features .. and a nice Theme Builder.

    I would love to get a better framework , but for now I have chosen to live with it.

    Just my 2 cents

    ReplyDelete
  6. Good work, i appreciate your efforts, Thanks for your content.


    iphone apps development

    ReplyDelete
  7. Leo, I agree with you 100%, but you're missing the other 50% of the problems killing Phonegap.

    This past May, I made a presentation of Phonegap to the Triangle Android Users Group (TriDroid), where I mentioned that I had started out w/jQuery Mobile, only to ditch it after a week, which in the end made me realize just how wrong JQM was for the job.

    * http://bit.ly/tridroid-phonegap-17may12

    Instead, I created a simpler Single Page App (SPA) built off of a very light weight responsive-design, grid system 'Foundation' which didn't suffer the performance hit I suffered w/JQM.

    That said, the other 50% that's killing Phonegap are twofold:
    a) developer setup w/Eclipse &/or XCode -- ugh -- whatta pain
    b) infrastructure tools not 'baked-in'

    I think point a) has already been raised here by others. But point b), I would argue hasn't really been addressed. Meaning, given how well a Phonegap App performs is in part dependent on how well the infrastructure feeding the app is built -- and how well Phonegap can AJAX into said pipeline w/out blocking, CPU expensive tree parsing, and other fun stuff that can bring any HTML5 app to its knees.

    Anyway, the above opinion + $2.25 will get you a large cuppa coffee a the local Caribou. I'll treat if you're ever here near Raleigh.

    dp

    ReplyDelete
    Replies
    1. You might consider including Icenium in the build services you talk about in your presentation. I find it very intuitive and easy to use.

      Delete
  8. Interesting stuff Leo. Phonegap and it's associated SDKs can be a real pain. What about Phonegap, pure JavaScript instead of the JQM bloat and PhoneGap build to avoid the SDK headache?

    ReplyDelete
  9. Interested to hear comments from the jQuery people though.

    jQuery Mobile has a download builder, so you can strip out unnecessary bits of the framework. http://jquerymobile.com/download-builder/

    Also there seems to an npm module to reduce the size of jQuery as well. http://projects.jga.me/jquery-builder/

    I haven't used either of these, but it might be something to consider.

    Additionally, jQuery 2.0 is going to drop a lot of old browser support. Which is a plus for PhoneGap. A quote from the 2.0 beta release: "If you’re using jQuery in non-web-site HTML situations such as an Android, iOS, or Windows 8 app, or a Chrome/Firefox add-on, jQuery 2.0 is an awesome choice."
    http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/

    Leo, at the end of your blog post you seem to be gloating, to me it painted you in an arrogant light. I suggest being a little humble.

    ReplyDelete
    Replies
    1. Thanks Simon. I have been working with jquery mobile and phonegap recently. Many of the projects are from old existing projects, and the clients want us to make improvements. During which I suffer much from jquery mobile, fortunately, our team made some improvements.

      The biggest problem that jquery mobile brings to us is that the app works in a web-way. Not like a native app.

      Delete
  10. Hey Leo

    Why don't your team come up with thinned and optimized version of JQuery mobile for Mobile-Web apps? (i mean, not just specified to PhoneGap)

    I think that is much wider and positive approach

    I know you would have considered it, can you share why that ma y not be a better approach, I am sure you will get lot of community support on it

    ~Raj

    ReplyDelete
  11. @Mean Dean: you might consider including Icenium in the build services you talk about in your presentation. I find it very intuitive and easy to use.

    ReplyDelete
  12. Any of you looked into Enyo (the former WebOS JS framework) as an alternative to jQM/Sencha?

    http://enyojs.com/

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. I've been a native iOS app developer for some time now, but the next project I'm working on is pretty straightforward and Phonegap looks like a good fit.

    Although I haven't yet written a line of code from phonegap, I've been researching and was just about to delve into Phonegap with JQM. Performance seems to be the major concern with JQM, although it's a trade off I think I can live with in this instance.

    I did come across this stack overflow article and wondered if many of you have tried this "lazy loading" aka "deferred" approach to loading JQuery.
    http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together

    ReplyDelete
  15. Hi Guys,

    I am developing chat app using phonegap and jquerymobile. i will load jquerymobile from url..(like src="http://"). Is this still kills phonegap's performance?

    ReplyDelete
    Replies
    1. Downloading from the web is going to further hurt the performance and in no way better it

      Delete
  16. Hi to all PhoneGap and JQM users. I don't use JQM - why? Because Leo is absolutely right. JQM/Sencha tries to implement all the iOs and Android patterns in the browser - of course you have a lot of overhead and slow performance. I wrote my PhoneGap completely whit Google Web Toolkit and its running really fast. PhoneGap makes the connection between hardware and browser and doesn't have any performance issues. PhoneGap is still alive!

    ReplyDelete
  17. Devil's advocate here, it's neither phonegap nor JQM that is bad, it is the implementation approach the developer takes using JQM and PG. If you literally write web pages exactly as on your website and put them in PG, then yes they will run like a dog, there "ARE" ways to make JQM work very well on PG, but you need a good founding of how JQM and .js works... which a lot of developers just... don't... have.

    ReplyDelete
    Replies
    1. This is so true, yet no one even bats an eye to this comment.

      Makes me think there are only people here who like Phonegap and dislike JQM because they cant get it working.

      geez

      Delete
    2. Hello my also anonymous friend, I have posted a more detailed reply on October 28, 2013 at 9:47 PM some posts down, I suspect it will get deleted though. I am absolutely adamant on this point though, if you are using JQM and PG together and are finding it slow, YOU ARE WRITING JQM WRONG!

      The cross platform support boiled into JQM makes writing portable, tweakable apps much easier! And what's more the latest 1.4 version is claiming performance gains throughout the framework.

      The approach you take is all a big toss up. Do you want...
      a) Actual web pages in PG
      b) Cross platform HTML5 that looks like an app in PG
      c) Vanilla js you'll have to rewrite a billion times for each platform
      d) God awful javascript frameworks (that make no sense and are as complex if not more so than just learning the native code), that renders native stuff (stuff like appcelerator or windows studio, or other "platforms" that are trying to push "HTML5" to make native UI)
      e) Native code

      p.s. I'm betting you see elements of this debate appear in mainstream consultancy reports within the next year or two. If you are that consultant, hello, must be good earning a cart load by googling this stuff? Let me save you some time.... developers who are "worth their salt" don't want native and they don't want native that is written using javascript, they want actual REAL HTML5 with UI's that work well and look good, from off the shelf open source frameworks. Everyone else is just messing about for the fun of it.

      Delete
  18. Why are you using a different HTML file for each page? In our experience this decreases performance when compared to showing and hiding divs within one HTML page. This method also causes headaches with page transitions. I'd like to try your framework in one of our projects but I'm unsure of this method of page switching.

    ReplyDelete
    Replies
    1. This helps you build a very complex app. We had suffered putting all pages in a single file. It was a nightmare. And I can promise that you will not find any performance issues with separated pages, as we have done a few app's.

      If you understand the style of the index.html, it should be very easy to do page transitions.

      Finally, just think about your app as a desktop one, and you will get to know the index.html works just like a window with no border.

      Delete
    2. It's also worth mentioning you can develop with separate files and have a guild build task to combine certain or all templates later.

      Delete
  19. Is this project still alive? Is it called "Cordova" or "Nova"??

    Ambitious and promising, unfortunately maybe a bit too much so - can't get the sample app to run ("missing nova.Carousel.js") - hopes for a simple alternative to jQuery Mobile fading again...

    ReplyDelete
    Replies
    1. "Cordova" is the open source apache project but it's still packaged as phonegap by Adobe, there is also a new CLI using node/npm that came out with version 3.0.0 which makes developing these applications a dream.

      Delete
  20. I tried to used JQuery Mobile and it was a realy disaster, it's very slow! I would recommend using Cordova, Zepro and JQuery Touch.

    ReplyDelete
    Replies
    1. Here is another post that experimented jQM performance. The result is surprising. Check here:
      http://apachecordova.blogspot.com/2013/08/how-jquery-mobile-eats-phonegap-performance.html

      Delete
  21. If you are familar with java gwt-phonegap is also a perfect solution, especially for business applications.

    ReplyDelete
  22. I'm not a fan of jqmobile but I completely disagree that phonegap is deserving of the praise you're giving it.

    There is are both phonegap and cordova files included in the platform builds, but they don't specify which you need to include. Including cordova is the only way to get plugins to work, but then you get 'cordova.js included multiple times.' errors. Including phonegap throws "cordova class not found" errors...

    It's really just sad that such an ambitious project still hasn't found the grounding to allow you to create a practical application easily. Sure, the demo apps get up and running without an issue.. but as soon as you make an application that actually does anything, it breaks.. fun.

    Anyway, I hope it gets better because it's a fantastic idea, but right now, it needs way too much work for me to do anything other than bitch about it.

    ReplyDelete
    Replies
    1. Hi, I do think PhoneGap is almost perfect. I guess you don't find a good project architecture for your phonegap projects, that's why you think cordova.js is hard to use.

      Our phonegap team have done some projects recently without jQueryMobile, the performance and user experience are really good, and the development is fast. PhoneGap saves much cost for the clients.

      If you want to know how our PhoneGap team organize the project files/architecture, you can find some demos with source code here:
      http://cordova.codeplex.com

      Delete
    2. Leo, The demo you have put on codeplex cannot be used and in my opinion could be the worse demo of your product you could provide.

      The maze app's help page says tap left, right, top bottom to move! what left, right, top, bottom? Neither my tablet nor my phone has such buttons!

      Delete
  23. Guys, finally, what's the best option for today? Nova? gwt-phonegap? write everything manually?

    ReplyDelete
    Replies
    1. Our company has built more than 5 PhoneGap APPs based on Nova PhoneGap Framework. Another important feature of the framework is it allows you to handle every backbutton events for Android devices for every page. This pleases our clients quite a lot.

      Delete
    2. Leo, one of the demos provided on your website uses jquery minimum and Nova at the same time. I am confused, you are ok with JQuery minmum but not with Jquery mobile?

      Delete
  24. As I stated a quiet a few posts up, the reason you are finding it slow is because you don't know how to code performance JQM code. Plain and simple. In fact I'd go as far as to say most javascript developers don't really understand the language or how to code performance javascript.

    The fact of the matter is, writing hybrid apps probably has the same complexity as fully native (if you know what the hell you are doing, which I suspect most don't), HOWEVER, once written it is a MUCH smaller task to port the hybrid apps to other platforms..... THIS is the true reason why I use JQM and PG together, once you get past your own arrogance (and I speak as a person who had this view) that you "know javascript" because you've been a web-monkey for years and you actually truly start to learn how to code it properly and how to optimise loops and selectors and the like, you realise that coding performance JQM gives you a MASSIVE head start in porting apps. I currently support android, ios, windows phone 8 and a web version of an app using VERY similar code.

    Say what you like, but I'm just gonna keep repeating this...

    You "can" write fast JQM+PG apps if you know how to write performance javascript.... however, I will be so bold to reiterate once more.... MOST javascript coders have no clue as to what they're really doing.

    ReplyDelete
  25. All well and good, but most dev's don't want to throw the baby out with the bath water.

    You're writing an entire framework from scratch ignoring the years of effort and expertise put into JQ and JQM (or any other framework for that matter) simply because you couldn't spend the time to make JQM work correctly. I think you would have gained more by investing more time in understanding and contributing too existing frameworks. Nevertheless, I'm not gonna take away from you what you have achieved, Good luck to you sir, Good... luck....

    ReplyDelete
    Replies
    1. What I'm doing is quite different from that jQM does. jQM is not targeted at PhoneGap, but my framework is only for PhoneGap. You shall get to know the page navigation/app stars/ device events, etc are quite different from jQM if you read my recent posts.

      You can view the source code and you will know it's what jQM cannot achieve:
      https://cordova.codeplex.com/SourceControl/latest#demos/AnnualTargets/www/

      Delete
  26. Some people consider phonegap to be a slow tool, but I think it totally depends on the developer and the language. You can seamlessly generate apps for different mobile platforms using one single code base. This tool is quite easy to use. Future lies in the hands of cross platform app development. Businesses do not want to spend much on individual applications when they have better options to choose from.

    ReplyDelete
  27. This comment has been removed by a blog administrator.

    ReplyDelete
  28. You comment on JQM having bad documentation to which I agree and tell that you're working on an own JS framework specifically targeted for Cordova. After more than a year of development and, to say in your own words, more than 5 apps based on the Nova framework. The documentation (http://cordova.codeplex.com/documentation) is still barely existing.

    ReplyDelete
    Replies
    1. Yes, it is. We now have Chinese version of the doc, but the English one is not completed. As there are very few people out of our company following us, we didn't spent much time on documentation or demos. I hope more people can follow us, though the documentation is not 100% complete, the framework is stable now.

      Delete
  29. Phone gap is one of the tool which mostly developers used for make a website software. Using platform every developers make app which is more and more supportable. Great post!

    ReplyDelete
  30. yeah i know this, i experienced it, i used jqm and handlebars for my project, handlebars was used for the different views (this was supposed to make the app faster), and it was one of my worst experiences as a programmer, because of this i started to investigate more and more, and it seems that using Angular and mobile template (from the same people as html5 templates ) seems like a good idea, also boostrap seems a good idea. ahh and i think using karma also would be a fantastic idea.

    ReplyDelete
  31. Hi, friends
    The post is really awesome with lots of information inside. It has knowledgeable post.
    Thanks a lot for posting this
    Online English Speaking Course in India

    ReplyDelete
  32. You have examined about numerous characteristics of PHP, i likewise lean toward PHP to create web provisions. PHP is quite simple to take in and straightforward dialect.mobile app development // mobile app developers // iPhone application development

    ReplyDelete
  33. Im very suprised to not see Angular mentioned here. I have had great success with it and their modular style works prefect for limiting unnecessary resources.

    ReplyDelete
  34. most people require it to be faster.
    Mysql services
    i likewise lean toward PHP to create web provisions. PHP is quite simple to take in and straightforward dialect.

    ReplyDelete