Hybrid Mobile Application Development Approaches

Transcription

1 White Paper Hybrid Mobile Applicatio Developmet Approaches The proliferatio of mobile platforms ad techologies, alog with the evolutio of smart devices, provide plety of opportuities for compellig applicatios. I additio to the advacemets i mobile techologies, the user iterface is becomig the paramout factor i defiig the adaptability of the mobile applicatio. The key expectatios of a mobile applicatio are multifold, ad iclude cost effectiveess, a sigle code base to work across multi platforms, a outstadig UI ad faster delivery cycles. Aother importat factor that caot be igored is the powerful set of device features that chaged the feature phoes to smart phoes/tablets. The moder applicatios are takig full advatages of the device features (GPS, camera...), form factors (tablets) ad appealig user iteractio capabilities such as swipig styles, pich ad zoom, etc. The best fit to accommodate most of the key mobile capabilities (sigle code base form factors, great UI) is to adopt mobile web techologies. This ca be augmeted by usig the Hybrid approach to take full advatage of the device features i additio to the beefits listed above. The paper focuses o differet mobile techologies briefly, but maily focuses o the Hybrid approach, challeges, architecture, beefits, cocers, idustry treds ad market adaptability.

2 About the Authors Sakar Srii Educatio: Masters i Egieerig, Idia Istitute of Techology, New Delhi Bachelors i Mechaical Egieerig, Sri Vekateswara Uiversity, Idia Summary of experiece: Sakar leads the TCS Hy5 Cavas solutio TCS hybrid mobile applicatio developmet platform through all phases of the software developmet lifecycle. He has over 20 years of professioal experiece i various idustry segmets such as CAD/CAM, core database developmet (at Iformix Corp), Costructio, trasportatio idustry (BNSF), Mobile techologies Wap Gateways at Motorola, CRM idustry (Lexis Nexis), ad Maufacturig automatio (Paasoic). His primary iterest lies i buildig product strategies, icludig the techical desig, applicatio level architecture, ad eterprise level architecture. Sathish Vekatrama Educatio: MS Iformatio Techology, Bharathidasa Uiversity, Trichy, Idia Summary of experiece: Sathish Vekatrama is resposible for the Hybrid applicatio middleware platform developmet TM (TCS Hy5 Cavas ) middleware solutio. He has over 16 years of IT idustry experiece icludig Oracle Applicatios ERP implemetatio ad support, customizatio ad migratio usig Oracle Tools, ad has architected solutios for complex busiess itegratios based o the idustry stadards OAGIS ad AIA EBOs. He also has a iterest i the areas of geeral ledger, accout payables, accout receivables, asset maagemet, ivetory, purchasig ad order maagemet modules. 2

3 Table of Cotets 1. Executive Summary 4 2. Itroductio 4 3. Evolutio of key techologies 5 4. Aalysts view 6 5. Vedor support 7 6. Power of Hybrid over Mobile Web 8 7. Market adoptio 8 8. Challeges i Hybrid App Implemetatio 9 9. Architectural approaches Recommedatios Coclusio Refereces 15 3

