Cross-Platform Mobile Application Development

Cross-Platform Mobile Application Development Anirudh Nagesh, MS Student School of Information Studies, Syracuse University anagesh@syr.edu Carlos E. Caicedo, Assistant Professor School of Information Studies, Syracuse University ccaicedo@syr.edu Abstract: Mobile applications for smartphones and other devices are having a widespread impact in many sectors of society. Mobile applications can be broadly classified into three categories namely native, mobile-web and Hybrid applications. A wide range of tools and Software Development Kits (SDKs) are available to develop these applications. Apart from native SDK s and tools available for some of the main mobile operating systems (Android, ios, etc), there are many open source SDK s and tools that allow the development of cross-platform applications in which the developed code can run with little or no change in more than one mobile OS. In native mobile application development, programming languages such as Java (for Android) or Objective C (for ios) have to be used to develop both the user interface and logic for the applications. Cross-platform application development involves using HTML5, JavaScript and open source libraries such as jquery or jqtouch. Thus, web designers and developers can use a great part of their skills to develop mobile applications. In this report we discuss the features, differences and capabilities of various cross-platform SDK s available and few examples of how to develop a crossplatform mobile application. 1 Introduction: As of 2011, 90% of the mobile phones shipped had touch screen capabilities and that figure is expected to reach 100% very soon [11]. By December 2011, the number of applications available across Apple s ios App Store and Google s Android Market was close to 1 million. The continuous appearance of new applications is affected in part by the changing behaviors of users who are moving towards the mobile internet and away from the desktop for tasks such as social networking, online gaming and the sending/receiving of email. By 2014, mobile internet usage is expected to outgrow desktop internet usage [12]. Application growth is also driven by the rise of new methods and tools to develop them. The remainder of this section will describe some of the basic technologies and concepts related to crossplatform development of mobile applications. 1

1.1 Native vs. Cross-platform: Native applications are those which are developed using mobile software development kits (SDK), tools and languages that are native to a particular mobile OS. For example, the development of Android applications is commonly done by using the Android SDK, Java and an integrated development environment (IDE) tool such as Eclipse. ios applications are developed using the ios SDK, X-code and Objective C. Blackberry applications can be developed using the Blackberry SDK, J2ME and Eclipse. The final deliverable in each case will be either an.apk( Android),.ipa( ios) or.jar( Blackberry) application file. Once developed, an application can be uploaded to an application store (Android Market, Apple Store or Blackberry application World) for widespread use. Mobile-web applications are those which use an instance of a mobile web browser to run the application. These are suited for mobile websites like m.facebook.com, m.yahoo.com, m.cricinfo.com etc. These applications are developed using cross-platform SDK s and open source libraries such as jquery [6], jqtouch [7],etc. The user interface (UI) is developed in HTML5 and JavaScript and the logic is defined by JavaScript. The final deliverable is a set of files that can be hosted on a web server and the application can be accessed using an instance of a web browser. Hybrid mobile applications are a combination of the previous two application types. These applications are developed using open source libraries but also have access to some of the native capabilities of a device such as Camera, GPS, Accelerometer, File System etc. The degree of access to device features is not comparable to that of native mobile applications but it is better than that of mobile web applications. SDK s like Phone Gap, Rho Mobile and Titanium are used to develop this type of applications and will be described later. The UI is developed using either HTML5 or JavaScript and the logic is defined by JavaScript. These tools usually convert a mobile-web app into a native application. The following table gives an overall comparison between the three possible types of mobile applications. Type of Application/ Features Native mobile Apps Mobile-Web Apps Hybrid Apps Programming Language Java(Android), Objective C(iOS), J2ME(BB) HTML5 and JavaScript HTML5 and JavaScript Executable Binary (.apk,. ipa,. jar) HTML + JavaScript Binary Distribution Appstore, Market Hosted on a web server, hyperlink Execution of Apps API Usage/Access Directly by Operating System Full Access to operating system API s By Web browser No Access to OS API s Either appstore or hyperlink By operating system, web portions executed by browser Limited access to OS API s Device Access Full Access Limited Access Full Access Speed of Apps Very fast Medium Very fast Development Cost Expensive Reasonable Reasonable Approval Process Mandatory None Low overhead SDK s, Tools Android, ios, BB, Symbian, Windows SDK s jquery, jqtouch, Sencha Titanium, PhoneGap, Rho Mobile 2

