Post on 03-Jul-2015
description
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
Cross-Platform Mobile Development
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
Integrating Twitter in Your iOS 5 Apps
@peterfriesepeter.friese@zuehlke.comxing.to/peterhttp://peterfriese.de
Peter Friese
cell phone usage is ubiquitous
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
I want an App
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
Mobile Platforms
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
Mobile Platforms
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
The Native Experience
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
6 Approaches
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
The Web
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
The Web
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @peterfriese)
The Mobile Web
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
320
Frameworks / Toolkits
zurb Foundationhttp://foundation.zurb.com/
Twitter Bootstraphttp://twitter.github.com/bootstrap/
Demo
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Client-Side WebAlso know as HTML 5
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
zepto.js iUI.js
joApp
Wink Toolkit
Frameworks / Toolkits
Demo
Demo
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Hybrid Apps
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Adobe Flash Builder
Hybrid App
Demo
DemoRequest Interception
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Interpreted Apps
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Frameworks / Toolkits
Demo
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Cross Compiling
Image found at http://mjmobbs.com/?p=262
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @peterfriese)
Frameworks / Tools
Demo
(c) 2012 Peter Friese, Zühlke Engineering (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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 (peter@peterfriese.de / @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.
@peterfriesepeter.friese@zuehlke.comhttp://www.zuehlke.com
Want to learn more? Get in touch - I’m available for consulting:
http://slidesha.re/xS4QGb