Hybrid app development PhoneGap

Creating mobile apps is a trend nowadays. we've chosen PhoneGAP for creating mobile apps to look at more closely. So, let’s start. but big question is should we use native app or hybrid app or HTML5 based webapp.

PhoneGap application is a “native-wrapped” web application. Let’s explore how the web application is “wrapped”.

Many native mobile development SDKs provide a web browser widget (a “web view”) as a part of their UI framework (iOS and Android, for example). In purely native applications, web view controls are used to display HTML content either from a remote server, or local HTML packaged along with the native application in some way. The native “wrapper” application generated by PhoneGap loads the end developer’s HTML pages into one of these web view controls, and displays the resulting HTML as the UI when the application is launched.

If JavaScript files are included in a page loaded by a web view, this code is evaluated on the page as normal. However, the native application which creates the web view is able to (in different ways, depending on the platform) asynchronously communicate with JavaScript code running inside of the web view. This technology is usually referred to as “the bridge” in the context of PhoneGap architecture – the “bridge” means something slightly different in Titanium, as we will see later.

PhoneGap takes advantage of this to create a JavaScript API inside a web view which is able to send messages to and receive messages from native code in the wrapper application asynchronously. The way the bridge layer is implemented is different per platform, but on iOS, when you call for a list of contacts, your native method invocation goes into a queue of requests to be sent over the bridge. PhoneGap will then create an iframe which loads a URI scheme (“gap://”) that the native app is configured to handle, at which point all the queued commands will be executed. Communication back into the web view is done by evaluating a string of JavaScript in the context of the web view from native code.
There is much more to PhoneGap than that, but the messaging from web view to native code via the bridge implementation is the key piece of technology which allows local web applications to call native code.There’s quite a bit happening behind the scenes in a Titanium application. But basically, at runtime, your application consists of three major components – your JavaScript source code (inlined into a Java or Objective-C file and compiled as an encoded string), the platform-specific implementation of the Titanium API in the native programming language, and a JavaScript interpreter that will be used to evaluate your code at runtime (V8 (default) or Rhino for Android, or JavaScriptCore for iOS). Except in the browser, of course, where the built-in JavaScript engine will be used.

So major differences are:

PhoneGap:

• JavaScript API that provides access to Native Functions
• Supports HTML5/CSS3
• Supports Web Standards & Re-use Across Enterprise Apps
• Supports DOM based JavaScript Libraries/Frameworks
• Supports the most platforms

Appcelerator Titanium:

• JavaScript API that provides access to Native Functions
• Compiles to Native Code
• Could provide better performance.

Issues:

Of course, both Titanium and Phonegap fall into the category of “hybrid” but the key difference is implementation: while Phonegap application runs inside browser, Titanium’s app runs inside javascript interpreter. Runtime performances are SLOWER than native code because it's using a javascript engine as a bridge. Especially with a big TableView, it's much more slower, and the feeling is just not the same.

I have build two diff applications based on phonegap for testing purpose and i found that both are very slow as compare with browser rendering. When i cross checked same application in my phone's browsers, it looks much responsive than in app. Might be current browsers are using hardware acceleration by default. I have used mobile Jquery & phone gap APIs for demo.

I know that jquery mobile can be a little slow by nature, imagine my surprise and disappointment when my compiled phonegap app UI is magnitudes slower running on my phone than running in the phone's native browser. How can the compiled app be so noticeably less responsive than the same app running in the phone's native browser? The responsiveness is completely unacceptable.

http://apachecordova.blogspot.in/2012/11/who-is-murdering-phonegap-its-jquery.html

Even phonegap provide better solution to use JS Framework.

http://cordova.codeplex.com/