Cross-posted from my work blog.
Phonegap is now a distribution of Apache Cordova (analogous to Ubuntu being a Linux distribution) brought to you by Adobe. Since Apache Cordova is licensed under the permissive Apache Software License, Adobe Phonegap may technically be integrated with proprietary software (though there's no evidence for the same yet).
The Cordova guys have taken a lot of pain keep a consistent JS interface on the client side but underneath there is a large divergence between each platform.
We are going to discuss the architectures of android and iOS since these are the most widely used platforms and restrict ourselves to version 2.0 of Cordova.
Every phonegap app has the following components:
- A chrome-less browser. On iOS and Android, it is WebKit (UIWebView on iOS and WebView on android to be specific).
- JS to Native bridge to allow for communication between the HTML application and the native platform.
- A native to JS bridge to allow the native platform to talk to the HTML application.
There is yet another JS to Native bridge (currently experimental) which calls the native plugins by triggering changes in the location URL.
Just like the JS to Native bridge, the Native to JS bridge can also be changed. Another Native to JS bridge is the XHR bridge (called the HANGING_GET internally as a reference to a long lived XHR connection). This bridge runs a callback server locally and responds to the XHR requests.
There is yet another bridge that uses Java internal reflection on the webview to call the methods but is available only on Android 3.2+. There are a couple of other bridges but don't seem to be in use at this point in time.
Now let's look at how the iOS phonegap apps work.
Compared to Android, iOS has fewer bridges. On iOS 4.2 and below, the JS and Native bridge communicate with each other through an iframe. The JS calls are stored in a JS queue which is read and executed by the native component.
The other bridge is an XHR bridge which makes calls to a fake URL with the commands in the header. These commands are intercepted, serialized and then executed.
Now that we know how Phonegap apps work, we can write better apps and plugins and guess where we can improve our application's performance.