Ask Shane: PhoneGap - to JQM or not to JQM

Jeremy says,

I am building an app using PhoneGap and JQuery Mobile.

JQM loads every page via ajax and even if the header and footer are fixed it still expects every page to have them which is absolutely disgusting. If you make a change in a header then you have to do it on every single page! I have found a great article that dynamically inserts the header and footer into each page ( but this is still annoying for sub-pages and making sure the correct tab is highlighted.

Since I am not using JQM themes, icons and its page navigation is very basic I am thinking if I even need to use it at all? I can just use JQ (not JQM) AJAX to update the relevant parts of the UI as needed.

What do you think?

Right, so, I've done this myself at my day job. I created a universal header and footer outside of any page. Upon "pageinit", you can query the page to see if it has a header and/or footer and then inject the contents of my universal headers and footers appropriate. As the page progresses through it's normal event flow, the usual beautification will proceed. Here is an example of inserting a universal header and footer with jQuery Mobile. I've even added a data attribute to page 2 to specify which element of the footer to set as active. At this point, the development is pretty easy and declarative again.

As an alternative, you might think about generating your pages on the fly using some sort of client-side templating system like jsRender. Here is an example of using jsRender to generate pages on the fly from the Flickr APIs. You could do this completely without jQuery Mobile if you liked.

But, let me also say, since you're using PhoneGap, you're guaranteed to be working on a fully functional smartphone. Chances are, you know exactly which platform you're targeting as well. Much of JQMs weight is built around progressive enhancement so that EVERYONE can view the content. Clearly, you don't need all that. Now, the only question is, do you like the ease of coding a touch based UI in JQM? If you're not enamored with it's simplicity and want to "roll your own" you will not be in any kind of a minority. Of all the platforms, JQM is the most used by a long shot but there are MANY developers who are choosing to not use any library short of jQuery itself. If you want to go that route, all you need to do is be sure you use the meta viewport tag to make it mobile.

Hope this helps,

Now, go be brilliant!