Cross platform mobile development

Cross-Platform Mobile Development

(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)

Peter Friese

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


cell phone usage is ubiquitous

Growth of the mobile web
15,0 %

13,5 %

> 8%
12,0 %

10,5 %

9,0 %

7,5 % ~ 4%
< 2%
6,0 %

4,5 %

3,0 %

1,5 %

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

Source: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201206


I want an App


Mobile Platforms


Mobile Platforms
Others 2011
Android
46,9 %
iOS
18,8 %
BlackBe
rr y 11,5 %
Symbian
16,9 %
WP7
2,3 %
Others
3,6 %

Source: IDC Worldwide Quarterly Mobile Phone Tracker, August 12, 2012. http://www.idc.com/getdoc.jsp?containerId=prUS23638712

Mobile Platforms
Others 2011
2012
Android
46,9 %
68,1 %
iOS
18,8 %
BlackBe 16,9 %
rry
11,5 %
Symbian 4,8 %
16,9 %
4,4 %
WP7
2,3 %
Others 3,5 %
3,6 %
2,3 %
2011
2012

Source: IDC Worldwide Quarterly Mobile Phone Tracker, August 12, 2012. http://www.idc.com/getdoc.jsp?containerId=prUS23638712

The Native Experience
IDE Emulator Store Consumer

IDE Emulator Store Consumer

IDE Simulator Store Consumer


The Native Experience


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

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


User’s Native Apps
perspective

Performance best you can get

Platforms ✔ Android
✔ iOS
✔ WP7
✔ BlackBerry

Visibility easily found on the app stores


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)


Later, in the office


Multi-Platform Apps

only 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


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


Frameworks / Toolkits

320 zurb Foundation
http://foundation.zurb.com/

Twitter Bootstrap
http://twitter.github.com/bootstrap/


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

✔ 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.


User’s Mobile Web
perspective

Performance - as fast as your browser is
- you will experience network
latency

✔ iOS
✔ WP7
✔ BlackBerry
✔ all phones with a browser

Visibility ✘ not distributed via the app stores
✔ search engine!


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!


Client-Side Web
Also know as
HTML 5


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



zepto.js iUI.js

joApp

Wink Toolkit

Dev eloper’s Client-Side Web
tive
per spec
JavaScript (Front- /Backend)
✔ iOS ✔ Support
✔ WP7
support ✔ Debugging:
Platform access ✘ Camera Chrome DevTools
✔ GPS
✔ Gyro **
✘ address book
✘ calendar
✘ etc. Monetization ✘ App stores

**) See http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/


User’s Client-Side Web
perspective

- 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!


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


Hybrid Apps


Hybrid App only centr
application
al
logic

Native App
http://

Web App
Library (native) (Java / PHP)

Native Code
Bridge

p ://
t
ht

App (JavaScript) Files
Images
Other Resources
Database
Interpreter

Device Backend

me)
executes UI and (so
application logic

Hybrid App

Adobe Flash Builder


Dev eloper’s Hybrid Apps
tive
per spec
JavaScript (Front- /Backend)
✔ iOS ✔ Support
✔ WP7
support ✔ support in some IDEs
Platform access ✔ Camera ✔ Debugging:
✔ GPS Chrome DevTools
✔ Gyro **
✔ address book
✔ calendar

**) See http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/


User’s Hybrid Apps
perspective

- you will experience network latency
✔ iOS
✔ WP7
✔ BlackBerry
✔ Symbian
✔ Bada
Visibility ✔ distributed via the app stores
✘ search engine: no!


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.


Interpreted Apps


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

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


User’s Interpreted Apps
perspective

Performance - almost native experience

✔ iOS
✘ WP7
✔ BlackBerry



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


Cross Compiling

Image found at http://mjmobbs.com/?p=262


Code Generator

Native
App Files

http
Images
Other Resources

://
iOS
Cartridge
(iOS)

http://
Engine

Cartridge Native Web App
Model
Describes App (Android) App (Java / PHP)

Cartridge Android

//
(WP7)

http:
Generator
Native
Database
App

Backend
WP7


Cross-Compiler (Mono)

Native
App

http
://
UI MonoTouch(iOS)
(iOS) iOS

UI MonoDroid
(Android) (Android) http
Native ://
App
UI Mono Compiler
(WP7)

Android
Core .NET RT
(WP7)

/
(Shared)

p:/
htt
C# MSIL Compiler Native
App
Backend
WP7


Frameworks / Tools


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


User’s Cross-Compiled
perspective

Performance - native experience
- native look’n’feel
✔ iOS
✔ WP7
✘ BlackBerry



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


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


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 ++ - - ++ ++ ++

Zühlke. Empowering Ideas.

Want to learn more? Get in touch - I’m available for consulting:
@peterfriese
http://www.zuehlke.com

Zühlke. Empowering Ideas.

http://slidesha.re/xS4QGb

Want to learn more? Get in touch - I’m available for consulting:
@peterfriese
http://www.zuehlke.com

Cross platform mobile development

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Cross platform mobile development

Ähnlich wie Cross platform mobile development (20)

Mehr von Peter Friese

Mehr von Peter Friese (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Cross platform mobile development