While looking at the analytics for my blog, I’ve recently started to see a lot of search phrases similar to “what is phonegap?”, “how does a phonegap app look?”, “how to get started in phonegap?”, among many, many others. In this post, I hope to shed some light on some basic questions to help you understand and start working with PhoneGap.
In case you don’t feel like reading the whole thing, here are quicklinks to each question:
- What is PhoneGap?
- How does a PhoneGap application typically look?
- How do I get started in PhoneGap?
- How do you debug PhoneGap applications?
- How do you architect PhoneGap applications?
- How do you get phonegap apps on devices and into application ecosystems?
- What is the difference between PhoneGap and Adobe AIR?
What is PhoneGap?
PhoneGap is 100% open source, and also goes by the Apache name “Cordova”. You can read more about Apache Cordova project status at: http://incubator.apache.org/projects/callback.html
PhoneGap can be used to build applications that target multiple platforms, including Apple iOS, Google Android, Windows Phone, BlackBerry, HP WebOS, Symbian, and Bada.
You can read more about the supported platforms and their supported features at http://phonegap.com/about/features
How does a PhoneGap application typically look?
Since the UI rendering engine is the mobile device’s web browser, PhoneGap applications can literally look like anything. You can use standard HTML & CSS to make it look like a normal web page, you can use a UI framework like jQuery UI, Kendo UI, Sencha, Twitter Bootstrap, or Skeleton (or any other HTML/CSS/JS user interface framework). You can also use CSS styles/themes to make your web content look like native apps, such as iUI to mimic iOS or Android, or bbUI to mimic BlackBerry.
PhoneGap applications can use pinch/zoom gestures to zoom in & out, or you can lock the viewport scale using the viewport metadata tag. You can have the page scroll using normal browser behaviors, or you can use a library like iScroll to enable touch-based scrolling of specific container elements.
How do I get started in PhoneGap?
Getting started in PhoneGap is easy. For 90% of a PhoneGap application, all you need is a text editor. PhoneGap also integrates with device-specific development environments very easily. You can view “getting started” guides for all application platforms at the links below:
- iOS: http://phonegap.com/start#ios-x4
- Android: http://phonegap.com/start#android
- BlackBerry: http://phonegap.com/start#blackberry
- Windows Phone: http://phonegap.com/start#wp
- WebOS: http://phonegap.com/start#webos
- Symbian: http://phonegap.com/start#symbian
How do you debug PhoneGap applications?
Develop as much as possible on the desktop browser
- Chrome Developer Tools: http://code.google.com/chrome/devtools/docs/overview.html
- Firefox via FireBug: http://getfirebug.com/
- Safari Developer Tools: https://developer.apple.com/technologies/safari/developer-tools.html
- IE Developer Tools: http://msdn.microsoft.com/en-us/ie/aa740478
- Opera Developer Tools: http://dev.opera.com/articles/view/opera-developer-tools/
Once you build the main aspects of your application using desktop tools, you can switch over to a device-specific environment to add device-specific behavior and integrate with PhoneGap APIs.
It is imperative that you test your applications on actual devices! Actual devices will have different runtime performance than desktop browsers and simulators, and may unearth different bugs/issues including API differences and different UX scenarios.
Debug With debug.phonegap.com
Remote Web Inspector Through iOS 5
// Uncomment to enable remote debugging
Then launch the application in the desktop iOS Simulator. Once the app is running, open a local Safari instance to: http://localhost:9999/. This will launch the remote debugger, complete with breakpoints and script introspection.
More Debugging Info
How do you architect PhoneGap applications?
PhoneGap applications can be architected with any of the common JS architectural frameworks, including Angular, Ember, Backbone, Mustache, etc… Fellow Adobe evangelist Christophe Coenraets has some great content on these topics.
How do you get PhoneGap apps on devices and into application ecosystems?
PhoneGap applications can be deployed using the same guidelines for native applications for each given platform. You must follow the rules of each hardware platform/vendor, and there is no way to get around that. You can compile the executables for each platform yourself using each platform’s specific build process, or you can use build.phonegap.com to compile them for you. build.phonegap.com is a hosted service that will compile platform-specific application distributable files for you. In either case, the output of the build process is a platform-specific binary file: IPA for iOS, APK for Android, etc… You can read more about distributing to various application ecosystems, and each system’s signing/certificate requirements at:
- iOS App Store: https://developer.apple.com/programs/ios/distribute.html
- Google Android Market: https://market.android.com/publish
- Amazon App Store: https://developer.amazon.com/welcome.html
- BlackBerry App World: https://bdsc.webapps.blackberry.com/devzone/appworld
- Barnes & Nobe Nook Store: https://nookdeveloper.barnesandnoble.com
- Windows Phone Marketplace: http://msdn.microsoft.com/en-us/library/ff941089(v=vs.92).aspx
What is the difference between PhoneGap and AIR?
Air applications can be built for iOS, Android, BlackBerry Playbook, and the desktop (mac and windows), with future support for Windows Metro (Windows 8 mobile interface). You can read more about AIR’s supported platforms at: http://www.adobe.com/products/air/tech-specs.html
PhoneGap applications can be built for iOS, Android, BlackBerry, Windows Phone 7, HP WebOS, Symbian, and Samsung Bada. You can read more about PhoneGap’s supported platforms at: http://phonegap.com/about/features
ActionScript has strongly-typed objects and supports classical inheritance programming models. AIR applications can also be built using the Flex framework, which allows you to rapidly build enterprise-class applications. Components in AIR applications are logical objects that have behaviors, properties, and a graphics context.
There are some fundamental difference in the syntax of building these applications, however the basic concepts of interactive design and interactive development are identical. Both platforms have valid strengths, which I could write about ad nauseum… I’ll save that for another post.