Mobile Development for Web, IOS, Android Native Apps using PhoneGap/HTML5
MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery...
Transcript of MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery...
![Page 1: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/1.jpg)
MOBILE DEVELOPMENT
OPTIONSpratik patel | cto | triplingotwitter: @prpatel
Tuesday, February 4, 14
![Page 2: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/2.jpg)
PRATIK PATEL | CTO
steps to getting rich, 2010 edition1) develop mobile app2) ...3) profit! *
(* get bought by facebook/google/zynga/etc for absurd $)
Tuesday, February 4, 14
![Page 3: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/3.jpg)
TOPICS• android, ios, html5/css3, phonegap, titanium, and jquery mobile
• native, cross-platform-to-native, and mobile web
• deep dive into:- phonegap- titanium
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 4: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/4.jpg)
WE’LL FOCUS ON
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 5: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/5.jpg)
MY EXPERIENCE
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 6: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/6.jpg)
overview of the options
Tuesday, February 4, 14
![Page 7: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/7.jpg)
NATIVE MOBILE• must know objective-c & java very well
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 8: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/8.jpg)
NATIVE II• must know the toolchain for each platform
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 9: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/9.jpg)
ANDROID
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 10: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/10.jpg)
XCODE
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 11: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/11.jpg)
NATIVE III• ability to create best possible app
• time & effort multiplied by platform
• obviously not cross-platform
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 12: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/12.jpg)
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 13: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/13.jpg)
PHONEGAP• native wrapper
- bootstraps a webkit browser
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 14: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/14.jpg)
PHONEGAP• provides hooks into native functions- camera, contacts, accelerometer, etc
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 15: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/15.jpg)
PRATIK PATEL | CTO
http://www.melablog.it/post/11421/phonegap-riceve-il-nulla-osta-di-apple-per-app-store
Tuesday, February 4, 14
![Page 16: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/16.jpg)
PHONEGAP• must use native toolchain to build phonegap wrapper
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 17: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/17.jpg)
CROSS PLATFORM
PRATIK PATEL | CTO
http://mashable.com/2011/02/22/html-mobile-development/
Tuesday, February 4, 14
![Page 18: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/18.jpg)
CODING PHONEGAP• you can develop right in a desktop browser for most of your app!
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 19: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/19.jpg)
MOBILE WEB LIBS- jquery mobile- sencha touch- jo (joapp.com)- kendoui
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 20: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/20.jpg)
PRATIK PATEL | CTO
PHONEGAP DIAGRAMOperating System (iOS/Android)
Phonegap native wrapper app
Webkit browserengineYour
code runs here
Tuesday, February 4, 14
![Page 21: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/21.jpg)
PRATIK PATEL | CTO
PHONEGAP ON IOS
Tuesday, February 4, 14
![Page 22: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/22.jpg)
APP DEV PLATFORMS
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 23: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/23.jpg)
APP DEV PLATFORMS• xamarin (formerly monotouch) (c#)
• ansca corona (lua)
• appcelerator titanium (javascript)
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 24: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/24.jpg)
APP DEV PLATFORMS• do _not_ generate code
• bridge from lang <x> to native
• uses native toolchain
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 25: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/25.jpg)
BRIDGE• vendor writes hooks to native api
• vendor marshalls / unmarshalls calls & data in both directions
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 26: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/26.jpg)
PRATIK PATEL | CTO
how they work
you code here
var win1 = Titanium.UI.createWindow({ url:'main.js', title:'Spice Guide', // backgroundImage:'./images/bg.png', navBarHidden: false, tabBarHidden: true});
app platform
android sdkios sdk
platform provides API
platform bridges to native
Tuesday, February 4, 14
![Page 27: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/27.jpg)
TITANIUM
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 28: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/28.jpg)
TITANIUM• open source, 100% free
• ide - titanium studio - based on eclipse
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 29: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/29.jpg)
TITANIUM II• code in javascript
• again, not a generator
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 30: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/30.jpg)
CODE REUSE?• 100% of non-ui code is reusable
• 80% of ui code is reusable
• ui code can become more reusable withexperience and patterns!
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 31: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/31.jpg)
TITANIUM == NATIVE
PRATIK PATEL | CTO
• titanium api calls native objects/methods
• no code generation
• native widgets
Tuesday, February 4, 14
![Page 32: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/32.jpg)
PRATIK PATEL | CTO
TITANIUM LIVE CODING
Tuesday, February 4, 14
![Page 33: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/33.jpg)
notice something common?
Tuesday, February 4, 14
![Page 34: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/34.jpg)
NATIVE TOOLCHAIN!
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 35: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/35.jpg)
PRATIK PATEL | CTO
you must learn the native toolchain for any of the options!
Tuesday, February 4, 14
![Page 36: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/36.jpg)
NATIVE TOOLCHAIN• you must learn the native toolchain
• spend a few days building a native app for each platform you’re interested in
• the time you invest in this will be paid back 100x
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 37: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/37.jpg)
COMPARING THE OPTIONS
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 38: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/38.jpg)
NATIVE • no code reuse
• best possible experience
• games, low-level needs
• cost: $$$$$
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 39: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/39.jpg)
PHONEGAP • use tech you know (html/js/css)
• rapid development
• user experience is hard to perfect
• bad performance
• nuances of browser tech = black hole of effort
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 40: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/40.jpg)
APP DEV PLATFORMS • can get good code reuse
• performance is very close to native
• must learn a new tool/platform
• abstraction distractions
• rapid development
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 41: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/41.jpg)
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 42: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/42.jpg)
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 43: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/43.jpg)
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 44: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/44.jpg)
Hej då
Follow me on twitter: @PRPATEL
Tuesday, February 4, 14
![Page 45: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/45.jpg)
NATIVE
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 46: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/46.jpg)
IOS• objective-c language
• dispatch model is very powerful
• not low ceremony
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 47: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/47.jpg)
ANDROID• java with limitations (davlik vm)
• open source platform
• tools you know and love (?)
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 48: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/48.jpg)
NATIVE II• developing the ‘same’ app for 2+ platforms == $$$$
• “low level” programming
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 49: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/49.jpg)
PHONEGAP
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 50: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/50.jpg)
PHONEGAP• open source, 100% free
• apache project
• large community
• tons of plugins
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 51: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/51.jpg)
MIND THE GAP II• wraps a web browser in a native project
• your code runs in the browser
• plugins allow more native functions
• provides hooks into native functions- camera, contacts, accelerometer, etc
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 52: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/52.jpg)
MIND THE GAP III• you can develop right in a desktop browser for most of your app!
• can use mobile web libs:- jquery mobile- sencha touch- jo (joapp.com)- kendoui
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 53: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/53.jpg)
phonegap demo
Tuesday, February 4, 14
![Page 54: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/54.jpg)
APP DEV PLATFORMS
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 55: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/55.jpg)
BRIDGE• vendor provides proprietary api on top
• you code to this api
• vendor writes hooks to native api
• vendor marshalls / unmarshalls calls & data in both directions
• again, no code generation!
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 56: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/56.jpg)
PRATIK PATEL | CTO
how they work
you code here
var win1 = Titanium.UI.createWindow({ url:'main.js', title:'Spice Guide', // backgroundImage:'./images/bg.png', navBarHidden: false, tabBarHidden: true});
app platform
android sdkios sdk
platform provides API
platform bridges to native
Tuesday, February 4, 14
![Page 57: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/57.jpg)
MONOTOUCH• based on mono
• c#
• $600 for both ios and android
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 58: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/58.jpg)
ANSCA CORONA• based on lua - a script lang for c
• popular with game devs
• $349 for both ios and android
• less bridging
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 59: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/59.jpg)
RUBYMOTION• based on ruby - but ios only
• fairly new
• $199• live repl, other nice features
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 60: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/60.jpg)
TITANIUM
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 61: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/61.jpg)
TITANIUM• open source, 100% free
• support contract costs $
• extra modules cost $ (ex: storekit)
• ide - titanium studio - based on eclipse
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 62: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/62.jpg)
TITANIUM II• code in javascript
• again, not a generator
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 63: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/63.jpg)
PLATFORMS• ios• android• mobile web (beta)
• blackberry 10 coming soon
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 64: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/64.jpg)
Titanium SDK• javascript to native bridge
• code to titanium api (proprietary)
• write once, deploy to ios + android
• platform specific api’s too!
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 65: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/65.jpg)
WIDGETS• buttons, labels, windows, views
• sliders, textfields, webviews
• pickers, tables
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 66: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/66.jpg)
EVENTS• add / fire events
• very much like “web” javascript dev
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 67: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/67.jpg)
CODE REUSE?• 100% of non-ui code is reusable
• 50% of ui code is reusable
• ui code can become more reusable withexperience and patterns!
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 68: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/68.jpg)
TITANIUM == NATIVE
PRATIK PATEL | CTO
• titanium api calls native objects/methods
• no code generation
• native widgets
Tuesday, February 4, 14
![Page 69: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/69.jpg)
TITANIUM MODULES• titanium is based on modules
• each module represents an api
• bridge from javascript to native runtime
• example modules: networking, database, filesystem, ui, yahoo, media, map, facebook, accelerometer
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 70: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/70.jpg)
let’s write a Titanium app
Tuesday, February 4, 14
![Page 71: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/71.jpg)
layouts codevar view = Ti.UI.createView({ backgroundColor:'transparent', top:0, left:0, width:'100%', height:'100%', layout:'vertical'});// create labels, buttons, text fields
view.add(usernameLabel);view.add(usernameField);view.add(submitButton);
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 72: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/72.jpg)
events code
Ti.App.addEventListener('event_type', function(e) { Ti.API.info('The '+e.type+' event happened');});
Ti.App.fireEvent('click', {datakey: 'value'});
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 73: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/73.jpg)
custom controlsvar buttonView1 = Titanium.UI.createView({ top: 0, left: 0, height: 50, width: 50, borderRadius: 10, backgroundColor: '#cef7ff' });var selection1 = Titanium.UI.createLabel({ text : 'Fish', color : '#f79e18', font : {fontSize : 40}, textAlign: 'center' });buttonView1.add(selection1);
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 74: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/74.jpg)
httpclientvar url = "https://www.google.com";var xhr = Ti.Network.createHTTPClient({ onload: function(e) { Ti.API.debug(this.responseText); alert('success'); }, onerror: function(e) { Ti.API.debug(e.error); alert('error'); }, timeout:5000});xhr.open("GET", url);xhr.send();
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 75: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/75.jpg)
databasevar db = Titanium.Database.open('mydb');
db.execute('CREATE TABLE IF NOT EXISTS DATABASETEST (ID INTEGER, NAME TEXT)');db.execute('DELETE FROM DATABASETEST');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',1,'Name 1');db.execute('UPDATE DATABASETEST SET NAME = ? WHERE ID = ?', updateName, updateId);var rows = db.execute('SELECT * FROM DATABASETEST');
while (rows.isValidRow()){ Titanium.API.info('ID: ' + rows.field(0) + ' NAME: ' + rows.fieldByName('name') + ' COLUMN NAME ' + rows.fieldName(0)); rows.next();}
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 76: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/76.jpg)
facebookvar fbButton = Titanium.Facebook.createLoginButton({ 'style':'wide', 'apikey':'9494e611f2a93b8d7bfcdfa8cefdaf9f', 'sessionProxy':'http://api.appcelerator.net/p/fbconnect/', bottom:10, height:30, width:300});Titanium.Facebook.publishStream("Set your status",null,null,function(r) { Titanium.API.info("received status response = "+JSON.stringify(r)); if (r.success)
{Ti.UI.createAlertDialog({title:'Facebook', message:'Your status was ublished'}).show();
} else {Ti.UI.createAlertDialog({title:'Facebook', message:'Error ' +
r.error}).show(); } });
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 77: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/77.jpg)
animations var t3 = Ti.UI.create2DMatrix(); t3 = t3.rotate(20); t3 = t3.scale(1.5);
var a = Titanium.UI.createAnimation(); a.transform = t3; a.duration = 3000;
var view1 = Titanium.UI.createView({ backgroundColor:'#336699', top:10, left:220, height:50, width:50, anchorPoint:{x:0,y:0}});win.add(view1);topLeft.addEventListener('click', function(){ view1.animate(a);});
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 78: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/78.jpg)
APP DEV PLATFORMS
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 79: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/79.jpg)
REDUX• app dev platforms: a high level env
• reuse code
• access to native (and specific) api’s
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 80: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/80.jpg)
REDUX II• performance is near native (95%)
• drawbacks:- abstraction- must know app platform + native platform
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 81: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/81.jpg)
CHOOSING
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 82: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/82.jpg)
NATIVE • no code reuse
• best possible experience
• games, low-level needs
• cost: $$$$$
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 83: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/83.jpg)
PHONEGAP • use tech you know (html/js/css)
• user experience is hard to perfect
• bad performance
• nuances of browser tech = black hole of effort
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 84: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/84.jpg)
APP DEV PLATFORMS • can get good code reuse
• performance is very close to native
• must learn a new tool/platform
• abstraction distractions
• rapid development
PRATIK PATEL | CTO
Tuesday, February 4, 14
![Page 85: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/85.jpg)
what would you pick?
Tuesday, February 4, 14
![Page 86: MOBILE DEVELOPMENT OPTIONS · TOPICS • android, ios, html5/css3, phonegap, titanium, and jquery mobile • native, cross-platform-to-native, and mobile web • deep dive into: -](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f52b1f53ad58a71d81e8ac4/html5/thumbnails/86.jpg)
AU REVOIRPRATIK PATEL
Tuesday, February 4, 14