Great Wide Open 2014 - Day 1 Pratik Patel - TripLingo 2:30 - Developers 2

1. MOBILE
DEVELOPMENT
OPTIONS
!
PRATIK PATEL | CTO | TripLingo
twitter: @prpatel

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

3. WE’ll FOCUS
ON
PRATIK PATEL | CTO

4. MY EXPERIENCE
PRATIK PATEL | CTO

5. overview of the
options
!
!
!
!

6. NATIVE MOBILE
• Must know Objective-C & Java very well
• SDK is closed source, many open-source
libs available
PRATIK PATEL | CTO

7. NATIVE II
• MUST KNOW THE TOOL chain for each
platform
PRATIK PATEL | CTO

8. ANDROID
PRATIK PATEL | CTO

9. XCODE
PRATIK PATEL | CTO

10. NATIVE III
• ABILITY TO CREATE best possible app
• time & effort multiplied by platform
• obviously not cross-platform
PRATIK PATEL | CTO

11. PRATIK PATEL | CTO

12. PHONEGAP
• native wrapper
- bootstraps a webkit browser
!
• open-source as “Apache Cordova”
PRATIK PATEL | CTO

13. PHONEGAP
• provides hooks into native functions
- camera, contacts, accelerometer, etc
PRATIK PATEL | CTO

14. PRATIK PATEL | CTO
http://www.melablog.it/post/11421/phonegap-riceve-il-nulla-osta-di-apple-per-app-store

15. PHONEGAP
• Must use native toolchain to build
phonegap wrapper
PRATIK PATEL | CTO

16. CROSS PLATFORM
PRATIK PATEL | CTO
http://mashable.com/2011/02/22/html-mobile-development/

17. CODING PHONEGAP
• you can develop right in a desktop browser
for most of your app!
PRATIK PATEL | CTO

18. MOBILE WEB LIBS
- jquery mobile
- sencha touch
- jo (joapp.com)
- kendoui
PRATIK PATEL | CTO

19. PRATIK PATEL | CTO
phonegap DIAGRAM
Operating System (iOS/Android)
Phonegap native
wrapper app
Webkit browser
engineYour
code
runs
here

20. PRATIK PATEL | CTO
phonegap on ios

21. APP DEV
PLATFORMS
PRATIK PATEL | CTO

22. APP DEV PLATFORMS
• Xamarin (formerly monotouch) (C#)
• Ansca Corona (LUA)
• Appcelerator TITANIUM (JAVASCRIPT)
• Only TITANIUM is open-source
PRATIK PATEL | CTO

23. APP DEV PLATFORMS
• do _NOT_ generate code
• bridge from LANG <X> to native
• uses native toolchain
PRATIK PATEL | CTO

24. BRIDGE
• VENDOR WRITES HOOKS to native API
• vendor marshalls / unmarshalls calls & data
in both directions
PRATIK PATEL | CTO

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

26. TITANIUM
PRATIK PATEL | CTO

27. TITANIUM
• open source, 100% free
• IDE - titanium studio - based on eclipse
PRATIK PATEL | CTO

28. TITANIUM II
• code in javascript
• again, not a generator
!
PRATIK PATEL | CTO

29. CODE REUSE?
• 100% Of non-UI code is reusable
• 80% of UI code is reusable
• UI code can become more reusable with
experience and patterns!
PRATIK PATEL | CTO

30. TITANIUM == NATIVE
PRATIK PATEL | CTO
• Titanium api calls native objects/methods
• no code generation
• native widgets
• Tons of open-source modules available!

31. PRATIK PATEL | CTO
titanium live coding

32. notice something
common?
!
!
!
!

33. NATIVE
TOOLCHAIN!
PRATIK PATEL | CTO

34. PRATIK PATEL | CTO
you must learn the
native toolchain for
any of the options!

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

36. COMPARING
THE OPTIONS
PRATIK PATEL | CTO

37. NATIVE
• no code reuse
• best possible experience
• games, low-level needs
• cost: $$$$$
PRATIK PATEL | CTO

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

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

40. PRATIK PATEL | CTO

41. PRATIK PATEL | CTO

42. PRATIK PATEL | CTO

43. AU REVOIR!
!
Follow me on twitter: @PRPATEL

44. NATIVE
PRATIK PATEL | CTO

45. IOS
• OBJECTIVE-C language
• dispatch model is very powerful
• NOT low ceremony
PRATIK PATEL | CTO

46. ANDROID
• Java with limitations (Davlik VM)
• open source platform
• tools you know and love (?)
!
PRATIK PATEL | CTO

47. NATIVE II
• developing the ‘same’ app for 2+ platforms
== $$$$
• “LOW LEVEL” programming
PRATIK PATEL | CTO

48. PHONEGAP
PRATIK PATEL | CTO

49. PHONEGAP
• open source, 100% free
• APACHE PROJECT
• large community
• tons of plugins
PRATIK PATEL | CTO

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

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

52. phonegap demo
!
!
!
!

53. APP DEV
PLATFORMS
PRATIK PATEL | CTO

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

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

56. MONOTOUCH
• based on mono
• C#
• $600 for both ios and android
PRATIK PATEL | CTO

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

58. RUBYMOTION
• based on RUBY - but ios only
• fairly new
• $199
• live REPL, other nice features
PRATIK PATEL | CTO

59. TITANIUM
PRATIK PATEL | CTO

60. TITANIUM
• open source, 100% free
• support contract costs $
• extra modules cost $ (ex: storekit)
• IDE - titanium studio - based on eclipse
PRATIK PATEL | CTO

61. TITANIUM II
• code in javascript
• again, not a generator
!
PRATIK PATEL | CTO

62. PLATFORMS
• iOS
• ANDROID
• Mobile web (beta)
• Blackberry 10 coming soon
PRATIK PATEL | CTO

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

64. WIDGETS
• Buttons, Labels, Windows, Views
• Sliders, TextFields, WebViews
• Pickers, Tables
PRATIK PATEL | CTO

65. EVENTS
• ADD / Fire events
• Very much like “web” Javascript dev
PRATIK PATEL | CTO

66. CODE REUSE?
• 100% Of non-UI code is reusable
• 50% of UI code is reusable
• UI code can become more reusable with
experience and patterns!
PRATIK PATEL | CTO

67. TITANIUM == NATIVE
PRATIK PATEL | CTO
• Titanium api calls native objects/methods
• no code generation
• native widgets

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

69. let’s write a
Titanium app

70. Layouts code
var
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

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

72. Custom Controls
var 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

73. HttpClient
var
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

74. Database
var
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

75. Facebook
var
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

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

77. app dev
platforms
PRATIK PATEL | CTO

78. REDUX
• APP dev PLATFORMS: a high level env
• reuse code
• access to native (and specific) API’s
PRATIK PATEL | CTO

79. REDUX II
• performance is near native (95%)
• drawbacks:
- abstraction
- must know app platform + native platform
PRATIK PATEL | CTO

80. choosing
PRATIK PATEL | CTO

81. NATIVE
• no code reuse
• best possible experience
• games, low-level needs
• cost: $$$$$
PRATIK PATEL | CTO

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

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

84. what would you
pick?
!
!
!
!

85. AU REVOIR
PRATIK PATEL
@PRPATEL
PRPATEL@TRIPLINGO.COM