crosspla)orm%app%development%using%open% · crosspla)orm%app%development%using%open%...
TRANSCRIPT
![Page 1: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/1.jpg)
![Page 2: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/2.jpg)
Cross pla)orm app development using open source so4ware
Peter Dickten / Marcus Ross
dcs-fuerth / zahlenhelfer
![Page 3: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/3.jpg)
Cross pla)orm app development
Support for mul3ple pla)orms is essen3al for both enterprise and end users Relevant pla)orms: • Apple iOS • Google Android • RIM Blackberry • MicrosoC Windows Phone 7 (?)
![Page 4: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/4.jpg)
4 strategies to address mul3ple pla)orms
• Na3ve development for every pla)orm
• Cross-‐pla)orm tools
• WebView wrappers
• MEAPs (mobile enterprise applica3on pla)orm)
flexibility
Speed of develop-‐ment
=> M
![Page 5: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/5.jpg)
Strategy 1: Na3ve Development
good (+) maximum flexibility (+) mature development tools (e.g. Xcode) (+) apps have the pla)orm specific look & feel
![Page 6: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/6.jpg)
Strategy 1: Na3ve Development
bad (-‐) which pla)orms should I support? (-‐) high cost for the development of mul3ple clients (no code reuse) (-‐) very few developers with knowledge of more than one pla)orm are available (-‐) adding one more pla)orm is costly
![Page 7: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/7.jpg)
Strategy 1: Na3ve Development
summary / conclusion deep pockets and lots of development 3me needed (even if client development is done in parallel => server side could be a development bo[leneck)
=> no solu3on for our customers (market research and event management)
=> P
![Page 8: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/8.jpg)
Strategy 2: Cross-‐pla)orm tools
What’s that? • Development of a single source code in one language (e.g. JavaScript)
• Cross compiling/transla3on/embedding to several na3ve source codes (e.g. Obj.C/Java)
• Usage of the na3ve controls on every pla)orm
Appcelerator Titanium, Rhomobile Rhodes
![Page 9: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/9.jpg)
Strategy 2: Cross-‐pla)orm tools
good (+) very flexible (+) one source code (with some duplica3on) (+) one language and one toolset for all pla)orms (+) good look & feel
![Page 10: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/10.jpg)
Strategy 2: Cross-‐pla)orm tools
bad (-‐) case dis3nc3on needed for nice pla)orm specific user interfaces (many resolu3ons/aspect ra3os) (-‐) tool limits the number of supported pla)orms (-‐) performance lower than purely na3ve apps (not a good choice for 3d shooter games)
![Page 11: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/11.jpg)
Strategy 2: Cross-‐pla)orm tools
summary / conclusion If the pla)orms supported by the tool match the desired pla)orms and the apps consist of more that graphics this could be a solu3on. Our customers wanted business apps for iOS and Android => good match.
=> M
![Page 12: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/12.jpg)
Strategy 3: Webview wrappers What’s that?
• Development of a pure web applica3on using HTML and JavaScript
• Frameworks could use styling to match the na3ve controls
• Tools like Cordova encapsulate the result in a smartphone app running the web app in the browser of the smartphone
example: jQuery mobile (GUI) / Cordova (Pkg)
![Page 13: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/13.jpg)
Strategy 3: Webview wrappers
good (+) pre[y flexible (+) lots of pla)orms supported (+) one source code (+) one language and one toolset for all pla)orms
![Page 14: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/14.jpg)
Strategy 3: Webview wrappers
bad (-‐) the result doesn’t always feel “right” on all pla)orms (-‐) slower performance, especially with large datasets (-‐) we found very few examples of complex business applica3ons
![Page 15: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/15.jpg)
Strategy 3: Webview wrappers
summary / conclusion Looks like a good solu3on if you need to support many pla)orms and the dataset is limited and the users are not too strict about adherence to the pla)orm standards. Support of Symbian, older Blackberry and WP7 makes this a good alterna3ve.
=> P
![Page 16: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/16.jpg)
Strategy 4: MEAPs Mobile enterprise applica3on pla)orm
What’s that? • Server side infrastructure delivers app logic and data to a generic client app
• Mostly for enterprise internal apps (e.g. support app for sales people)
• Server side components have interface to enterprise soCware (SAP, Siebel, RDBMS…)
Sybase Unwired Pla)orm, Kony, Verivo, Syclo
![Page 17: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/17.jpg)
Strategy 4: MEAPs
good (+) very fast app development configura3on (+) lots of pla)orms supported (+) works nicely with enterprise soCware
![Page 18: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/18.jpg)
Strategy 4: MEAPs
bad (-‐) very limited func3onality (-‐) server side infrastructure very complex and expensive (-‐) client app user interfaces are oCen disgus3ng (-‐) no solu3on for end users (-‐) not open source
![Page 19: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/19.jpg)
Strategy 4: MEAPs
summary / conclusion If you have extremely deep pockets and want to push data from your exis3ng SAP/Siebel/… infrastructure to 10.000 sales people around the world, this could be a solu3on. No match for our use cases.
![Page 20: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/20.jpg)
Summary of solu3ons
• Na3ve development for every pla)orm
• Cross-‐pla4orm tools
• WebView wrappers
• MEAPs (mobile enterprise applica3on pla)orm)
=> M
![Page 21: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/21.jpg)
The evalua3on project
Build a sample app … • connec3ng to a server side applica3on • Reading and crea3ng data • GPS access • Op3onal: push no3fica3on, ads • (…)
![Page 22: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/22.jpg)
We are Germans. This is our chancellor And yes … we drink a lot of alcohol. Not only beer, but also cocktails.
![Page 23: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/23.jpg)
Idea: Mar3niApp (“yelp for mar3nis”)
• User can create reviews of cocktail bars serving mar3ni cocktails
• User can search for reviews based on their loca3on • Lots of ideas for revenue genera3on …
– Happy hour catalogue – Coupons – Ability to buy someone a cocktail through the app
Dear VCs: Please contact us ;-‐)
=> M
![Page 24: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/24.jpg)
Components of the project
• server side: – (Ruby on Rails-‐based) server implemen3ng … – API to read and write reviews
• client side: – Smartphone app
• One created with Appcelerator Titanium • Another created with jQuery Mobile / Apache Cordova
![Page 25: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/25.jpg)
Apache Cordova overview
Development in pure HTML / JavaScript Target pla)orms: – iOS (iPhone, iPad, iPod touch, ...) – Android – Blackberry 5/6/7 – webOS – Symbian – Windows Phone 7
![Page 26: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/26.jpg)
Apache Cordova: concept
Write once, compile every3me – One source (HTML5/CSS3/JS) – Package to na3ve through a WebView – Separate tool chains for each pla)orm (Na3ve SDK of pla)orm)
![Page 27: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/27.jpg)
Apache Cordova API The Cordova SDK delivers a JavaScriptAPI to access smartphone features Events
File Geoloca3on Media No3fica3on Storage +Plugins
Accelerometer Camera Capture Compass Connec3on Contacts Device
![Page 28: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/28.jpg)
Apache Cordova 101
• // load Cordova <script src=“cordova.js"></script>!
• // wait for Cordova to init document.addEventListener("deviceready", onDeviceReady, false);!
![Page 29: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/29.jpg)
Apache Cordova example
function onDeviceReady() {!!alert(‘Name:’+ device.name); !alert(‘Platform:’+device.platform);!
}!
![Page 30: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/30.jpg)
jQueryMobile: concept
-‐ declara3ve UI (HTML5 data-‐a[r.) -‐ target to touch devices -‐ progressive enhancement
(A, B and C grade Browsers)
![Page 31: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/31.jpg)
jQueryMobile 101
• // load jQM <link rel="stylesheet“ href=„jquery.mobile-1.0.1.min.css" />!!<script src=„jquery-1.6.4.min.js">!</script>!!<script src=„jquery.mobile-1.0.1.min.js">!</script>!
![Page 32: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/32.jpg)
jQueryMobile example
• // show a List <div data-‐role="page" id=“home"> <div data-‐role="content">
<ul> <li>Sessions</li> <li>Speaker</li> </ul>
</div> </div>
=> P
![Page 33: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/33.jpg)
Demo 3me!
![Page 34: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/34.jpg)
Appcelerator Titanium overview
Development in pure JavaScript (*), compila3on/embedding to/in na3ve languages (ObjC/Java) Target pla)orms: – iOS (iPhone, iPad, iPod touch, ...) – Android – Mobile Web (HTML5) – beta: Blackberry (*) you can write/use pla)orm-‐specific addons in ObjC/Java
![Page 35: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/35.jpg)
Appcelerator Titanium: concept
Write once, run adapt everywhere – One source code, but case dis3nc3ons for UI:
• If android ... then ... else ... • Rela3ve/percentage posi3oning • JSS (similar to CSS) for each pla)orm/resolu3on
– Separate image folders for each pla)orm/resolu3on
![Page 36: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/36.jpg)
Appcelerator Titanium API The appcelerator SDK delivers a javascript API to access smartphone features like Accelerometer, Analy.cs, No.fica.ons, Contacts, Database, Facebook, Filesystem, Geoloca.on, Gestures, GUI, Locales, Maps, Media, Networking, SeCngs, XML, Yahoo-‐APIs (...) • Some APIs are pla)orm specific • APIs are appstore-‐safe.
![Page 37: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/37.jpg)
Titanium UI example
UI is build completely in code: No HTML/GUI designer (*) var btnLogin = Titanium.UI.createBu[on({ 3tle : 'login', top : 160, leC : 10, right : 10, height : 40}); btnLogin.addEventListener('click', func3on() {
// do something } (*) but there‘s at least one 3rd party tool
![Page 38: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/38.jpg)
Titanium API example
var db= Titanium.Database.open(‘mar3niDB');
DML-‐Kommando: • db.execute( 'INSERT INTO cocktails(beverage) VALUES(?)', 'dry mar3ni');
![Page 39: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/39.jpg)
Demo 3me!
![Page 40: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/40.jpg)
Some extras: • You can extend applica3ons by na3ve modules (wri[en in ObjC / Java)
• a very ac3ve marketplace for 3rd-‐party-‐extensions (“modules”)
• Commercial support/training/cer3fica3on is provided by Appcelerator
• Appcelerator offers cloud-‐based services (e.g. push no3fica3ons) as op3onal services
• Codestrong: Conference in October in SF => M+P
![Page 41: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/41.jpg)
Final Winner?
• Cordova+jQueryMobile – Freedom of HTML5 – many supported pla)orms (6) – JavaScript knowledge not required
• Titanium Mobile – fast & na3ve UI of the target pla)orm – more APIs – commercial support (SLA)
![Page 42: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/42.jpg)
Q&A
![Page 43: Crosspla)orm%app%development%using%open% · Crosspla)orm%app%development%using%open% source%so4ware% % Peter Dickten / Marcus Ross dcs-fuerth / zahlenhelfer](https://reader033.vdocuments.mx/reader033/viewer/2022050500/5f92dbd44c30b7354141456a/html5/thumbnails/43.jpg)
Thank you !
Peter Dickten (@Pe_D)
and
Marcus Ross (@zahlenhelfer)