Open Source Framework Fills Gaps for Mobile HTML Development
References: Kevin Whinnery, Appcelerator Network
PhoneGap is a free and open source framework that allows developers to create mobile apps using standardized web APIs for specific platforms.
With truly native apps, all layout rendering is done via web views instead of the platform’s native UI framework. Web-based are not just web apps but are packaged as apps for distribution and have access to native device APIs.
The Goal for PhoneGap
PhoneGapâ€™s reason for being is to allow HTML-based web applications to be deployed and installed as native mobile applications.
PhoneGap web applications are wrapped in a native application shell, and can be installed via the native app stores for multiple platforms. PhoneGap also tries to provide a common native API set which is typically unavailable to web applications, such as basic camera access, device contacts, and sensors not already exposed in the browser.
As a visionary leader, PhoneGap might be considered the vanguard of emerging W3C Device API standards, as they attempt to bring the future of HTML deployment to web developers in the present. Today, no platform makes web applications first class citizens. There are strives being made â€“ as in Mozillaâ€™s Boot To Gecko platform and Microsoft Windows 8 in regards to first-class API access to web applications. With PhoneGap, developers can seize a subset of these rights for web applications today.
End User Workflow, Tooling and Interface for PhoneGap
To run a PhoneGap application on a native emulator/simulator, developers generate a project for each of the native platforms they wish to support, configure that projectâ€™s â€śweb rootâ€ť directory in Xcode, Eclipse, or whatever native toolchain is needed, and then run the project using that tool. The precise steps are outlined in their getting started guides, per platform. Often, symbolic links are used to route the â€śwwwâ€ť folder across multiple native projects to a common directory location.
Installing a native-wrapped PhoneGap application to a device requires a similar workflow. However, to augment that process and alleviate the need to have native SDKs installed locally, developers use PhoneGap Build, which generates installable applications in the cloud. Functionality to support PhoneGap build deployment is now integrated into Adobeâ€™s Dreamweaver tool.
The tools used with PhoneGap are the standard tools of web development, such as Firebug, Web Inspector, and whatever text editor is preferred. There is also an emerging tool for remote debugging known as Weinre that is becoming more commonly used. The fact that developers are creating a native application at all is mostly abstract during the development process.
How PhoneGap Works
PhoneGap application is a â€śnative-wrappedâ€ť web application. So exactly how is the web application â€ś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.
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.
Writing native extensions for PhoneGap requires that you do three things:
2.Â Â Â Â Register your extension with the native project in some way â€“ on iOS this is done in the Cordova.plist file.
3.Â Â Â Â Write native code that PhoneGap will route requests to from the web view, and implement any native code needed
Basically, developers can participate in the same asynchronous messaging system which powers the core PhoneGap native APIs.
Strengths of the PhoneGap Approach â€“ Small & Simple
PhoneGapâ€™s primary architectural strength is its simplicity. It does what it does, and it does that well. The PhoneGap team has intentionally implemented only the lowest common denominator of native APIs for the web browser-based app. Because the native API set is so small, it has been relatively easy to port PhoneGap to many different environments. Basically any native platform that supports a web view or web runtime can be a PhoneGap platform.
Non-visual native extensions in PhoneGap are also very simple. The requirements for registering native code to receive messages from the web view are very modest. Simple native extensions can be developed rapidly. This plug-in architecture was also well executed in my opinion.
Weaknesses of the PhoneGap Approach
The quality of the user interface in a PhoneGap application varies based on the quality of the web view and rendering engine on the platform. The Webkit-based rendering engine on iOS is strong, and provides the best performance. The Android web view is functional, but has some notable limitations. On other platforms, the web view performance can be suspect depending on the OS version.
There are also the standard cross-browser issues web developers have had to deal with â€“ even before PhoneGap. UIs need to employ progressive enhancement, media queries, and that entire bag of tricks to remain usable on multiple platforms. It helps that many mobile platforms are adopting Webkit, but there are still significant differences even in Webkit based environments. Constant improvements in mobile browsers help mitigate these problems but approaching native-quality UI performance in the browser is not a trivial task. Even so, on most platforms, in most browsers today, reaching native-quality UI performance and responsiveness is simply not possible, even with a advanced frameworks. Whether the browser already â€śgood enoughâ€ť depends on your requirements and sensibilities, but it is unquestionably not as good as native UI and is actually much worse – depending on the browser being used.
PhoneGap also cannot be extended with native user interface. The end developerâ€™s application its self lives inside a web view, and user interface is rendered in HTML. One can message to native code and create native UI that goes on, over, above, or adjacent to the web view, but itâ€™s difficult or impossible to integrate a dynamic, HTML DOM-based UI with native UI components. Appcelerator would know â€“ we tried to associate native UI with DOM elements early on, and needed to scrap that effort as the results were unpredictable and of insufficient quality.
Also with the lowest common denominator, very few native APIs are exposed to PhoneGap applications by default, which makes platform integration limited. There are a variety of plug-ins that exist to fill some of these gaps, but they vary in quality and maintenance. These variances could very well continue to improve over time because of the strong community around PhoneGap.