1.2 HTML5 and CSS: HTML 5 is a structured language used to deliver content in World Wide Web. HTML5 is the newest version of the HTML standard which is now widely used to handle most of the content in the World Wide Web. It is not only supported by the normal desktop browsers such as Chrome, Firefox, Internet Explorer, Safari, but also the browsers included in many mobile platforms. HTML5 supports a new set of API s and features to handle audio, video and UI design. It also adds some scripting API s such as canvas elements, timed media playback, offline storage database, drag and drop, cross-document messaging, browser history management, MIME type support and Micro data. The leading mobile platforms ios, Android, Windows, Palm OS, and RIM provide HTML5 capable browsers. Hence HTML5 plays a major role in helping developers write mobile applications to multiple devices at once. The cross-platform nature of HTML5 and the fact that it is supported on most of the smart phone browsers make it easy for web developers to use their existing HTML and JavaScript knowledge in developing mobile- web applications. 1.3 CSS (Cascading Style Sheet): Cascading style sheet is a language used to format the look and feel of a document written in a markup language. The markup language can be HTML, XML, XHTML and SVG. With CSS, the actual content of web pages is separated from definition of how it should be presented. The fonts, font size, color schemes, layouts are included in a CSS command file (stylesheet) and applied to the web pages. This improves the flexibility and the ease with which the web pages are developed. A CSS file is very simple and consists of many English keywords to specify the graphical definitions of the presentation styles for the elements in an HTML generated web page. CSS styles can be applied to all or part of a web page.. An example of a simple CSS would be as follows. h1 { color:white; background-color:orange} The above line of code applies a particular style to the text with heading h1. The color of the text is white and background color of the highlighted text is orange. A CSS style file (style.css) can be made to affect the presentation of a web-page by incorporating the following call in the HTML file of the web-page: <link rel= stylesheet href=http://www.abc.com/css/style.css type= text/css /> The above line of code in the HTML page links the CSS file to the HTML page. The style sheet can be either a local CSS file or a file stored in an external server. Other ways of applying CSS is to embed the style definitions inside the HTML code of a web page. CSS3 is the latest version of CSS where style definitions are defined in the form of blocks. The segmentation of rules in blocks helps the browser define and approve the rules more quickly than doing it in one single block. This improves the performance of web page rendering. 3

2 Cross-platform SDK s There are many SDK s and frameworks available to developers for the development of mobile applications that can work on several mobile operating systems. Apart from native SDK s for mobile Os s such as Android, ios, Blackberry and Windows Mobile, there are some interesting and innovative crossplatform SDK s with which developers can target multiple platforms and devices at a time. Using these SDK s, one can develop mobile-web, hybrid and native applications. This reduces a lot of the effort, time and resources required to develop applications for multiple platforms. The following sub-sections describe some of the most widely used cross-platform SDK s and HTML5 frameworks used to develop such applications. 2.1 Rho Mobile: RhoMobile [1] was founded in 2008 in Silicon Valley and was acquired by Motorola Solutions in late 2011. It produces an open source cross-platform SDK under an MIT license. Rho Mobile is based on Rhodes framework and is used to build native mobile applications. When developing an application with this tool, the UI of the application is written in HTML5 and the application s controllers (logic) are written in Ruby. The platforms supported are Blackberry, Windows Mobile, Android, iphone and ipad. Embedded RuBy [ERB] templates, HTML5, CSS and JavaScript are the programming languages used in this SDK. Some of the main characteristics of RhoMobile are: Flexible app development: The Rhodes framework allows developers to write applications based on a model-view-controller (MVC) framework. It helps the developer separate business logic in a Controller from Interface design and appearance in a View. This improves maintainability and deployment of a mobile application. App Generator: It helps create an initial application based on the structure of the models and business logic of the application. Object Relational Manager: Databases are an integral part of most of the mobile applications. Data can be stored either internally in local databases, the file system or in external databases. Rhodes provides a wrapper which simplifies the process of accessing an application s data repositories. Synchronization: Enterprise applications which use email or any SAP based services require to be synced with backend databases and applications. Rhodes provides a built in mobile-sync-server which connects to the back end applications directly and even supports push-based sync capabilities. Cloud based application development: Rhodes provides a cloud based application development framework called RhoHub where developer does not need to worry about installing SDK s, tools, IDE s. All the tools required for developing apps are hosted on the cloud server and applications can be compiled and executed for any operating system (ios, Android, BB). More information on Rhodes can be found in: http://docs.rhomobile.com/. Building a simple application in Rhodes and corresponding tutorial can be found in: http://docs.rhomobile.com/rhodes/tutorial 2.2 Phone Gap: Phone Gap [2] is a cross-platform mobile application development framework which through the use of HTML5,CSS and JavaScript allows for the development of applications for ios, Android, Blackberry, Symbian, Windows, WebOS, Bada and Palm devices. It is based on open web-standards which means 4

