HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS

HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS RAJESH KUMAR Technical Lead, Aricent PUNEET INDER KAUR Senior Software Engineer, Aricent

HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS Introduction PhoneGap is a hybrid application development platform that supports multiple platforms such as ios, Android, Blackberry, Windows Phone 7 (WP7), and Windows Phone 8 (WP8). It is an application development framework that enables users to develop mobile apps using HTML, CSS, and JavaScript (JS). PhoneGap renders applications developed using these Webspecific technologies on smartphones, thus enabling application development for ios, Android, Blackberry, WP7, and WP8 platforms without knowing the native programming APIs. PhoneGap provides APIs to allow developers to use devicespecific features such as phone camera, accelerometer, contacts, and storage using the PhoneGap standard plug-ins. It enables developers to create custom platform-specific implementations using custom plug-ins. Plug-ins enable developers to add HTML Rendering Engine (WebView) WEB APP PhoneGap Framework Mobile Application Framework functionality that is not provided by PhoneGap APIs. For example, if an application requires accessing Near Field Communication (NFC) hardware and reading/writing NDEF messages, then plug-ins will have to be written for the targeted platforms. PHONEGAP ARCHITECTURE PhoneGap resides above the Mobile Application Framework. WebView uses the HTML rendering engine and the JS engine to render HTML/CSS and execute Java Script. PhoneGap provides plug-ins in the form of JS APIs that can be used in the WEB application to access the native features of the OS. WHEN TO USE PHONEGAP PhoneGap can be used in situations where development time and costs must be reduced. PhoneGap can be used when applications meet the following conditions: Plug-in (PhoneGap, Custom) > are required to be supported on multiple mobile platforms > are existing Web-based applications that must be ported on mobile platforms > do not require high graphical performance such as for gaming applications Certain factors must be kept in mind when choosing a specific approach for development. Native development is preferred over development using hybrid or Web-based development, but only when the applications: > are performance-centric, meeting strict launch times and having smooth, complex animations and highly graphical interfaces > require native functionality such as WiFi, with NFC connectivity not provided by PhoneGap wrapper APIs > require a native look and feel for each platform Market Overview TRENDS IN HYBRID APPLICATION DEVELOPMENT Hybrid applications, which offer a balance between HTML5- based Web apps and native apps, will be used in more than 50 percent of mobile apps by 2016, according to a report from IT research firm Gartner. Gartner forecasts that by the end of 2013, mobile phones will overtake PCs as the most common Web-access devices. They recommend organizations be open to augmentations to the Web (such as hybrid application development) to deploy on mobile today. According to a report by Forrester, the choice between adopting a native application development approach or one that uses HTML5 depends on the people who will use the apps, the company s business objectives, and the strategies they plan to employ in order to achieve those objectives. COMPETING HYBRID APPLICATION DEVELOPMENT FRAMEWORKS Contemporary hybrid application frameworks include Adobe PhoneGap, Adobe Air/Flex, Appcelerator (Titanium), Motorola Solutions (RhoMobile), Qt (Nokia), Sencha, and Xamarin (MonoTouch and Mono for Android). According to the independent research firm Vision Mobile, PhoneGap is the leader in developer mindshare of cross-platform technologies, like those seen in the snapshot below. Cross-Platform Tool Mindshare Index 2012 Top-10 CPTs being used by developers, irrespective of their primary tool % of developers using each tool (normalized) PhoneGap Sencha Touch/ jqtouch Mono Appcelerator Adobe Flex Unity 3 Corona AppMobi RunRev MoSync 0 10 15 20 25 30 35 40 32% 17% PhoneGap Features UI FRAMEWORKS USED IN PHONEGAP PhoneGap applications use HTML5/CSS for creating UI of the applications, with several UI frameworks available that can be used to create fast and impressive mobile applications in PhoneGap (e.g., jquery, jquery Mobile, and Sencha Touch). The snapshots below show sample screens of UI created using Sencha Touch and jquery Mobile. 22% 20% 26% 24% 30% UI Framework Mobile OS Window Manager PhoneGap was named 2012 Technology of the Year by InfoWorld [7] and Best Cross-Platform Development Tool by Code Project[8]. Database Services Graphics Device Driver Input Sensors PhoneGap Architecture 1 2

