A quick introduction to PhoneGap
I was asked to provide an introduction to PhoneGap, PhoneGap Build and generally the whole idea of developing mobile application for many mobile platforms from single source code, using HTML, Javascript and PhoneGap mobile framework. This article is a summary of this introduction.
Contents
A really quick introduction
For those really impatient, let’s start with a bunch of links. We’ll continue to some robust explanation just after that:
PhoneGap Build is used for nearly-automated build in cloud without installing anything locally (you hust provide zipped source code; regular PhoneGap requires local installation of whole environment; details later).
TestFlight is a tool for testing and partially debugging. It has some significant social side, allowing you to control distribution of debug versions of your application to remote testers spread around the world and also to gather feedback remotely. I used it for some time, but resigned later. Mainly because the fact, that I haven’t got many testers (just a few people, that I could reach by a regular mail) and because Android version of TestFlight was “all the time comming soon”.
Meet PhoneGap itself
Developing mobile application with PhoneGap means developing a website (HTML + CSS + JS). Nothing less and a little bit more. The only difference is that Javascript is enhanced by PhoneGap API, designed for mobile devices. Some of these are specific to mobile platforms (handling file uploads, playing sounds, reacting on hardware or system events etc.). Some of them are as compatible with modern browsers as possible (for example, Geolocation i LocalStorage objects are identical W3C specification and are used in PhoneGap in exactly the same manner as in case of web browsers).
So, developing mobile application with PhoneGap generally means to design its interface with HTML and CSS (and maybe some frameworks, to make things easier and look better) and then adding some logic to it, using Javascript enhanced with PhoneGap API. That’s all folks.
Once you done, you compile your application (either locally in PhoneGap or remotely in PhoneGap Build). All that PhoneGap compiler is actually doing is to pack all your files together, add application launcher and write final file in format, that is compatible with major mobile platforms and accepted by mobile application stories.
Launcher added by PhoneGap is used for:
- running main application in give mobile platform’s system (i.e. in Android, iOS etc.),
- providing your application with unified API (translating your app’s commands into mobile system-specific operations),
- starting a
WebView(a bit changed and enhanced mobile web browser), in which your application is actually run.
This is very convenient solution and extremely fast approach. Knowing only Javascript (having only one developer) and having single source code base you can develop a mobile application for six most popular mobile platform (note, that due to low interest, there of them are going to be abandoned by PhoneGap soon, leaving Android, iOS and Windows Mobile the only key players here).
However, there isn’t anything for free. As mentioned below, PhoneGap is slow. And PhoneGap-based mobile application are even slower.
Three times optimization!
Keep your eye on performance. Using powerful, yet clumsy frameworks (like Bootstrap) does give your mobile application and outstanding look&feel, but in the same time produces a small monster, that will work quite slowly on most modern devices and can render your mobile application virtually unresponsive on some old, slow ones. After dealing with this stuff for some time, I resigned from “beautiful buttons” offered by Bootstrap for hand-coded simple user interface mainly because I needed a simple mobile app, that was working fast on old mobile devices (with Android 2.x) and Bootstrap-based PhoneGap application turned out to be an overkill.
Quite large, but still not biggest Bootstrap-based mobile application written with PhoneGap was dying even on my dual-core bright new Google Nexus. While native application were deadly fast on the very same hardware device. Keep that in mind.
And in most cases you’re forced into using simple UI, while coding these apps in native languages would allow you to design beautiful, yet fast applications. But, that would require you to hire three or more different developers (knowing Java for Android, ObjC for iOS, C# for Windows Mobile etc.).
So, to summarize, you have a convenience of quickly developing mobile application for many mobile platform, but you live, eat and sleep with “performance optimization” on your month. In my case,for example, changing jQuery into Zepto (which offers 80-90 percent of jQuery’s functionality, while having really small code base) was a must.
A word about PhoneGap Build
You can build your mobile apps in two ways: locally in own (PhoneGap) or in cloud (PhoneGap Build).
First option gives you a maximum flexibility. You can write your own custom plugins (in native languages, like Java for Android) and include them by your own API, extending core PhoneGap API. This, however, kills idea of having single source code base for all mobile platforms completely. For this reason and for the fact, that I didn’t have much time to kick-start my mobile application experience, I have never actually tasted this way so far. You’ll need to follow this path yourself.
For those preferring single code base and ease of building in cloud, PhoneGap offers its own set of plugins, that groves every day and includes a lot of nifty stuff.
PhoneGap Build is offered in free and in paid plans. First allows you to keep as many open source applications as you want (is able to build application from GitHub repository only) and one, single private application (able to build from .zip file). Since (except for some pretty useless debug tools) PhoneGap build is used for compiling applications only, there is no problem for me to go with paid plan, store all my private apps locally and exchange then among this single free slot.
If you’re not comfortable with that then either think about paid plan (starting with 25 USD per month) or about local environment, where you can build as much as you want and whatever you want.
Certificates
For building mobile applications for most platforms (except for iOS and official applications for Android), source code and PhoneGap Build (or local environment) is all that you need.
For iOS you need some extra stuff:
- signing key,
- certificate,
- physical access to some Apple computer (iMac, Mac Mini etc.).
You need Apple account enrolled to Apple Developer Program (enrollments cost 99 USD per year) to get your certificate. You need access to an Apple computer to get your signing key and to have access to XCode, some developer stuff and AppStore app uploader program.
Developers account for Android is by far cheaper (25 USD of single, life-time enrollment fee) and is required (along with proper certificate) only for publishing application in Google Play. If you only want to compile your application, you don’t need anything. Very similar thing goes for Windows Mobile (and Windows Marketplace). While, in case of iOS, you’ll need all above mentioned stuff even for just compiling.
For these reasons, I failed to build any iOS-based application using PhoneGap so far. I’m planning to enroll myself to Apple Developer program and write some nifty article about that some time later. See next chapter.
Last words: deployment
Having developers accounts and access to mobile application stories is also important (actually key) for installing your mobile application on typical mobile devices. In other words, officially you’re not allowed to directly install PhoneGap-based application on mobile device.
On Android you need proper device configuration (you need to enable application installation from unsafe sources). On iOS you need to jailbreak your device (which is illegal and voids your device’s warranty) and on Windows Mobile you’re completely not allowed to install mobile application from any other source than Windows Marketplace (you can install application from SD card only if it was previously downloaded from Windows Marketplace).
That would be all from my side as for introduction to PhoneGap. Have a nice day, folks!