Learn how to build cross-platform mobile applications using technologies like HTML5, PhoneGap, Appcelerator Titanium, Adobe Flash Builder and Applause.
Here is a video recording of this presentation: http://www.infoq.com/presentations/Cross-Platform-Mobile
11. The Native Experience
IDE Emulator Store Consumer
IDE Emulator Store Consumer
IDE Simulator Store Consumer
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
12. The Native Experience
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
13. Native App
Native App only centr
application
al
logic
// Web App
ttp: htt
h (Java / PHP) p://
Native App
Files Web
Images
Other Resources
Database Service
d
Device U I an Backend 3rd Party
tes
execu ication
) appl
(s ome
logic
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
15. D evelo
per’s Native Apps
rspe ctive
pe
Language(s) Java (Android, BlackBerry) Cost of $$ Mac OS required (iOS)
Objective-C (iOS) development $$ License fees (all)
C# (WP7)
Learning curve ✔ Educational material
Platforms ✔ Android ✔ Forums
✔ iOS ✔ Support
✔ WP7
✔ BlackBerry Development ✔ IDEs
support Eclipse
Platform access ✔ Camera Xcode / AppCode
✔ GPS Visual Studio
✔ Gyro ✔ Debugging
✔ address book
✔ calendar
✔ etc. Monetization ✔ App stores
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
16. User’s Native Apps
perspective
Performance best you can get
Platforms ✔ Android
✔ iOS
✔ WP7
✔ BlackBerry
Visibility easily found on the app stores
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
17. Recommendation
Use 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 (peter@peterfriese.de / @peterfriese)
18. Later, in the office
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
22. The Web
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
23. The Web
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
24. The Mobile Web
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
25. abus ed as
r
a
endere
r
dumb
Server-side Web (as we know it)
exe
cu
UI tes
app and
lic
atio
nl
ogi
c
: // Web App
h ttp (Java / PHP) htt
p://
Web Browser
Files Web
Images
Other Resources
Database Service
Device Backend 3rd Party
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
26. Frameworks / Toolkits
320 zurb Foundation
http://foundation.zurb.com/
Twitter Bootstrap
http://twitter.github.com/bootstrap/
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
28. D evelo
per’s Mobile Web
rspe ctive
pe
Language(s) Java / Ruby (Backend) Cost of $0.0 use existing tools
HTML* (Frontend) development $0.0 no license fees
Learning curve ✔ Educational material
Platforms ✔ Android ✔ Forums
✔ iOS ✔ Support
✔ WP7
✔ BlackBerry Development ✔ use editor of your choice
✔ even your old Nokia support ✔ Debugging:
Platform access ✘ Camera Chrome DevTools
✔ GPS
✔ Gyro
✘ address book
✘ calendar
✘ etc. Monetization ✘ App stores
*) I know, HTML doesn’t count as a “real” language.
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
29. User’s Mobile Web
perspective
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!
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
30. Recommendation
Use the mobile web if...
- you need a mobile landing page for your
company
- you need something that runs on almost
every platform
Don’t use it if you
want to use
smartphone sensors!
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
31. Client-Side Web
Also know as
HTML 5
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
32. execu tes UI
and
pplicatio
n
Client-side Web only centr
al
(some) a application
logic
logic
Web Browser
http://
App Web App
(JavaScript) (Java / PHP)
Files Files
Database Images
Images
Other Resources
Database
Other Resources (e.g. for caching)
Device Backend
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
36. Dev eloper’s Client-Side Web
tive
per spec
Language(s) Java / Ruby (Backend) Cost of $0.0 use existing tools
HTML* (Frontend) development $0.0 no license fees
JavaScript (Front- /Backend)
Learning curve ✔ Educational material
Platforms ✔ Android ✔ Forums
✔ iOS ✔ Support
✔ WP7
✔ BlackBerry Development ✔ use editor of your choice
support ✔ Debugging:
Platform access ✘ Camera Chrome DevTools
✔ GPS
✔ Gyro **
✘ address book
✘ calendar
✘ etc. Monetization ✘ App stores
*) 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 (peter@peterfriese.de / @peterfriese)
37. User’s Client-Side Web
perspective
Performance - as fast as your browser is
- you will experience network latency Someti
mes, ap
Platforms ✔ Android Android ps on
or Blac
✔ iOS
will loo kBerry
✔ WP7 k like a
✔ BlackBerry
pps on
the iPh
✔ all phones with a browser one.
Visibility ✘ not distributed via the app stores
✔ search engine!
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
38. Recommendation
Use 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 (peter@peterfriese.de / @peterfriese)
44. Dev eloper’s Hybrid Apps
tive
per spec
Language(s) Java / Ruby (Backend) Cost of $0.0 use existing tools
HTML* (Frontend) development $0.0 no license fees
JavaScript (Front- /Backend)
Learning curve ✔ Educational material
Platforms ✔ Android ✔ Forums
✔ iOS ✔ Support
✔ WP7
✔ BlackBerry Development ✔ use editor of your choice
support ✔ support in some IDEs
Platform access ✔ Camera ✔ Debugging:
✔ GPS Chrome DevTools
✔ Gyro **
✔ address book
✔ calendar
✔ etc. Monetization ✔ App stores
*) 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 (peter@peterfriese.de / @peterfriese)
45. User’s Hybrid Apps
perspective
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!
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
46. Recommendation
Use 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 (peter@peterfriese.de / @peterfriese)
48. Interpreted Apps only centr
al
application
logic
Native App
http:/
/
API API API API Web App
(Java / PHP)
Native APIs
Abstraction Layer ://
t p
ht
App Script Files
(JavaScript, Lua) Images
Other Resources
Database
Interpreter
d
U I an
tes
e xecu ication Device Backend
appl
(so me)
logic
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
51. Dev eloper’s Interpreted Apps
tive
per spec
Language(s) JavaScript Cost of $0.0 tools free of charge
development > $0.0 license fees to
some extend
Platforms ✔ Android Learning curve ✔ Educational material
✔ iOS ✔ Forums
✘ WP7 ✔ Support
✔ BlackBerry
Development ✔ IDEs
Platform access ✔ Camera support ✔ Integrated Debugging
✔ GPS
✔ Gyro **
✔ address book
✔ calendar
✔ etc. Monetization ✔ App stores
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
52. User’s Interpreted Apps
perspective
Performance - almost native experience
Platforms ✔ Android
✔ iOS
✘ WP7
✔ BlackBerry
Visibility ✔ distributed via the app stores
✘ search engine: no!
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
53. Recommendation
Use 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 (peter@peterfriese.de / @peterfriese)
54. Cross Compiling
Image found at http://mjmobbs.com/?p=262
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
59. Dev eloper’s Cross-Compiled
tive
per spec
Language(s) .NET / C# Cost of $$ need to buy dev tools
development
Platforms ✔ Android Learning curve ✔ Educational material
✔ iOS ✔ Forums
✔ WP7 ✔ Support
✘ BlackBerry
Development ✔ IDEs
Platform access ✔ Camera support ✔ Integrated Debugging
✔ GPS
✔ Gyro **
✔ address book
✔ calendar
✔ etc. Monetization ✔ App stores
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
61. Recommendation
Use 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 (peter@peterfriese.de / @peterfriese)
62. Summary
Native App
http:/
/
/ Web App / Web App API API API API Web App
p:/ p:/
htt (Java / PHP) htt
p:// htt (Java / PHP) htt
p:// (Java / PHP)
Native APIs
Native App Web Browser
Abstraction Layer ://
tp
ht
Files Files App Script Files
Images
Web Images
Web (JavaScript, Lua)
Other Resources
Database Service Other Resources
Database Service
Images
Database
Other Resources
Interpreter
Device Backend 3rd Party Device Backend 3rd Party Device Backend
Web Browser Native App Native
App Files
http
http:// Images
http:// Other Resources
://
App Web App Web App iOS
(Java / PHP) (Java / PHP) Cartridge
(JavaScript) Library (native) (iOS)
http://
Engine
Cartridge Native Web App
Native Code Model
Bridge
// App
p: (Java / PHP)
Describes App (Android)
htt
Cartridge Android
/
(WP7)
Files Files
http:/
Files App (JavaScript)
Database Images Images
Images
Other Resources
Database Other Resources
Database
Other Resources (e.g. for caching) Generator
Interpreter
Native
Database
App
Device Backend Device Backend Backend
WP7
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
63. Summary
Client- Cross
Language(s) Native Web Side Web Hybrid Interpreted Compiled
various ✔
Java / Ruby / HTML ✔
JavaScript / HTML ✔ ✔ ✔
C# ✔
Platforms
Android ✔ ✔ ✔ ✔ ✔ ✔
iOS ✔ ✔ ✔ ✔ ✔ ✔
WP7 ✔ ✔ ✔ ✔ ✘ ✔
BlackBerry ✔ ✔ ✔ ✔ ✔ ✘
Platform access ✔ ✘ ✘ ✔ ✔ ✔
Cost of development $$$ $ $$ $$ $$ $$
Development support ++ + + + ++ ++
Monetization ++ - - ++ ++ ++
64. Zühlke. Empowering Ideas.
Want to learn more? Get in touch - I’m available for consulting:
@peterfriese
peter.friese@zuehlke.com
http://www.zuehlke.com
65. Zühlke. Empowering Ideas.
http://slidesha.re/xS4QGb
Want to learn more? Get in touch - I’m available for consulting:
@peterfriese
peter.friese@zuehlke.com
http://www.zuehlke.com