Supported (Y) (N) WIDGETS JQUERY, JQUERY MOBILE SENCHA TOUCH Layout Menus Dialog Drag and Drop List View Grid View Checkbox Radio Button/Toggle Buttons Spinners/Pickers Image Gallery Progress bar Different widgets available in jquery and Sencha frameworks The list above is a comparative analysis of UI widgets available in jquery, jquery Mobile, and Sencha Touch UI frameworks. It provides details of what can be achieved in these UI frameworks. GLOBALIZATION SUPPORT PhoneGap provides wrapper APIs to implement globalization. Each PhoneGap Globalization wrapper API has a set of APIs for getting preferred language and locale name, changing strings to numbers (or vice versa), getting currency patterns, getting number patterns, etc. These APIs can also be used to serve HTML pages customized according to a user s current locale. MULTIPLE SCREENS Multiple screen sizes and resolutions are handled in PhoneGap using a technique called Responsive Web Development. Responsive WEB DESIGN uses CSS media queries to determine display resolution and adjust page layout based on screen resolution. PhoneGap application can also use jquery-based APIs for checking screen resolution and density, which can be used to serve the suitable resources for the device. PhoneGap application can also use CSS to detect orientation of the device. NETWORK STATUS PhoneGap provides wrapper APIs to determine the network status of the device (connected/disconnected) and currently active network (WiFi or cellular data). FILE APIS File APIs of PhoneGap can be used to access files on a local file system and upload/download files from a remote server. Phonegap Limitations, as Seen on Version 2.4 APPLICATION DEVELOPMENT > Visible differences were observed while running the same application on different operating systems (WP8, Android, and ios). For example, while developing a prototype application in PhoneGap, it was observed that some elements such as rounded-corner buttons and display of hint text in the input box were not visible in WP8. OS-dependent CSS were then written to overcome this problem. The representative snapshot below shows the difference in GUI on different mobile phones while working with CSS and HTML5.0 on PhoneGap. For creating similar UI on different platforms, quirks were required for each platform. For example, for displaying both the hint text in the Input box and the rounded corners, different HTML properties were used to enable these properties on the page level and the X-UA-Compatible tag was added in the HTML header. The representative snapshot below shows the results after quirks were applied over the UI using CSS and HTML5.0 on PhoneGap. > Platform-specific CSS must be written to make UI look native. No native controls are available and functions like scrolling behave differently on different platforms. Overall, the experience of a web application is rarely (if ever) equal to the experience of a native application. > Because PhoneGap covers multiple platforms, it is often one step behind the native platforms when new features are introduced. Windows Phone 8 Android ios Same application executed in Windows Phone 8, Android, and ios > Lack of pre-built UI widgets, transitions, and standard controls. Development time can take longer, especially when a more polished app with a native look and feel is desired. Although Sencha Touch, jquery Mobile, and similar frameworks with pre-built UI elements can be used but a good amount of time may have to be spent styling the app to look native. > Debugging a JS app in PhoneGap is not as easy as in the native environment. One could develop in a desktop browser for most functionality and then use the device simulator and browser to debug. But debugging a PhoneGap application directly on a device can be rather difficult because the project must be uploaded to github and the debugging tool is only available online, both of which require Internet access. Windows Phone 8 Android ios Same application executed in Windows Phone 8, Android, and ios 3 4