4 Executive Summary A hybrid applicatio, by defiitio, is aythig derived from heterogeeous sources or a combiatio of techologies, approaches or elemets of differet kids. With respect to mobile applicatios, a hybrid applicatio leverages both ative ad mobile web techologies. The mix of web cotet ad ative capabilities determies the degree of hybrid capabilities of the applicatio. It ca vary from 1% to 99%. This paper maily focuses o the eed for the Hybrid approach, fuctioal advatages ad disadvatages, challeges, implemetatio methods, impact o operatioal aspects such as maiteace ad upgrades. The key focus of hybrid applicatios is to arrive at cross platform compatibility, with a emphasis o ative features. The power of ative features caot be igored ad the Hybrid approach takes full advatage of this. Accordig to Garter, if your orgaizatio is targetig three or more mobile platforms, or if you require coectivity to three or more applicatios, the multichael or cross-platform tools typically yield better project results durig the course of three to five years whe compared to ative tools. Aother iterestig observatio was that whe developig a applicatio for two platforms, the cost is 160% 10 greater tha developig for a sigle platform. This paper summarizes these approaches ad outlies the beefits. Itroductio The mobile idustry is evolvig; whether it is platforms, devices, techologies, features, etwork models or exploratio of applicatio use cases, the speed of chage for ay oe of these techologies meas that busiesses must give serious thought before ivestig i creatig their ow applicatios. To address these challeges, the idustry as a whole is lookig for a sigle code base that ca work across multiple platforms ad devices to develop cosumer apps ad eterprise apps. I additio to the above, the Brig Your Ow Device (BYOD) policies that are emergig i the idustry accelerate the eed for a sigle code base o the web, with little or o footprit o the device to easily maage applicatios. Before takig the dive ito the hybrid approach, it is worthwhile to discuss other potetial solutios. Native: I this approach, a applicatio is developed usig ative OS laguages to best make use of idividual platform SDKs ad device features to geerate the best possible user experiece. Ufortuately, applicatios developed for oe platform caot be used across platforms, meaig overall developmet cost will be higher if oe wishes to be cross-platform compatible. Mobile Web: This approach is based o prove, stadard web techologies. It is the simplest approach to creatig applicatios for mobile devices without much ivestmet, as it is othig more tha accessig web pages o mobile devices. Though this optio is very fiscally attractive, the user experiece is very limited ad has its ow set of challeges limitig potetial adoptio, as the usage of the powerful ative features must be totally igored. Hybrid: This is desiged to take advatage of both the Native ad mobile Web approaches. It beefits from the versatility of web techologies with the combiatio of powerful device features ad SDK. It is 4

5 well suited for a broad rage of applicatios ad ca still provide a good user experiece. This paper further discusses the hybrid approach deeply i the followig sectios. Advatages of hybrid approach: Faster time to market whe compared to pure ative app developmet time cycles Lower total cost of owership as cross platform adaptability is easier Reasoably good UX experiece with the moder JavaScript toolkits (gestures, swipes, tap ad trasitios) Easy maiteace, upgrades ad deploymets Access to ative features Disadvatages of hybrid approach: Slightly lower performace due to rederig of web pages ad accessig data through multiple layers Limited UX experiece compared to ative UI Security cocers Evolutio of key techologies Havig proper support for the right techologies is essetial for applicatio developmet; there has bee a tremedous push across the idustry to ramp up ivestmet i Hybrid Applicatios developmet, specifically i these key areas: HTML 5 Versio 5.0 supports may features that aid smart phoe applicatio developmet TM Applicatio cachig, cliet storage Google mail May ew elemets ad attributes <cavas>, <audio>, <video> Great alterative to flash plug-i for video because of stability ad power cosumptio issues Cavas dyamic, scriptable rederig of 2D shapes ad bitmap images Strog support for APIs - Geo locatio - WebSQL ad Web storage - local cache of key value pairs - Web Sockets - Drag ad drop features 5

6 CSS 3.0 Sigificat performace boost Resposive web desig with media queries ad form factor adjustmets Support for progressive ehacemets with adjustable web page cotet based o device fuctioality Opacity ad shadows, which provide better visual desig JavaScript Great support for user iterface experiece (such as trasitios ad swipes) New set of object properties are defied New fuctioality to hadle array objects Garbage collector Numerous emergig frameworks Aalysts view Idustry aalysts have take a closer look at the evolutio of these techologies ad arrived at several recommedatios. Below are some excerpts from Forrester ad Garter aalysts: Because of the icreasig cosumer adoptio of HTML5-ready desktop browsers, retailers will look to 1 raise the user experiece stakes of their mai ecommerce sites by itroducig HTML5 versios. Developers show growig iterest i techologies that promote ope web architectures. HTML5 is certaily oe of these, with 60% of developers either already usig it or plaig to withi the ext two 2 years. Mobile Web apps ca, i certai scearios ad with careful attetio to applicatio programmig iterfaces ad extesios, provide a rich user experiece that does ot equal ative apps, but 3 approximates them at a fractio of the developmet effort ad with greater portability ad flexibility. Embrace HTML wrappig approaches ad tools as a primary strategy for deliverig cotet ad 4 applicatio capabilities to mobile devices i a cross-device, cross-platform, cross-browser approach. Although there will still be app stores by 2015, over 50% of the apps sold ad/or poited to (rather tha istalled) will be Web apps, ot platform-specific ative apps. There will still be paid apps, but more will be Web apps for which users pay. More specifically, by 2015, 60% of eterprise mobile applicatios ad 3 40% of cosumer mobile applicatios will be Web applicatios. Istead of ivestig i a series of bespoke applicatios, the FT has built a sigle web applicatio i 5 HTML5 that ca work i the browser o a rage of smart phoes ad tablets. 6

