asp.net mvc, jquery mobile, phonegap architecture best practices

Question

I'm developing a mobile app using ASP.Net MVC to generate HTML 5 pages. The HTML 5 pages will use jQueryMobile's loadPage to make calls to ASP.Net MVC to load pages into the DOM. Then it will use jQueryMobiles's changePage to make the page active in the DOM based on the user's interactions with the app. Calls to the MVC app will invoke different webservices to retrieve the source data to construct the HTML.

We plan on using PhoneGap with the app so we can submit the finished app to Apple and Android stores. My app does not need to interact with a device's native functionality (contacts, geolocation, etc.) Since we do not need to interact with the actual device's OS (except to make jQuery ajax calls to MVC app), then is PhoneGap really needed? Is the approach I've described above an appropriate way to make a web app viable on mobile devices?

Since my application is asp.net mvc and will be hosted on my servers, what gets sent to the Android and Apple stores? Is this where PhoneGap comes into play? Does PhoneGap create an executable of some sort that is submitted to Android and Apple stores? Then this executable is downloaded onto client devices? I'm assuming the executable will then make calls out to the MVC site via URL to retrieve the application HTML?

Am I looking at this correctly? Thanks for your help.

Answer 1

Phonegap (or some substitute) is not quite required but very helpful to create an app package from your HTML/JS/CSS source. Phonegap doesn't create the executable (your IDE does that) but is a framework of Java to JavaScript functionality (making it possible to run Java code from your JavaScript).

Phonegap basically wraps your HTML/JS/CSS site in a webview so that your code can be interpreted by the device's browser (sometimes in a more sand-boxed manner than running the browser normally, for instance pre-iOS-5 webview instances do not get the Nitro JS engine so they run slower than websites in the Mobile Safari browser).

You can create your own webview if your site is so simple it doesn't use any of the other Phonegap functionality but since it's already baked into Phonegap and the device won't have to download Phonegap. You might as well use Phonegap.

Phonegap Build (https://build.phonegap.com/) is a program you can purchase to have your app packages built and submitted to Apple/Google/RIM/Windows app stores. Generally you just use your own IDE to do this however. For instance to create an iOS app you have to use a new Apple computer (you have to have the latest OS version to build the latest versions of iOS packages). iOS app packages are created in XCode, and Eclipse IDE is a very common environment to create your Android app packages: http://developer.android.com/sdk/eclipse-adt.html

I noticed you said you are using $.mobile.loadPage() to load pages into the DOM and $.mobile.changePage() to navigate the user to those pages. If you just use $.mobile.changePage() then it will automatically grab the page with loadPage(). If you are using loadPage() to pre-load content then check-out jQuery Mobile's prefetching abilities: http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-cache.html

UPDATE for 2014

I have recently built some applications using Cordova 3.5 and the build process was very much so simplified. The package building process is now managed via your system's console and everything from installing plugins to rebuilding an application package is much easier.