General Ideas On The Architecture Of PhoneGap Project

Though PhoneGap uses web technologies (html, css, js) to build apps, PhoneGap projects should be quite different from web projects.

Differences between web projects and PhoneGap projects

For web projects, every page is loaded by changing the url. Each page works like a standalone application. We can say, a web project has many javascript applications. In each web page, we need to load all necessary javascript files(e.g. jQuery), because it is a standalone application.

But for PhoneGap projects, the whole project is an application, just like the desktop applications. So there should be only one main window that contains all resources/controls/data etc. We don’t need to reload all base javasccript/css files on changing the “pages”(a page in PhoneGap is only a control).

The index.html

I suggest the index.html should be the startup page of your PhoneGap application. Why? PhoneGap build service takes the index.html as the first page of your app by default.

The index.html only contains the base javascript and css files that are used in the whole app. It shouldn’t contain any other html tags than the body tag. All other pages are loaded through ajax into this “body”.

To make a better index.html, I suggest add a div#body into the body tag. And other pages are loaded into #body. Then you can add other contents(html, css link) to body tag as base template.

The application.js

Your project should have an “application.js” or “app.js”. There is only one instance of Object in the app.js. Let’s named it as “app”. Some global variables are defined as properties of the app instance, for example, app.settings may contain the settings. Some methods should be defined, such as app.start(), app.exit().

Make sure there is only one instance of the application, because many app instances make no sense. I don’t like KendoUI’s code about application in PhoneGap, it writes in the docs:

new kendo.mobile.Application($(document.body), { hideAddressBar: false });

The above code means you can new many instances of the application, but which is definitely making no sense for PhoneGap.

Page Navigations

As mentioned above, all contents are loaded into the div#body via ajax calls. You don’t need to change the URL address as your app is not running in browser. As there may be many page navigations, I suggest you add some methods to app instance for quick usage. For example, app.gotoPage(url), app.goBack(). Then you have full control of your pages, and there will be no flashings on pages changing.

Conclusions:

All of the above are only my personal opinions. I’m open to your comments, and looking forward to any different ideas.

I have worked out a basic solution. You can find all source code on http://cordova.codeplex.com. From the source code you can know how the index.html and application.js work.

References:

1. All related source code: http://cordova.codeplex.com
2. Our company is doing PhoneGap development outsourcing. Contact Us to request PhoneGap development service.