7 Vedor support Browser vedors are gearig up to support the compatibility of HTML5 features i both PC ad mobile media. Feature Safari IOS Adroid browsers IE Firefox Blackberry Opera Platform iphoe Phoe (1-2.3,4.0) Tablets Adroid Phoe Tablet Mobile Mii ipad Applicatio cache No No Web storage No Web SQL Storage No No No Geolocatio No Multimedia No Server set evets 4.1+ No No No 6.0 No No No Web sockets 4.2+ No No No No Web workers 5.0+ No No No No Cavas API Touch evets No No CSS - basic Network iformatio No No No No No No No File API No No No No No No No Source : Table 1: Mobile Browser Support Matrix Feature Webkit Gecko Tridet Presto Safari Chrome Firefox IE Opera Geolocatio APIs Cavas support 5.0 Partial 16.0 partial Partial 9.0+ Offlie storage No 9.0+ Drag & drop Partial No Audio & Video Partial Server evets No Web sockets Partial Web workers No Support for JavaScript (ECMA Script 3.0) File APIs Partial Support for CSS Idex based API 5.0 Partial 16.0 Partial 4.0+ Partial 9.0 Partial No Source: Table 2: PC Support Matrix 7

8 Power of Hybrid over Mobile Web Mobile web features ca be greatly augmeted by placig them i a hybrid cotext. Key features iclude: Database storage: I mobile web, data is stored as plai text. There is a room for security threat (a) If data is lost (b) if the storage locatio is fixed ad other apps ca access it. With hybrid applicatios, data ca be stored securely with ecryptio. Media: With mobile web applicatios, cotet ca be played back. With hybrid applicatios, data ca ot oly be played back, but recorded usig the ative bridge. Network coectios: HTML5 supports web sockets. The Hybrid approach ca hadle full socket commuicatios. Native mobile compoets ca ope a socket ad ca commuicate with the server/ other devices, just like i traditioal socket commuicatio. I HTML5, the web server ca support the web sockets, though ot all the browsers are supportig this feature at this time. Push otificatio: Real-time push otificatios are possible with the Hybrid approach via the use of ative compoets. HTML5 also supports otificatios via server push techology with persistet coectios. I additio to the above, the hybrid approach supports full access to device features such as the camera, motio sesors, accelerometer, file system access, cotact lists ad sesors. Market adoptio The market adoptio of HTML5 has bee swift: TM The aoucemet of a HTML5 based OS Boot to Gecko by Mozilla will be a boost to hybrid applicatio developmet ad is expected to eter the Brazilia market i early Devices featurig Boot To Gecko will be maufactured by TCL commuicatio techology (Alcatel) ad ZTE. Leadig global etwork operators are backig this iitiative, icludig Deutsche Telekom, Etisalat, Smart, Sprit, Telecom Italia, Telefóica ad Teleor. Rich Iteret Applicatios (RIA) applicatios are viewig HTML5 as a alterative to Adobe Flash ad Microsoft s Silverlight techologies. H.264 format videos supported by HTML5 (Cosumer applicatios) Google Gears project for offlie storage is superseded by HTML5 Web storage API (Key- Value pair) Web SQL Database API (WebDB) (Example: Gmail) Fiacial sites are usig HTML5 based chartig (Google Fiace, FT) HTML5 Cavas supports dyamic rederig of 2D graphics Oe billio HTML5 phoes to be sold worldwide i

9 HTML5 applicatio - 224,000 payig digital subscribers A major credit compay, Korea Stocks by Microsoft data services push otificatio service ICBC Bak First Equity Strategy LLC G Mail Offlie database capabilities. Reduces the gap betwee ative app ad web app. Data services Music & video library Mobile ID HTML5 based GPS avigatio Challeges i Hybrid App Implemetatio I this sectio we will explore challeges that oe ecouters i hybrid applicatio implemetatio ad how they ca be overcome. Advaced UX capabilities Developig for the web UI has classically bee much more challegig compared to a ative UI. Several JavaScript tool kit vedors stepped up to close the gap ad offer reasoable support for UI features such as Page trasitios with slide up, slide dow, pop, fade, flip features Swipes with Tap, Tap hold, swipe left, swipe right features Platform specific look ad feel of cotrols Chartig cotrols support Applicatio cachig Traditioal web applicatios store data i sessio variables ad cookies which are still supported by the browser cache. HTML5 exteds this support to store the data i a web database as well. The size of web databases is limited (5 MB 10 MB) ad does ot offer ecryptio. Aother drawback of usig web databases is that the exteral sychroizatio process caot access the database, as the database is tied to the browser. 9

10 Offlie database support Offlie database support allows users to have all required data to make the applicatios operatioal without a etwork coectio. SQLite, UltraLite ad SQL server 2005 (Widows) are some of the choices. These databases ca be very large ad ca have relatioal data. A SQL Cipher offers a ecrypted database. I additio to storig applicatio data, the offlie database ca be used for data trasfer as a sharig media from HTML to ative portios of the applicatio ad vice versa. Applicatios should be able to execute SQL queries o the local database ad retrieve the result sets easily ad process them o the web cotet. Security vulerabilities Security vulerabilities are geerally the same for hybrid ad web applicatios. Most moder web browsers prevet certai vulerabilities such as malicious scripts or cross-domai requests; however, typically hybrid applicatios use uiwebview (ios), WebView (Adroid); these are ative cotrols that use WebKit egies ad do ot offer the same level of support as a browser does. It is importat for a developmet platform to provide tools to mitigate security vulerabilities such as: Cross site scriptig (Prevetio of malicious scripts) Cross site Request Forgery (Cookie thefts) SQL ijectios Secured local storage (ecryptio) Data ecryptio: additioal ecryptio may be required for data trasfers betwee web ad ative cotets or data storages o the device database. Performace Performace is oe of the paramout cocers for the applicatio developers. The key reasos for performace degradatio are: Data trasfer across multiple layers of ative, JavaScript libraries ad webview. Rederig of web pages from the server. This ca be avoided by embeddig the web cotet as part of the applicatio footprit o the local device. Oe of the key challeges is figurig out how to hadle the chages that ca occur to the web cotet o the server side. Active moitorig of web cotet ca update the applicatio footprit o the mobile device. This ca elimiate the eed for rebuildig ad packagig processes. Loadig of larger images. This ca be improved by loadig the images from the device ad ca be further optimized by choosig the appropriate image dyamically usig device detectio ad form factor cosideratios. Optimized data trasfers over the etwork. 10

11 Cotet adaptatio/switchig Hybrid applicatios have the challege of dyamically adjustig the cotet to the form factor of the web view widow. There are several approaches oe ca take. The most commo way of adjustig the web cotet is to use CSS. The cotet adaptatio ca be doe o the server, cliet or both. Server: This paradigm relies o the device detectio libraries or databases istalled o the webserver (Such as WURFL, DeviceAtlas) to detect the device accessig the web site ad provides the device capabilities. These sets of capabilities allow the developer to fie-tue the resultig page to match the device s capabilities with a very high level of cotrol. This techique is beig used by Facebook, Google, Ebay, Yahoo, Amazo ad YouTube. Istead of sedig large images to devices ad expectig them to adjust their form factors, the server ca serve the mobile pages desiged for the requested devices. Several cliet approaches ad techiques are emergig. Cliet: 1) Resposive Desig: This techique ivolves fluid layout desig so the site ca adjust accordig the resolutio of the devices. It maily adopts a flexible grid, (which implies scalig with the resolutio rather tha fixed pixel dimesios), CSS ad media queries. By usig these techiques, it is possible to serve a sigle webpage to a wide rage of devices ad have the local cliet process ad reder the appropriate desigs. 2) Progressive Ehacemets: The idea of this paradigm is to serve a basic mobile friedly HTML page to the all the devices ad the JavaScript code will add the fuctioality progressively to the page. A cliet applicatio ca take advatage of both these techiques to reder webpages o the mobile device. Hybrid approach: You get the best of both approaches. Device detectio happes o the server ad serves the mobile friedly HTML pages. The experiece is the optimized o the cliet with progressive ehacemet ad resposive desig techiques. Applicatio upgrades: Upgrades of hybrid apps ca be tricky sice the cotet ca exist o the web ad the ative parts of the applicatio. Upgrades become madatory with a chage i the ative cotet or i the ative wrapper libraries. Chages i the web cotet may also ecessitate a upgrade if the web cotet is embedded as part of the applicatio. Navigatioal cocers: This is oe of the key cosideratios for hybrid applicatios as the UI flow ca be complicated. Seamless avigatio across the ative -> web -> ative flow is very much essetial. It is importat to choose a solutio that provides capabilities to address these cocers. Data sharig aspects: As metioed earlier, alog with the avigatio, data flow ca also happe across compoets. Applicatio developers should desig a chael for sharig the trasiet data across the ative -> web -> ative trasitios. 11

12 Architectural approaches There are differet approaches to developig hybrid applicatios. The overarchig theme is to provide access to ative device features ad web cotet withi the same applicatio. a) Oe approach ivolves usig the ative web view/cotrol offered by the platform vedors to reder the web cotet ad the leveragig the wrapper bridge to access the device features usig JavaScript libraries. Curretly, vedors are providig a web view optio to reder web cotet, while access to ative device features is ot directly exteded. Several compaies foud a work aroud to leverage the ative features usig JavaScript libraries. I Widows 8.0, Microsoft provides access to the device features without the eed for ay 3rd party libraries. b) A custom hybrid web cotaier that leverages the WebKit egie, which ca provide access to device features via messagig. It cotais a local data store. I the custom hybrid web cotaier, a dedicated chael is established to access the ative features via messagig. This techique gives developers better cotrol as if they were buildig the app as a ative compoet. The problem with this approach is that the cotaiers must be developed for differet platforms ad will become platform depedet. They are tied to differet WebKit egies (ios, Adroid WebKit, Microsoft Tridet). They also eed to be costatly checked agaist ewer platform versios ad features. The followig discussio maily focuses o the first optio. Web View cotrol HTML 5 / JavaScript /CSS (Webkit Egie) Web server JavaScript API bridge Platform specific iterop library Native Device features 12

13 Hybrid apps use a web view cotrol (UIWebView o ios, WebView o Adroid ad others) to preset the HTML ad JavaScript files. WebView uses the ative browser rederig egie (ot the browser itself). The HTML ad JavaScript used to costruct a hybrid app is redered/ processed by the WebKit rederig egie. The key igrediet of the hybrid apps is the implemetatio of a abstractio layer that exposes the device capabilities (ative APIs) as JavaScript APIs. This is somethig ot possible with Mobile Web implemetatios because of the security boudary betwee the browser ad the device APIs. Several vedors are developig their ow JavaScript abstractio layer over ative APIs such as TCS (ios, Adroid, BB ad WP 7.5) Whe the ative wrapper is compiled aroud the HTML, CSS ad JavaScript resources, there is a iterop library added that coects the JavaScript APIs with the platform specific APIs. Web Cotet (JavaScript) Platform specific library Device features Call back data Platform specific library Build / Deploymet/ upgrades: Hybrid applicatios are built as ative apps. The resultig applicatios ca be istalled just like ative apps from the app stores. While buildig the app, the web cotet ca be embedded o the device as part of the local footprit, to ehace the performace ad resposiveess of the mobile applicatio. The applicatios ca be deployed o the commercial or employee app stores. Recommedatios The choice of selectio of the hybrid approach should be carefully determied by cosiderig various aspects. As a rule of thumb, if the audiece base is wide ad the platform diverse, ad oe eeds to deal with device diversity ad form factor challeges, a Hybrid approach is highly recommeded. Likewise, if your time to market is low or the total cost of owership is sigificat, the Hybrid App approach will help. If performace is the key cocer or UI experiece is the paramout factor, the Hybrid approach may ot be the right choice. If you have multiple applicatios o the developmet horizo with diverse platforms but eed a uiform user experiece across the web while plaig to take advatage of the device features, it is prudet to take a hybrid approach. 13

14 For compaies who are strugglig to fid their user base ad to make ivestmet decisios, it would be great to start with the simple, cost effective hybrid approach to ope the doors for a wide audiece base, the decide whether developig platform specific releases would be prudet based o the aalytics collected. As you ca see i the above chart, the hybrid approach supports most features. Key Criteria Web App Native App Hybrid App Multiplatform support Access to hardware sesors Access to peripheral SDKs Performace Native look ad feel Appsearch through app store distributio Upgrades Backward/ forward compatibility Developmetsupport Testig Simulators Debuggig Offlie support Time to market Budget Total cost of owership BYOD Cotet Search Paid apps Advertisig Aalytics Uique iteractive game like experiece Graphics Media Leged Full Support Some Support Limited/No Support 14