PERFORMANCE > Hardware acceleration is available for ios4 or later and Android 3.x or 4.x devices. Hardware-acceleration-enabled applications sometimes fail to render correctly on scroll on Android devices, and if hardware acceleration is disabled, the quality of animation suffers. > Initial load time of an application (5-10 seconds) that is basically the result of CSS parsing, calculating, running JS, rendering HTML DOM elements, etc. can be an issue. An intermediate splash screen or loading icon can help alleviate this. > PhoneGap UI can be created using frameworks such as jquery, jquery Mobile, and Sencha Touch. The UI performance using these frameworks in PhoneGap is not as good as a UI created using native code widgets. > The frameworks perform differently from each other. For example, jquery s list view performs better than Sencha Touch, while performance of Image Gallery s swipe and flick using Sencha Carousel is better than jquery Mobile. SenchaTouch and jquery Mobile lack standard mobile UI widgets (i.e., jquery Mobile doesn t provide a widget like Carousel). To resolve this issue, a single application can use jquery Mobile and Sencha Touch together to create a UI. > A prototype application to compare the performance of a list view was developed in native, jquery Mobile, and Sencha Touch on an Android device running Android version 2.3.5. The video in the link provided below gives a hands-on experience using these UI toolkits. The Sencha Touch list view stutters while scrolling and does not respond well when a user s finger flings faster on the screen. Also, the scroll stops sooner in Sencha Touch than jquery Mobile. The perceived difference in performance of the list view created in jquery Mobile versus that in Sencha Touch is of the order of ten percent. The list view created using jquery Mobile was only marginally slower than the one created in native. This makes choosing the right framework for creating UI in PhoneGap more challenging. http://www.youtube.com/watch?v=rjvopltiigo&featu re=youtu.be MEMORY > Heavy memory footprint from the loading of WebView, JavaScript engine, etc., along with the application. A prototype application comparing the memory footprint of a sample Hello World application on PhoneGap and native SDK on Android are shown in the table below. Framework used Memory footprint PhoneGap 19 MB Native 5 MB > PhoneGap does not have direct API for releasing the unused memory, which can cause an out-of-memory issue in the application. Conclusion PhoneGap is, on the whole, a neat solution. It gives developers the benefit of less effort required to create applications for multiple platforms and to reach out to potential users in a timely fashion. It is very useful for the following types of applications: > Reaching the market early as a critical business requirement > No need for fancy animation/transition > Limited interaction with the native OS, when a good level of interaction can be achieved using the PhoneGap plug-ins > Pushing an HTML5 Web site for mobile as a native package application to improve distribution and discoverability > Supporting multiple platforms without investing in learning native SDK for all platforms Just like no single T-shirt size fits all, PhoneGap is not a solution for every kind of application. Native SDK should be used for creating applications that fall in to following categories: > Developing for only one platform (i.e., the application is feasible on only one of the platforms) > When the performance of the application is very critical, like in games > When fancy animations and transitions are needed > If your organization does not have web developers with expertise in HTML, CSS and JS Acronyms RAJESH KUMAR is Technical Leader in Application API Application Programming Interface Engineering functions at Aricent. He has over six years of experience CSS Cascading Style Sheets in the industry and has worked on mobile application platforms such DOM Document Object Model as Android, Symbian, and BREW. HTML Hypertext Markup Language rajesh3.kumar@aricent.com JS JavaScript PUNEET INDER KAUR NFC Near Field Communication is Senior Software Engineer in the Application Engineering functions NDEF Near Field Communication Data Exchange Format at Aricent. She has over 3 years UI User Interface of experience in the industry and has worked in application WP7 Windows Phone 7 development on Android platform. puneet.kaur@aricent.com WP8 Windows Phone 8 REFERENCES (1) PhoneGap download link, http://phonegap.com/download/ (2) Setting up for various platforms, http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html (3) Debugging support in PhoneGap, https://github.com/phonegap/phonegap/wiki/debugging-in-phonegap (4) PhoneGap features, http://phonegap.com/about/feature/ (5) Sencha Touch home, http://www.sencha.com/products/touch (6) jquery home, http://jquery.com/ (7) InfoWorld, http://www.infoworld.com/slideshow/24605/infoworlds-2012-technology-of-the-year-award-winners-183313#slide2 (8) CodeProject, http://phonegap.com/2012/06/12/adobe-phonegap-named-best-cross-platform-development-tool-by-codeproject/ 5 6