Phonegap, later known as Cordova, is a cross-platform mobile development framework. It allows developers to create their mobile application by using normal web development techniques and tools such as HTML and Javascript. All the framework does is build a native wrapper around the web content that launches a web view and loads the local HTML files.
Essentially every Phonegap application works in the same way, with the “meat” of the content, the HTML and Javascript changing from application to application. As of now, Phonegap supports nearly all major mobile platforms – iOS, Android, BlackBerry OS, WebOS, Windows Phone 7, Symbian and Bada.
In order to use the phone’s native functionality, Phonegap gives the loaded webview javascript handles on the functions, such as vibration, native notifications, contacts etc. For example, if one were to create a new project in Phonegap for Android, it’d already create all the necessary files to load the web content, with the main Android activity containing this:
@Override
public void onCreate(Bundle savedInstanceState) {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.init();
super.loadUrl(“file:///android_asset/www/index.html”);
}
super.init();
super.loadUrl(“file:///android_asset/www/index.html”);
}
This will simply load the index.html file into the webview of the application. As it isn’t an actual browser but rather just a web view, there won’t be a navigation bar. Within the index.html file the following code can be found:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Android App</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var showMessageBox = function() {
navigator.notification.alert("Hello World of PhoneGap");
}
function init(){
document.addEventListener("deviceready", showMessageBox, true);
}
</script>
</head>
<body onload="init();" >
</body>
</html>
The only relevant bit is the navigator.notification.alert(“Hello World of PhoneGap”); line, as that is where the plugin calls the phone’s native method’s to create a dialog box displaying a message.
Considering all of this, it becomes obvious that the task of replicating a native look and feel becomes quite challenging. Thankfully, other mobile frameworks such as Sencha Touch and jQuery Mobile already exist for the explicit purpose of assisting with that task. They provide methods to make sure that all the elements of the application look and feel as they would on a native application for the phone it’s written for.
Unfortunately, all of the above works only in theory. For its relative simplicity Phonegap (and its support frameworks Sencha Touch and jQuery Mobile) do not offer adequate or even remotely acceptable performance for anything but the most basic applications. Scrolling performance is one of the most obvious areas in which the framework struggles – even on high end phones such as the Samsung Galaxy S3 scrolling would degrade to an unacceptable 10 fps.
One of the tasks that were required by the Pycsell Mobile prototype was thumbnail generation, a task that would cripple pretty much every single device on the market if it had been done via what’s accessible through Phonegap (i.e. Javascript). Thus, a native plugin had to be written for Android, which ended up being fairly straightforward. However, this plugin would have to be written natively for every platform that the application would be deployed on, defeating the purpose of using a cross-platform framework in the first place.
The last, but arguably the biggest issues with such frameworks is compatibility. As stated before, the content of the application is written mostly in HTML, CSS and Javascript. To be more precise – HTML5, CSS3 and Javascript. This poses big problems on older devices, whose native browsers do not have support for HTML5 or CSS3, rendering the application unusable on these devices. Even on two identical devices the application could still behave differently due to different browser versions.
At the end of the day, cross-platform frameworks have ways to go before they become a viable solution for larger projects. Even simple applications would probably benefit from being written natively, as the downsides of cross-platform HTML frameworks simply outweigh their benefits right now.
No comments:
Post a Comment