that the application can be run and tested on common web browsers such as Chrome and Safari. The application creation process is very similar to that of web pages creation, except for the installation and deployment stages. The user interface in a PhoneGap application is rendered with HTML5 and the logic is built with Javascript. Phone Gap also provides facility to use local storage such as cookies for session maintenance, Web SQL database access, HTML5 local storage and indexed storage. Additionally, Phone Gap provides access to the following device functionalities. Accelerometer Device Motion Sensor Geolocation- GPS Sensor Compass Camera, Capture audio, video and image capture capabilities Media- Allows record and playback of Audio Contacts Database File System Connection Type Device Information Some of the core events that are supported by Phone Gap are DeviceReady Pause and Resume Online and Offline Menu Button Search Button Start call Button and End call Button Volumedownbutton and Volumeupbutton Phone Gap applications can also communicate with the remote web servers. The servers can be public (twitter, facebook) or any CRM based back end application. The services accessed can be RESTful or SOAP based with requests and responses in the form of XML or JSON. 2.3 AIRPLAY SDK: AirPlay SDK [3] was founded in 1998.The Airplay SDK (Marmalade) is a licensed SDK which offers solutions for cross-platform and native (C/C++) mobile and desktop applications. It supports many devices with OS s such as ios, Android, Symbian, Windows, WebOS and Bada(Samsung). The programming language used is C/C++ and has access to all standard libraries and language features. The executable is a single binary file with native CPU instructions that runs identically across all platforms. The IDEs supported are Microsoft Visual C++ and Xcode with support of X86 compilers both on Windows and Mac. It is mostly used for cross-platform game application development since the SDK has rich support for Open GL ES 2.0 which is suitable for rich 2D and 3D applications. Some of the features and advantages of this SDK are: 5

Native binary without any VM Good packaging tools for many mobile OSs. Speedy software rendering engine and fallback mechanism when no hardware graphics acceleration is available Support for open source libraries. Highly optimized compression of assets for games. Debugging support with an ARM debugger on windows. Tight integration with Visual Studio which is one of the most widely used IDE s for C++ development. The SDK can be downloaded (free trial and licensed) at this link. http://www.madewithmarmalade.com/ 2.4 Adobe AIR: Adobe AIR (Adobe Integrated Runtime) [4] was released in December 2009 by Adobe Systems for building rich internet based mobile and desktop applications. It is a cross-platform run time environment and SDK available for developing applications for ios, Android and Blackberry devices. HMTL5, JavaScript, Adobe Action Script, and MXML (Flex) are the languages supported. The Adobe tools required for development are available for free and can be integrated to an open source IDE like Eclipse or to Adobe s Flex Builder 3. Flex Builder is available as plug-in to Eclipse and also as a standalone toolkit. Adobe Air internally uses a Flash player as the run time environment and flash applications must specifically be built for the Adobe Air runtime in order to utilize the additional features provided such as file system integration, native client extensions, native window screen/task bar integration, Accelerometer etc. It also has built in support for SQLlite, database access via web services and encrypted local storage. Some of the key features and capabilities of Adobe Air are: Touch Input: Adobe AIR supports identifying both single touch and multi touch inputs. Text Input: Soft key board for the text input is in built in the SDK and gets automatically enabled when the text input receives the focus. Sensors: Adobe AIR has two APIs: Geo Location and Accelerometer for supporting movement and physical orientation of the device respectively. Web Views: Adobe AIR has StageWebView API to allow applications to access the underlying built in rendering capability of the target platform. Images: AIR has CameraUI and CameraRoll classes to access the camera functionality and image gallery of the device. It also allows access o audio and video playback capabilities of the device. 2.5 Appcelerator s Titanium: Titanium [5] was released in December 2008 by Appcelerator Inc. It is a cross-platform SDK that can deliver native applications for ios and Android and has beta support for Blackberry. JavaScript is the main language used to write mobile applications with the support of HTML5 and CSS. It is an open source SDK which converts the Javascript code to native code (Objective C or Java) during runtime. 6

Applications written with Titanium will have same look and feel as if the applications are written natively. The entire SDK is open source, but there are some licensed modules which can be bought. The IDE used to write Titanium applications is Titanium Studio which is shipped with the SDK. The IDE has an inbuilt JavaScript (JS) compiler which checks for dependencies, analyzes and optimizes code. Then the platform compiler compiles the JS code to native code (Objective C for ios and Java for Android). The SDK s APIs are pure JavaScript and are mapped to native API s during run time. Major API s include support for UI, Network, Map, Geo Location, Gestures, Accelerometer, Database, File System, Media etc. Titanium also supports JSS files where JSON-style properties can be added for an object or an application. Other characteristics of Titanium are: Support for standard web based technologies like HTML, CSS, JavaScript for both desktop and mobile applications. Integrated support for AJAX like frameworks like jquery and Yahoo UI Library. A platform independent API to access all of device s functionalities such as navigation bars, cameras, menus, camera, accelerometer, dialog boxes, network, database etc. Titanium s APIs are just wrappers for the platform specific APIs. For example, Ti.network.Httpclient invokes Http Client of android and ios. 3 HTML5 UI frameworks for mobile applications: The creation of web-based mobile applications can be easily supported nowadays with the use of several HTML5 based UI frameworks. The tools offered by these frameworks support UI development through simple web based languages such as HTML5 and CSS. These tools also have support for JavaScript which works well with HTML and in most cased the web-based applications developed with them can be converted to a native application with the use of PhoneGap. Some of the most widely used Javascript library frameworks for mobile web application development are jquery Mobile and jqtouch. 3.1 jquery Mobile jquery Mobile is based on jquery [6] which is javascript library designed to implement client side scripting of HTML. jquery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jquery also provides capabilities for developers to create plug-ins on top of the JavaScript library. Using these facilities, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages. The basic example which uses jquery is shown below. <! DOCTYPE html> <html lang = en > 7

<head> <meta charset= utf-8 > <title> jquery demo</title> </head> <body> <a href = http://jquery.com>jquery</a> <script src= http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></scipt> <script> $(document).ready(function () { $( a ).click (function () { Alert( As you can see, the link no longer took you to jquery.com ); Event.preventDefault(); }); }); </script> </body> </html> 1. jquery.js is the main javascript library from which we can use different features explained above. 2. Ready() function is used to run the javascript functions once the html page is completely loaded. The java script doesn t get executed until the entire html page is loaded ( for ex., images, banner ads etc.) Hence ready() function checks if the page is completely loaded and then executed the javascripts. The jquery Mobile framework has lots of advantages. It provides a platform for web developers to engage into mobile application development facilitating an easy and comfortable transition from the normal web development to mobile web development. Some of the key features of the framework are listed below. It employs the core of jquery core, HTML5 and CSS enabling web developers to build crossplatform and cross browser mobile solutions with interactive touch screen UI. It is a light weight framework which provides developers an easy syntax and simplifies webbased application development. It supports AJAX navigation enabling users to navigate to and from internet web pages from within an application s context and thus provide smooth interactions across applications. It supports the latest version of most of the browsers such as Chrome, Safari, Firefox, IE and Opera. It provides control features and UI widgets which allow mobile web developers to create rich touch screen UI. 3.2 jqtouch 8

