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.

65 comments:

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.

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.

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 license2. 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.

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.

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.

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.

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.

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.

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

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!

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.

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 PGb) Cross platform HTML5 that looks like an app in PGc) Vanilla js you'll have to rewrite a billion times for each platformd) 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.

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.

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.

"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.

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.

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.

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.

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....

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.

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.

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.

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.

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.

Hi, This reading the comments, but it seems like a great deal of readers need to stay on topic to try and add something to the original topic. I would also encourage all of you to bookmark this page to your most used service to help get the word outpage is very informative and fun to read. I am a huge follower of the things blogged about. I also love. Thanks . cell phone detector

What i can say. In past five months., in my project, i had worst experiences with jqm. Flash transitions, worst performance, etc, etc. bad documentation, updates slower..... Now, my desire is only cry... I found Ionic framework and i downloaded some apps and i liked much. well, how this is my first experience developing apps, certainly my mistakes assist me to apply good frameworks in the future

It is truly a great and helpful piece of information.I am satisfied that you simply shared this useful information with us.Please stay us informed like this. Thanks for sharing. I know something information, to know you can click hereBuilders BrisbaneRenovations brisbane

Hello all, anonymous poster again who was on the side of JQM about half way up the comments....

I think it's slightly trite to add "use ionic framework" as a rebuttal to arguments about JQM and PG from 2 years ago. I absolutely agree you should now use ionic framework, but at the time there wasn't much choice outside of JQM or "write your own stuff that you will have to support". I bring this to the attention of people googling this some years later and thinking "yeah right on".

Given angular is now going through an "odd" patch between v1 and v2, it's interesting to see what happens to ionic... I just wish they would hurry up and get it out of beta and support windows phone (or whatever it's called this week) fully.

Is with my other comments I look forward to being completely ignored and then someone in 2015/6 posting: "bah dude, why not use wangle3000, it's a js framework that does everything ever, ever, ever with zero overhead" as if people posting "now" would have known that "then" *sigh*

This is going to be a very interesting post as far as we concern on the related topic of phonegap development and it will be going to be more developed in the future for the more enhancement and development of this phonegap technology.

Videocon and stay in touch with your Contacts, Friends, and Loved ones.Seamless Roaming across India. National Roaming is Pre-Activated on Videocon Prepaid Connection with Zero Monthly Rentals. Tariff while Roaming anywhere in India: