Cross platform mobile development

Peter Friese @peterfriese peter.friese@zuehlke.com xing.to/peter http://peterfriese.de

cell phone usage is ubiquitous

Growth of the mobile web > 8%9,0!% < 4%8,1!%7,2!%6,3!% < 2%5,4!%4,5!%3,6!%2,7!%1,8!%0,9!% 0!% 2008-12 2009-03 2009-06 2009-09 2009-12 2010-03 2010-06 2010-09 2010-12 2011-03 2011-06 2011-09 2011-12 Source: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201112

I want an App

Mobile Platforms

Mobile Platforms Others 2011 2015 Android 38,9 % 4 3,8 % iOS 18,2 % 16 ,9 % WP7 3,8 % 20 ,3 % Others 39,1 % 19 % 2011 2015Source: IDC Worldwide Quarterly Mobile Phone Tracker, June 9, 2011. http://www.idc.com/getdoc.jsp?containerId=prUS22871611

The Native Experience IDE Emulator Store Consumer IDE Emulator Store Consumer IDE Simulator Store Consumer

The Native Experience

Native App only centr al application logic Web Server http:// Java / PHP htt p:/ /Native App Files Database Web Images Other Resources Service I and es U ex ecut ation Device a pplic Backend (so me) logic

Native AppsProduction learning curve easy (YMMV), great number of tutorials + libraries tools great IDEs with good debugging / testing support monetization direct access to app stores / market placesUsage scenarios Data-driven apps Rich mediaUser experience Hardware direct access to all sensors / APIs User interface native / style guides Offline capabilities available (SQL databases / flat file)Platforms iOS Android Windows Phone 7.x OthersCosts for cross-platform Vendor lock-in, device-specific optimizations

The Native Experience IDE Emulator Store Consumer IDE Emulator Store Consumer IDE Simulator Store Consumer

Multi-Platform Appsonly for rich guys?

Have your cake and eat it, too?http://www.flickr.com/photos/jeff-anderson/4385042770/

6 Approaches

The Web

The Mobile Web

just a dum b Server-side Web exe endere r (as we know it) cu r app UI tes lic and atio nl ogi c Web Server http:// Java / http PHP ://Web Browser Files Database Web Images Other Resources Service Device Backend

Frameworks / Toolkits zurb Foundation Twitter Bootstrap

The Mobile WebProduction learning curve easy (YMMV), great number of tutorials + libraries tools use the editor of your choice monetization no app store distributionUsage scenarios Data-driven apps Rich media inferior performanceUser experience Hardware limited access to HW feature & APIs User interface fancy UI possible, but platform-speciﬁc styling required Ofﬂine capabilities HTML5, otherwise limitedPlatforms iOS Android Windows Phone 7.x since WP 7.5 (Mango) Others responsive designCosts for cross-platform low, plain HTML runs on any garden variety browser

Client-Side Web

s UI an d Client-side Web execute on only centr al (some) applicati application logic logic Web Browser Web Server // http: JavaScript Java / PHP htt p:/ / Files Database Files Database Web Images Images (e.g. for Caching) Other Resources ServiceOther Resources Device Backend

Frameworks / Toolkitszepto.js iUI.js joApp Wink Toolkit

Client-Side WebProduction learning curve easy (YMMV), great number of tutorials + libraries tools use the editor of your choice monetization no app store distributionUsage scenarios Data-driven apps Rich media inferior performanceUser experience Hardware limited access to HW feature & APIs User interface mostly iOS-like UI libraries Ofﬂine capabilities HTML5, otherwise limitedPlatforms iOS Android Windows Phone 7.x since WP 7.5 (Mango) Others responsive designCosts for cross-platform low, plain HTML runs on any garden variety browser

Hybrid Apps

Hybrid App only centr al application logic Native App Web ServerNative Code http:// Java / PHP htt p:/ Interpreter / // http: Bridge Files Database Web JavaScript Images Other Resources Service d U I an tes Device e xecu ication Backend ) appl (s ome logic

Frameworks / Toolkits Adobe Flash Builder

DemoRequest Interception

Hybrid AppsProduction learning curve easy (YMMV), great number of tutorials + libraries tools use the editor of your choice / commercial tools monetization app store distributionUsage scenarios Data-driven apps Rich media inferior performanceUser experience Hardware access to most HW features + many APIs available User interface huge effort required to match native UI Ofﬂine capabilitiesPlatforms iOS Android Windows Phone 7.x OthersCosts for cross-platform

Interpreted Apps

Interpreted AppsNative App interpreter Database Application Script Files Device Backend

Frameworks / Toolkits

Interpreted AppsProduction learning curve specific API, great number of tutorials + libraries tools IDEs, including debuggers monetization app store distributionUsage scenarios Data-driven apps Rich mediaUser experience Hardware access to HW and API available, wrapped with specific API User interface truly native widgets Offline capabilitiesPlatforms iOS Android Windows Phone 7.x OthersCosts for cross-platform

Cross Compilinghttp://www.flickr.com/photos/danholton/2853935782/

Code Generator Generator Generator Input Native App Logic Logic Modeldescribes logic and Database Database complete system Files FilesFiles Database Device Backend

Frameworks / Toolkits

Cross CompiledProduction learning curve new tool chain (takes getting used to) tools IDEs, but debugging in target environment monetization app store distributionUsage scenarios Data-driven apps Rich media only partially supportedUser experience Hardware access to HW and API available, wrapped with speciﬁc API User interface truly native widgets Ofﬂine capabilitiesPlatforms iOS Android Windows Phone 7.x OthersCosts for cross-platform

Native App interpreter Database Application Script Files Device BackendChoosing wisely Generator Generator Input Native App Logic Logic Model describes logic and Database Database complete system Files Files Files Database Device Backend

Client- SideProduction Native Web Web Hybrid Interpreted Cross Compiled learning curve tools monetizationUsage scenarios Data-driven apps Rich mediaUser experience Hardware User interface Ofﬂine capabilitiesPlatforms iOS Android Windows Phone 7.x OthersCosts for cross-platform

I want an App h y ?W

Reasons for apps• Entertainment• Provide access to information• Marketing• Sales channel• Sell apps

http://appontwikkelen.nl	3908
http://www.comunic.ro	571
http://blog.espol.edu.ec	345
http://lonewolflibrarian.wordpress.com	322
http://www.conseilsmarketing.com	315
http://www.scoop.it	125
http://techmaster.vn	118
http://blog.websourcing.fr	41
http://localhost	40
http://blog.bedienhilfe.ch	36
http://www.stonepower.fr	26
http://comunic.ro	21
http://www.bedienhilfe.ch	19
http://bitly.com	17
http://www.library.ceu.hu	10
http://192.168.1.53	9
http://feeds.feedburner.com	9
http://www.paperblog.fr	7
http://a0.twimg.com	3
http://www.netvibes.com	2
http://kelenvillacres.blogspot.com	2
http://comunic.tremend.ro	2
http://coderwall.com	1
http://reader.googleusercontent.com	1
http://the-refreshing-sip.blogspot.com	1
http://lonewolflibrarian.wordpress.com&_=1328854835480 HTTP	1
http://www.techgig.com	1

Cross platform mobile development

by Peter Friese on Jan 24, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

27 Embeds 5,953

Statistics

Cross platform mobile development — Presentation Transcript