jqtouch [7] is another jquery-based mobile framework with support for native animations, automatic navigation, and themes for mobile WebKit browsers like iphone, G1 (Android), and Palm Pre. It has the following features. Easy to install Entirely customizable with selector options Theme support, including default Apple and jqtouch custom themes Callback functions throughout, including swipe and orientation change detection Page history management and CSS3 page transitions, including 3D flip Easily allow apps to run in full screen mode with custom icons and startup screens AJAX support 4 Debugging HTML5 and JavaScript applications: One of the traditional advantages of native application development is the ease of access to debugger and debugging environment tools. These tools give the developer the capability to analyze memory allocation and performance characteristics for each process of the application. In Android, there is a debugging tool called ADB (Android Debug Bridge) which helps in debugging Android Applications. ADB has a plug-in for integration with the popular Eclipse IDE. In ios, the debugger is integrated with X-code which is the IDE provided with ios SDK. X-Code allows developers to debug ios applications on iphone and ipad emulators. It provides very detailed information such as memory allocation, CPU usage etc. While some platforms such as Titanium, Air play and Adobe provide a built in debugger, there is a need for a standard debugger which can debug all cross-platform (HTML5 and Javascript) applications. There are some tools available to debug cross-platform HTML5 applications, but they are not as powerful and detailed as native SDK debuggers. 4.1 Weinre Weinre [8] is an open source debugging tool which provides capabilities to debug mobile web applications. It is a desktop application which allows us to connect to remote mobile-web application running on a device or emulator. It can debug both mobile-web and hybrid applications which are built with PhoneGap. Installation and running is very easy as a jar file has to be downloaded and started from the command line. The jar file is available at https://github.com/callback/callback-weinre/archives/master. Instructions for installing and running the tool can be found at http://phonegap.github.com/weinre/installing.html. The source files can be uploaded to any web server and the link of the debugging tool can be included the main JavaScript file. A screenshot of an example configuration is provided in Figure 1. This tool is also interactive which means, components of HTML files can be inspected and changed. The effect of the changes can be observed in the application with almost no delay. This way, we can easily explore the HTML code where there is an issue and fix it, an example of this capability is shown in Figure 2. 9

Figure 1 Figure 2 4.2 Google Chrome Web Inspector Google Chrome Web Inspector [9] is a part of Google Chrome Developer Tools for integrated environment for debugging, optimizing and understanding a web application. One can perform a live edit the HTML, JavaScript and CSS elements, debug applications and analyze the execution times of coded functions during runtime. The developer tools can be used to analyze SQL data, inspect web elements and insert alert statements to check the values of variables. A screenshot of the tool is provided below [fig 3]. 10

Figure 3 4.3 Ripple Ripple [10] is a multi platform mobile emulator widget that can be installed as a plugin to Chrome and can be used as a debugger for HTML5 mobile applications. It allows developers to visualize their applications on multiple platforms at a time. The platforms supported are WebWorks, WAC, Opera, PhoneGap and Vodafone. It is built as a chrome extension which utilizes back end services to provide interface to debug HTML5 elements and analyze SQL data. Once the plugin has been installed, we just need to enable Ripple by right clicking on the web browser and select Ripple. Once it has been selected, options are provided to select one of the multiple platforms mentioned above. The screenshot for an example running on PhoneGap is provided below [fig 4]. 11

