PhoneGap open source framework

Originally created by Nitobi, PhoneGap is an open source solution for building cross-platform mobile apps with HTML, JavaScript, CSS. PhoneGap’s name was changed to “Apache Cordova” when it was donated to the Apache Software Foundation, but reverted back to PhoneGap when Nitobi was purchased by Adobe.

PhoneGap continues to be among the top choices for developers in building mobile apps—and for good reason. PhoneGap has made it easier to build native apps, even if your coding experience is limited to JavaScript, HTML and CSS. What allows PhoneGap to work so well is that it basically allows you to build a web application within a native app container. These assets run in a “WebView” inside a native app within the target platform. This gives JavaScript access to device level APIs which normally isn’t possible for web applications.

PhoneGap Features

It’s important to note that a PhoneGap app isn’t a canned website. It doesn’t convert websites into apps. Using PhoneGap doesn’t mean you only need to have HTML, CSS and JavaScript skills to build a mobile app. Even though it allows you to run web app assets within a native application container, the app doesn’t run on the web, it runs on the device. It runs like a native app and uses the web only to upload and download data. It makes the process of developing web apps faster but it doesn’t necessarily make it easier.

When building mobile apps with PhoneGap it’s already assumed that you have already installed the development environment for the platform that you want. For iOS, you need to run on a Mac with Xcode and iOS SDK. For Android, you need to have Android SDK installed. And for Windows phone and tablets, you have to work on a PC with Visual Studio and WP8 SDK

When building a PhoneGap app, your source code would have 4 main subdirectories

1. “www” – this is where the HTML, CSS, and JavaScript of your app is installed
2. “plugins” – for your plugins (duh)
3. “platforms” – this is where the “www” code goes for each platform
4. “merges” – this is where your platform specific files go, like you style.css files if you want your app to have a different look for each platform.

By default, PhoneGap will launch your app's index.html file, but you can make this any HTML file you want via configuration

Pros and cons of using PhoneGap

Right off the bat, PhoneGap has 3 things going for it.

1. It’s open source and free.
2. The fact that it uses HTML, JavaScript and CSS.
3. It can run on all the major platforms (Android, iOS, Windows 7, mobile web)

This has made PhoneGap really accessible to anyone who wants to build a mobile app. It has dramatically reduced the learning curve needed to build one and you only have to build a single code base for all platforms. You can test and deploy your app on any platform as soon as it’s done. PhoneGap apps can be distributed through the App Store or the Android Market and take advantage of their integrated payment systems. This rapidly cuts down the cost and time investment needed in mobile app development.

Another advantage to using PhoneGap is the fact that it uses a plugin architecture. This gives you access to native device APIs and all the Cordova/PhoneGap plugins available. 

Using PhoneGap also gives developers access to mature value-added solutions that have been developed over the years. Adobe’s PhoneGap Build, for example, enables developers to build for supported target platforms in the cloud, without local SDKs, meaning that one can build and launch an iOS app without having a physical mac machine. PhoneGap Build capabilities are also built into Dreamweaver and Brackets. There’s also Kendo UI Mobile , an MVVM framework targeted for performance on mobile and Everlive which offers a Backend-as-a-Service (BaaS) offering named Everlive.

Sadly, some of PhoneGap’s greatest strengths are also its weaknesses. Its plugin architecture does allow you to extend your apps but there’s no guarantee that the plugins available can support your target platform or if it’s still being updated.

The performance of PhoneGap apps is also an issue. It creates a native app which always outperforms a hybrid and this is evident especially if your app is graphically intense. But improvements in device hardware, WebView implementations, implementing caching or using 3^rd party solutions for graphics acceleration have helped address some of the problems.

And despite the value added solutions available for PhoneGap, it’s still pretty bare. There are no pre-built UI widgets or standard controls. This adds to development time if you really want your app to have a polished, native look and feel.

To use PhoneGap, the first thing you need to do is install the PhoneGap Developer App on your mobile device and PhoneGap CLI or PhoneGap Desktop on your computer. Once you have both tools, the quickest way to learn this system is to start with a Hello World project.

To start a project, click the plus sign and select Create new PhoneGap project as shown below:

You will then be asked to enter information about your project. Choose the path on your local hard drive where you want to create the project, a designated name and an optional identifier. Once the information has been entered, click the green Create project button.

Once you've created a project, you'll be able to view it in the screen below. Your new project is shown and marked with a left green border, a green play button next to it and a green bar at the bottom. You should also see a server address indicating it's running and the active project. Only one project will be active and running at any time.

Now let’s try give our app Push Notification.

[

$ phonegap create myApp --id "org.myapp.sample" --name "appSample" --template phonegap-template-push

]

The command above will create a folder named myApp in the current path location with the default project Hello World and if of com.phonegap.helloworld. To ensure the project is unique, specify a name and identifier

After you run the command, you should see the following output below:

[

Creating a new Cordova project.

Retrieving phonegap-template-push using npm...

]

Change into the new project directory with the cd command:

[

 $ cd myApp/

]

Check to be sure you see the following set of files and folders shown below:

[

config.xml      hooks        platforms    plugins        www

]

cd into the www folder and look around at the files and subfolders in there, this is the content of your app, with the entry point being the index.html file.

[

 $ cd www/

]

Type $ phonegap serve. You will receive the server address the app is being hosted on in the output received in the console (192.168.1.11:3000 in this example):

[

$ phonegap serve

[phonegap] starting app server...

[phonegap] listening on 192.168.1.11:3000

[phonegap]

[phonegap] ctrl-c to stop the server

[phonegap]

]

Now go to your mobile device where the PhoneGap Developer App is running, enter the server address on the main screen and tap Connect.

You’ll know you got it right when you see this:

Is PhoneGap the best solution out there?

It depends on the app you want to build? If you’re building a simple app that doesn’t require a lot of design polish, then PhoneGap would be a good choice. But if you want to build a game app with amazing graphics or your app will require computationally expensive operations, then you’re probably better off building a native app.