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.

Lanyard

not sure why my question was voted down. I've been doing a lot of research. I need some clarification please. There are so many different resources I've read that have different ways of doing things. Through my research I think I've figured out an approach. I just need some validation of my assumptions. – Lanyard

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.

Kimikokimitri

Thanks for your response. In regards to loadPage and changePage, jQueryMobile is removing pages from the DOM when I navigate away from them as per the documentation. Since the page is no longer in the DOM, then changePage fails. So, when I land on a page, I'm using loadPage to load all the pages that are a possibility into the DOM (it's manageable for now) then I can call changePage as needed. Each page has a "type" attribute, so I can remove all pages of a certain type when user navigates away to a new area where those old pages are no longer needed. Is there a better way? – Lanyard

If you set the data-dom-cache="true" attribute on your data-role="page" elements then jQuery Mobile won't remove the pages when they are navigated away from. Otherwise, I make sure to manually set the data-url attribute for each data-role="page" element to it's absolute URL so when you use: $.mobile.changePage('/about-us/default.html'), the framework will be able to match that string to the data-url attribute for the page (if it exists in the DOM already). – Kimikokimitri

Gotcha. Thanks for the tip. I'm super focused on performance and am worried that the DOM will fill up with pages. App has different sections, so if I set data-dom-cache="true", then I'm worried the DOM will fill up over time. So, I created an approach where each page has a type attribute with the value of the section it belongs to. So when user goes to a different section, then I can remove all pages from the old section. This is DOM maintenance. Is this approach ok? I'm reluctant to allow the DOM to fill up with pages. Thanks again for your help. – Lanyard

That should work just fine. It's a good idea to manage the size of the DOM especially with mobile devices. You can use Chrome Dev Tools or Firebug (for Firefox), or whatever dev tools to check the serialized size of the DOM for your site. This will give you a good idea how much memory is being used at any given point in time and if you need to do more or less DOM size management. – Kimikokimitri