Mobile TechCon sept2012: Cross-Platform Mobile Development

(c) 2012 Peter Friese, Zühlke Engineering ([email protected] / @peterfriese)

Cross-Platform Mobile Development

mailto:[email protected]



Integrating Twitter in Your iOS 5 Apps

@[email protected]/peterhttp://peterfriese.de

Peter Friese



http://peterfriese.de


cell phone usage is ubiquitous


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%




I want an App




Mobile Platforms




Mobile Platforms




The Native Experience




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


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




Native Apps

Performance best you can get


Visibility easily found on the app stores

User’s perspective




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)




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?




6 Approaches




The Web




The Web




The Mobile Web




Server-side Web


Web App(Java / PHP)

FilesImages


http://

Web Service

http://

Web Browser

executes UI and application logic

(as we know it)abused as a dumb

renderer




320

Frameworks / Toolkits

zurb Foundationhttp://foundation.zurb.com/

Twitter Bootstraphttp://twitter.github.com/bootstrap/



http://foundation.zurb.com/

http://foundation.zurb.com/

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

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

Demo


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


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.




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!





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!




Client-Side WebAlso know as HTML 5




executes UI and

(some) application logic

only central application logic

Device Backend

Web App(Java / PHP)

FilesImages


http://

Web Browser

App (JavaScript)

FilesImages


(e.g. for caching)

Client-side Web




zepto.js iUI.js

joApp

Wink Toolkit




Demo

Demo


Client-Side Web

Language(s) Java / Ruby (Backend)HTML* (Frontend)JavaScript (Front- /Backend)


Platform access ✘ Camera✔ GPS✔ Gyro **✘ address book✘ calendar✘ etc.

Cost of development



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/



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



Client-Side Web

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







Client-Side Web





Sometimes, apps on Android or BlackBerry will look like apps on the iPhone.




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




Hybrid Apps




Device Backend

Web App(Java / PHP)

FilesImages


http://

Native App

Interpreter

App (JavaScript)

Native Code

Brid

ge

Library (native)

http://


executes UI and (some) application logic

Hybrid App




Adobe Flash Builder

Hybrid App



Demo

DemoRequest Interception


Hybrid Apps

Language(s) Java / Ruby (Backend)HTML* (Frontend)JavaScript (Front- /Backend)


Platform access ✔ Camera✔ GPS✔ Gyro **✔ address book✔ calendar✔ etc.

Cost of development



Development support

✔ use editor of your choice✔ support in some IDEs✔ Debugging: Chrome DevTools


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/






Hybrid Apps


Platforms ✔ Android✔ iOS✔ WP7✔ BlackBerry✔ Symbian✔ Bada

Visibility ✔ distributed via the app stores✘ search engine: no!





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.




Interpreted Apps




Interpreted Apps

Device Backend

Web App(Java / PHP)

FilesImages


http://

Native App

Interpreter

App Script(JavaScript, Lua)

Native APIs

API

http://

Abstraction Layer

APIAPIAPI


executes UI and

(some) application

logic







Demo


Interpreted Apps

Language(s) JavaScript

Platforms ✔ Android✔ iOS✘ WP7✔ BlackBerry


Cost of development

$0.0 tools free of charge> $0.0 license fees to some extend


Development support

✔ IDEs✔ Integrated Debugging


Developer’s

perspective




Interpreted Apps

Performance - almost native experience

Platforms ✔ Android✔ iOS✘ WP7✔ BlackBerry






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




Cross Compiling

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



http://mjmobbs.com/?p=262

http://mjmobbs.com/?p=262


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://




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)




Frameworks / Tools



Demo


Cross-Compiled

Language(s) .NET / C#

Platforms ✔ Android✔ iOS✔ WP7✘ BlackBerry


Cost of development

$$ need to buy dev tools


Development support

✔ IDEs✔ Integrated Debugging


Developer’s

perspective




Cross-Compiled

Performance - native experience- native look’n’feel

Platforms ✔ Android✔ iOS✔ WP7✘ BlackBerry






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




Summary


Web App(Java / PHP)

FilesImages


http://

Web Service

http://

Native App


Web App(Java / PHP)

FilesImages


http://

Web Service

http://

Web Browser

Device Backend

Web App(Java / PHP)

FilesImages


http://

Native App

Interpreter

App Script(JavaScript, Lua)

Native APIs

API

http://

Abstraction Layer

APIAPIAPI

Device Backend

Web App(Java / PHP)

FilesImages


http://

Web Browser

App (JavaScript)

FilesImages


(e.g. for caching)

Device Backend

Web App(Java / PHP)

FilesImages


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







Technology

Mobile TechCon sept2012: Cross-Platform Mobile Development