Saturday, December 8, 2012

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$(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.
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 From the source code you can know how the index.html and application.js work.
  1. All related source code:
  2. Our company is doing PhoneGap development outsourcing. Contact Us to request PhoneGap development service.

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.
If you want to develop the best PhoneGap app, you can:
If you are looking for PhoneGap programmers or PhoneGap developers, please feel free to contact us. Free quote is available.

Wednesday, November 21, 2012

Is PhoneGap right for your projects?

Firstly, you need to know that PhoneGap is not suitable for all kinds of projects, but PhoneGap is quite suitable for very many projects, possibly most projects.
The below scenarios are possibly not suitable for PhoneGap:
  • Background services. For example, calendar, weather etc.
  • Games. As PhoneGap runs in Javascript that runs not fast as Java, C#, and most games have a lot of calculations. So PhoneGap is not suitable for games, because of the performance issue.
PhoneGap suits you the best if you have requirements like below:
  • You want your application to run on different popular mobile systems. i.e. iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian.
  • You have insufficient budget for many mobile platforms. 1 PhoneGap developer = 7 mobile developers. As I know, PhoneGap projects cost 1/5 of what are developed in different.
  • You cannot wait a long time to put your app in live for many platforms. PhoneGap makes it possible: write once, run everywhere.
  • You already have a working website, and you want to let it work on mobile devices. There will be very few code changes to port a website to mobile, as PhoneGap uses the same technologies as websites: CSS, HTML, JavaScript.
Of course, you may have very complex requirements, and it’s hard to tell if it’s suitable to be developed in PhoneGap. If you are still not sure if your app should be developed in PhoneGap, I’m very glad to help for free.