15 Coclusio Oe should choose a mobile applicatio developmet approach by takig curret ad future eeds ito cosideratio. It is very difficult to take every possible cosideratio ito accout as the mobile idustry evolves across platform diversity, disparate devices, etwork eeds, ad a more demadig user experiece. The mobile market is quickly growig ad the oly costat is chage. Device, platform ad browser techology will cotiue to chage each year makig it almost impossible to develop a strategy that s future-proof beyod a few years. The time to market is extremely importat ad busiesses are forced to move forward. Cosiderig all possible variables, it would be prudet to adopt a approach where you ivest less i the begiig, yet address a wide variety of audiece, devices ad platforms ad evolve progressively. The best that developers ca do is to esure that their applicatios have a good separatio of layers. Loose couplig will make it easier to perform the ievitable chages that will be required whe mobile techology evolves. With the Hybrid approach, oe does ot close the door o usig the rich, ative device features or the ative UX experiece (wherever applicable). If the user experiece is of paramout importace, the ative portio ca be exteded. Aother factor to keep i mid is the availability of skilled web developers i the market to brig solutios to the market faster. The hybrid approach provides maximum flexibility, without sacrificig ative specific features. Refereces 1. Itegratio Challeges For Mobile Commerce Peter Sheldo, Aug 4, 2011 Forrester Research, Ic. 2. The State Of Applicatio Developmet I Eterprises Ad SMBs Jeffery S Hammod, April 11, 2011 Forrester Research, Ic. 3. The (Not So) Future Web, 21 Jue 2011 Gee Phifer, David Mitchell Smith - Garter 4. Predicts 2012: Ramificatios of the Trasitio to HTML5 Gee Phifer, November 30, Garter 5. The Fiacial Times Makes a Bold Move i Paid Apps Nick Thomas, Jue 10, 2011 Forrester Research, Ic. 6. Web site: 7. Web site: 8. Neil Shah, Aalyst at Strategy Aalytics, December 7, Web site: The Mobile Ladscape: Part 4B The Impact o Eterprise Mobility, David Akka, July 21,

16 About TCS Mobility TCS Mobility delivers best i class mobility services ad solutios with complete mobility lifecycle cosultatio ad developmet service alog with customizatio o top of pre-built solutios to provide the best i class beefits to our customers. Our passio for providig the very best ad comprehesive mobility services ad solutios to our customers is realized through our deep expertise i mobility gaied through the experiece of a strog team that has a career log experiece i mobile techologies ad a dedicated mobility user experiece desig team that is committed to leveragig the uique ative capabilities of each device platform. Cotact For more iformatio about TCS Mobility cotact [email protected] Subscribe to TCS White Papers TCS.com RSS: Feedburer: About Tata Cosultacy Services (TCS) Tata Cosultacy Services is a IT services, cosultig ad busiess solutios orgaizatio that delivers real results to global busiess, esurig a level of certaity o other firm ca match. TCS offers a cosultig-led, itegrated portfolio of IT ad IT-eabled ifrastructure, egieerig TM ad assurace services. This is delivered through its uique Global Network Delivery Model, recogized as the bechmark of excellece i software developmet. A part of the Tata Group, Idia s largest idustrial coglomerate, TCS has a global footprit ad is listed o the Natioal Stock Exchage ad Bombay Stock Exchage i Idia. For more iformatio, visit us at IT Services Busiess Solutios Outsourcig All cotet / iformatio preset here is the exclusive property of Tata Cosultacy Services Limited (TCS). The cotet / iformatio cotaied here is correct at the time of publishig. No material from here may be copied, modified, reproduced, republished, uploaded, trasmitted, posted or distributed i ay form without prior writte permissio from TCS. Uauthorized use of the cotet / iformatio appearig here may violate copyright, trademark ad other applicable laws, ad could result i crimial or civil pealties. Copyright 2012 Tata Cosultacy Services Limited TCS Desig Services I M I 10 I 12