PhoneGap Explained Visually
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
I’ve been “out and about” lately, attending tech conferences, meetup groups, and meeting with developers in their offices, and I am getting great feedback on mobile development & PhoneGap. There are some common questions that I am often asked, and I hope this post helps everyone understand PhoneGap better.
PhoneGap User Interface
Think of this as a “headless” web browser. It renders HTML content, without the “chrome” or window decoration of a regular web browser. You build your application to take advantage of this space, and you build navigational/interactive/content elements and application chrome into your HTML & CSS based user interface.
The web view used by PhoneGap is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView. Since there are differences in the web view rendering engines between operating systems, make sure that you account for this in your UI implementation.
You can read about the PhoneGap API and all of the native functionality it exposes at docs.phonegap.com.
PhoneGap Application Packaging & Distribution
For iOS applications the output is an IPA file (iOS Application Archive), for Android applications the output is an APK file (Android Package), for Window Phone the output is a XAP file (Application Package), etc… These are the same application packaging formats used by “native” applications, and can be distributed through the appropriate ecosystems (iTunes Store, Android Market, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc…)
PhoneGap High-Level Application Architecture
Specific application architectures are going to differ on a case-by-case basis, however most data-driven applications employ the following basic architecture. The PhoneGap application acts as a client for the user to interact with. The PhoneGap client communicates with an application server to receive data. The application server handles business logic and communicates with a back-end data repository.
The application server is normally a web server (Apache, IIS, etc…) and has a server side scripting language such as ColdFusion, Java, .NET, PHP, etc… PhoneGap is agnostic of back-end technologies and can work with any application server using standard web protocols. The application server performs business logic and calculations, and generally retrieves or persists data from a separate data repository – this is normally a relational database, but could be any structure or mechanism for data persistence.
PhoneGap applications generally do not talk directly to a database; communication is routed through an application server. The client to application server communication can be based upon standard HTTP requests for HTML content, REST-ful XML services, JSON services, or SOAP (or websockets if your OS supports it). These are the exact same techniques that you would use in an desktop-browser based AJAX application.
Multi-page client-side application architectures are supported, but are not recommended because you lose in-memory variables when loading a separate page.