5 Conclusion: Feature Comparison of all the above platforms: There are many open source and licensed platforms and SDK s available for developing cross-platform mobile applications. Selecting a platform completely depends on the requirements of the application. All of the platforms analyzed in this paper have both advantages and disadvantages. The following table provides a comparison of features among the platforms. PLATFORM/ CAPABILITIES RHOMOBILE PHONEGAP TITANIUM AIRPLAY SDK ADOBE AIR SDK jquery Mobile iphone/ipad, android, iphone, android, iphone/ipad, android, iphone, Android, Blackberry, Mobile Platforms blackberry,windows blackberry, windows, Blackberry( from android,blackberry,wi Android, Blackberry, ios, Symbian, supported 6.1, symbian symbian second half of 2011) ndows,symbian, ios Windows OS Windows, MAC OS, Windows, Mac OS Windows, Mac OS Windows, Mac OS Windows, Mac OS Windows, Mac OS ERB templates with Html, javascript and HTML, Javascript, Vanilla C++ ( version HTML, JavaScript, HTML5, Javascript, Languages Javascript,html, css css, html5 support CSS and Ti API's of Microsoft c++) CSS, Adobe Flex, CSS, jquery Java 1.6 or higher, ruby, PhoneGap. Jar with Microsoft Visual C++ 6 and Xcode on rubygems,gnu(wind corresponding sdk Mac Os and MAYA Adobe Air, Flash Tools required for environment setup ows make utility), rhodes-gem ; environment(iphone, android etc..) Titanium Mobile SDK 7 for 3d modelling packages and Builder tool and corresponding sdk jquery library User's choice; Generally used: textmate in Mac and IDE same as used for native phone development Eclipse ( preferred ) and or any other tool of preference for Microsoft Visual C++ 6 and Flash Builder ( AIRPLAY simulator Similar to Eclipse) IDE used for development Support to LBS (Maps, location, GPS) yes yes yes yes yes yes Camera, Blueetooth, Audio yes yes yes yes yes yes with phonegap Barcode Reader API yes No yes No No No Accelerometer/Screen Rotation yes yes yes yes yes yes with phonegap Eclipse, Notepad++ or Aptana FileSystem Access yes yes(only on android and blackberry) yes yes yes yes with phonegap DataBase Capability yes ( MySql) yes yes yes yes yes Cloud Services for App Development yes no yes No No no Debugging ( Device Only MAC OS, on windows: tcp debugging/remote Same as used in native app Eclipse and inline debugger with Microsoft Visual yes ( Flash Builder yes - Wienre /Emulator) debugging connecting development Titanium SDK C++ debugger debugger) debugging tool yes( only for license yes( not for free Support/Helpdesk purchased) yes yes yes evaluation version) yes Developer Community Google groups yes yes yes yes yes Based on our research, we found that cross-platform SDK s are increasingly being used by application developers for rapid mobile application development. Not only individuals, but many companies are investing resources in learning and using these new tools. These tools and SDK s have brought both mobile and web application developers under one umbrella resulting in some very innovative and UI rich mobile applications. While these SDK s have simplified mobile application development, the quality of applications is still debatable. Native application development will always be preferred by those who are comfortable with native programming languages such as C++, JAVA or Objective C. But the tools and SDK s for cross-platform development have provided an opportunity to expand the range of technology enthusiasts and developers that can participate in the mobile application development domain. 12

REFERENCES 1. Rho Mobile. Rho Mobile Inc., <http://www.rhomobile.com> 2. PhoneGap. Nitobi Inc., 2005 <http://phonegap.com/> 3. AirPlay. Ideaworks3D., 1998 <http://www.madewithmarmalade.com/> 4. Adobe Air. Adobe Systems., February 25, 2008 <http://www.adobe.com/products/air.html> 5. Appcelerator Titanium. Appcelerator Inc., Dec 2008 <http://www.appcelerator.com/> 6. jquery. John Ressig., Jan 2006 <http://jquery.com/> 7. jqtouch. David Kaneda., <http://jqtouch.com/> 8. Weinre, A debugging tool. IBM Inc., 2011 <http://phonegap.github.com/weinre/> 9. Chrome Developer tools, Google. <http://code.google.com/chrome/devtools/> 10. Ripple Emulator, Ripple Community Site., <http://ripple.tinyhippos.com/> 11. Cellular News., Mobile App Downloads to Approach 48 Billion in 2015 ITU 2011s, ITU <http://www.itu.int/itu-d/ict/newslog/categoryview,category,mobile%2bapplications.aspx> 12. Aden Hepburn., Infographic: Mobile Statistics, Stats and Facts 2011 2011, <http://www.digitalbuzzblog.com/2011-mobile-statistics-stats-facts-marketing-infographic/> 13