mobile techcon sept2012: cross-platform mobile development
DESCRIPTION
Cross-Platform Development - An Overview Developing mobile applications for multiple platforms is a challenging task. In this session, I will give a brief overview of the main approaches for developing cross-platform mobile applications. We'll start with native apps, and work our way through hybrid applications and interpreted apps to HTML5 based solutions. I will demonstrate each of the approaches by way of a live example. Learn how to build cross-platform mobile applications using technologies like HTML5, PhoneGap, Appcelerator Titanium, Adobe Flash Builder and Applause. Presentation at Mobile TechCon in Septmeber 2012 (Frankfurt am Main) from Peter Friese (Zühlke Engineering GmbH) Here is a video recording of this presentation: http://www.infoq.com/presentations/Cross-Platform-MobileTRANSCRIPT
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Cross-Platform Mobile Development
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Integrating Twitter in Your iOS 5 Apps
@[email protected]/peterhttp://peterfriese.de
Peter Friese
cell phone usage is ubiquitous
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
0 %
1,5 %
3,0 %
4,5 %
6,0 %
7,5 %
9,0 %
10,5 %
12,0 %
13,5 %
15,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 2012-03 2012-06
Growth of the mobile web
Source: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201206
> 8%
~ 4%< 2%
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
I want an App
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Mobile Platforms
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Mobile Platforms
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
The Native Experience
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Native App
3rd PartyDevice Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Web Service
http://
Native App
executes UI and
(some) application
logic
only central application logicNative App
Demo
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Native Apps
Language(s) Java (Android, BlackBerry)Objective-C (iOS)C# (WP7)
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry
Platform access ✔ Camera✔ GPS✔ Gyro✔ address book✔ calendar✔ etc.
Cost of development
$$ Mac OS required (iOS)$$ License fees (all)
Learning curve ✔ Educational material✔ Forums✔ Support
Development support
✔ IDEs Eclipse Xcode / AppCode Visual Studio✔ Debugging
Monetization ✔ App stores
Developer’s
perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Native Apps
Performance best you can get
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry
Visibility easily found on the app stores
User’s perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
RecommendationUse native applications if...- you want to achieve native look and feel- you need top performance- you want to be on the app store(s)
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Later, in the office
Multi-Platform Apps
only for rich guys?
Have your cake
http://www.flickr.com/photos/jeff-anderson/4385042770/
and eat it, too?
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
6 Approaches
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
The Web
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
The Web
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
The Mobile Web
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Server-side Web
3rd PartyDevice Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Web Service
http://
Web Browser
executes UI and application logic
(as we know it)abused as a dumb
renderer
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
320
Frameworks / Toolkits
zurb Foundationhttp://foundation.zurb.com/
Twitter Bootstraphttp://twitter.github.com/bootstrap/
Demo
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Mobile Web
Language(s) Java / Ruby (Backend)HTML* (Frontend)
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry✔ even your old Nokia
Platform access ✘ Camera✘ GPS✘ Gyro✘ address book✘ calendar✘ etc.
Cost of development
$0.0 use existing tools$0.0 no license fees
Learning curve ✔ Educational material✔ Forums✔ Support
Development support
✔ use editor of your choice✔ Debugging: Chrome DevTools
Monetization ✘ App stores
Developer’s
perspective
*) I know, HTML doesn’t count as a “real” language.
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Mobile Web
Performance - as fast as your browser is- you will experience network
latency
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry✔ all phones with a browser
Visibility ✘ not distributed via the app stores✔ search engine!
User’s perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
RecommendationUse the mobile web if...- you need a mobile landing page for your
company- you need something that runs on almost
every platformDon’t use it if you
want to use smartphone sensors!
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Client-Side WebAlso know as HTML 5
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
executes UI and
(some) application logic
only central application logic
Device Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Web Browser
App (JavaScript)
FilesImages
Other ResourcesDatabase
(e.g. for caching)
Client-side Web
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
zepto.js iUI.js
joApp
Wink Toolkit
Frameworks / Toolkits
Demo
Demo
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Client-Side Web
Language(s) Java / Ruby (Backend)HTML* (Frontend)JavaScript (Front- /Backend)
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry
Platform access ✘ Camera✔ GPS✔ Gyro **✘ address book✘ calendar✘ etc.
Cost of development
$0.0 use existing tools$0.0 no license fees
Learning curve ✔ Educational material✔ Forums✔ Support
Development support
✔ use editor of your choice✔ Debugging: Chrome DevTools
Monetization ✘ App stores
Developer’s
perspective
*) I know, HTML doesn’t count as a “real” language.**) See http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Client-Side Web
Performance - as fast as your browser is- you will experience network latency
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry✔ all phones with a browser
Visibility ✘ not distributed via the app stores✔ search engine!
User’s perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Client-Side Web
Performance - as fast as your browser is- you will experience network latency
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry✔ all phones with a browser
Visibility ✘ not distributed via the app stores✔ search engine!
User’s perspective
Sometimes, apps on Android or BlackBerry will look like apps on the iPhone.
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
RecommendationUse the client-side web if...- you want to prototype a service- need something that looks like an app,
but care less for the sensors of your phone
In the future, this will probably be a viable way
to build full-blown apps
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Hybrid Apps
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Device Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Native App
Interpreter
App (JavaScript)
Native Code
Brid
ge
Library (native)
http://
only central application logic
executes UI and (some) application logic
Hybrid App
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Adobe Flash Builder
Hybrid App
Demo
DemoRequest Interception
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Hybrid Apps
Language(s) Java / Ruby (Backend)HTML* (Frontend)JavaScript (Front- /Backend)
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry
Platform access ✔ Camera✔ GPS✔ Gyro **✔ address book✔ calendar✔ etc.
Cost of development
$0.0 use existing tools$0.0 no license fees
Learning curve ✔ Educational material✔ Forums✔ Support
Development support
✔ use editor of your choice✔ support in some IDEs✔ Debugging: Chrome DevTools
Monetization ✔ App stores
Developer’s
perspective
*) I know, HTML doesn’t count as a “real” language.**) See http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Hybrid Apps
Performance - as fast as your browser is- you will experience network latency
Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry✔ Symbian✔ Bada
Visibility ✔ distributed via the app stores✘ search engine: no!
User’s perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
RecommendationUse a hybrid approach if...- you want to build your app based on
HTML 5- and need access to the phone’s
hardware
PhoneGap’s goal is to make itself superfluous.
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Interpreted Apps
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Interpreted Apps
Device Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Native App
Interpreter
App Script(JavaScript, Lua)
Native APIs
API
http://
Abstraction Layer
APIAPIAPI
only central application logic
executes UI and
(some) application
logic
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Frameworks / Toolkits
Demo
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Interpreted Apps
Language(s) JavaScript
Platforms ✔ Android✔ iOS✘ WP7✔ BlackBerry
Platform access ✔ Camera✔ GPS✔ Gyro **✔ address book✔ calendar✔ etc.
Cost of development
$0.0 tools free of charge> $0.0 license fees to some extend
Learning curve ✔ Educational material✔ Forums✔ Support
Development support
✔ IDEs✔ Integrated Debugging
Monetization ✔ App stores
Developer’s
perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Interpreted Apps
Performance - almost native experience
Platforms ✔ Android✔ iOS✘ WP7✔ BlackBerry
Visibility ✔ distributed via the app stores✘ search engine: no!
User’s perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
RecommendationUse interpreted apps if...- you want to use “one language to build
them all”- need access to the phone’s hardware- need semi-native look’n’feel / performance
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Cross Compiling
Image found at http://mjmobbs.com/?p=262
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Code Generator
Backend
Web App(Java / PHP)
FilesImages
Other Resources
Database
http://
Generator
ModelDescribes App En
gine
Cartridge(iOS)
Cartridge(Android)
Cartridge(WP7)
iOS
Native App
Android
Native App
WP7
Native App
http://
http://
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Cross-Compiler (Mono)
C# MSIL Compiler
Backend
http://
Mono Compiler
Core(Shared)
MonoTouch(iOS)
MonoDroid(Android)
iOS
Native App
Android
Native App
WP7
Native App
http://
http:/
/
.NET RT(WP7)
UI(iOS)
UI(Android)
UI(WP7)
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Frameworks / Tools
Demo
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Cross-Compiled
Language(s) .NET / C#
Platforms ✔ Android✔ iOS✔ WP7✘ BlackBerry
Platform access ✔ Camera✔ GPS✔ Gyro **✔ address book✔ calendar✔ etc.
Cost of development
$$ need to buy dev tools
Learning curve ✔ Educational material✔ Forums✔ Support
Development support
✔ IDEs✔ Integrated Debugging
Monetization ✔ App stores
Developer’s
perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Cross-Compiled
Performance - native experience- native look’n’feel
Platforms ✔ Android✔ iOS✔ WP7✘ BlackBerry
Visibility ✔ distributed via the app stores✘ search engine: no!
User’s perspective
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
RecommendationUse cross-compiled apps if...- you want to use “one language to build
them all”- need access to the phone’s hardware- need truly native look’n’feel / performance
(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)
Summary
3rd PartyDevice Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Web Service
http://
Native App
3rd PartyDevice Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Web Service
http://
Web Browser
Device Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Native App
Interpreter
App Script(JavaScript, Lua)
Native APIs
API
http://
Abstraction Layer
APIAPIAPI
Device Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Web Browser
App (JavaScript)
FilesImages
Other ResourcesDatabase
(e.g. for caching)
Device Backend
Web App(Java / PHP)
FilesImages
Other ResourcesDatabase
http://
Native App
Interpreter
App (JavaScript)
Native Code
Brid
ge
Library (native)
http://
Backend
Web App(Java / PHP)
FilesImages
Other Resources
Database
http://
Generator
ModelDescribes App En
gine
Cartridge(iOS)
Cartridge(Android)
Cartridge(WP7)
iOS
Native App
Android
Native App
WP7
Native App
http://
http://
Language(s) Native WebClient-
Side Web Hybrid InterpretedCross
Compiledvarious ✔
Java / Ruby / HTML ✔
JavaScript / HTML ✔ ✔ ✔
C# ✔
Platforms
Android ✔ ✔ ✔ ✔ ✔ ✔
iOS ✔ ✔ ✔ ✔ ✔ ✔
WP7 ✔ ✔ ✔ ✔ ✘ ✔
BlackBerry ✔ ✔ ✔ ✔ ✔ ✘
Platform access ✔ ✘ ✘ ✔ ✔ ✔
Cost of development $$$ $ $$ $$ $$ $$Development support ++ + + + ++ ++Monetization ++ - - ++ ++ ++
Summary
Zühlke. Empowering Ideas.
@[email protected]://www.zuehlke.com
Want to learn more? Get in touch - I’m available for consulting:
http://slidesha.re/xS4QGb