MOBILE DEVELOPMENT OPTIONS PRATIK PATEL CTO TripLingo

Transcription

1 MOBILE DEVELOPMENT OPTIONS 2014! TripLingo

2 TOPICS Android, ios, HTML5/CSS3, Phonegap, Titanium, and jquery Mobile native, cross-platform-to-native, and mobile web deep dive into: - phonegap - titanium

3 WE ll FOCUS ON

4 MY EXPERIENCE

5 overview of the options!!!!

6 NATIVE MOBILE Must know Objective-C & Java very well SDK is closed source, many open-source libs available

7 NATIVE II MUST KNOW THE TOOL chain for each platform

8 ANDROID

9 XCODE

10 NATIVE III ABILITY TO CREATE best possible app time & effort multiplied by platform obviously not cross-platform

11

12 PHONEGAP native wrapper - bootstraps a webkit browser! open-source as Apache Cordova

13 PHONEGAP provides hooks into native functions - camera, contacts, accelerometer, etc

14

15 PHONEGAP Must use native toolchain to build phonegap wrapper

16 CROSS PLATFORM

17 CODING PHONEGAP you can develop right in a desktop browser for most of your app!

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

19 phonegap DIAGRAM Operating System (ios/android) Phonegap native wrapper app Your code Webkit browser engine runs here

20 phonegap on ios

21 APP DEV PLATFORMS

22 APP DEV PLATFORMS Xamarin (formerly monotouch) (C#) Ansca Corona (LUA) Appcelerator TITANIUM (JAVASCRIPT) Only TITANIUM is open-source

23 APP DEV PLATFORMS Some do _NOT_ generate code bridge from LANG <X> to native uses native toolchain

24 BRIDGE VENDOR WRITES HOOKS to native API vendor marshalls / unmarshalls calls & data in both directions

25 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 }); platform provides API app platform platform bridges to native ios sdk android sdk

26 TITANIUM

27 TITANIUM open source, 100% free IDE - titanium studio - based on eclipse

28 TITANIUM II code in javascript again, not a generator!

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!

30 TITANIUM == NATIVE Titanium api calls native objects/methods no code generation native widgets Tons of open-source modules available!

31 titanium live coding

32 notice something common?!!!!

33 NATIVE TOOLCHAIN!

34 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

36 COMPARING THE OPTIONS

37 NATIVE no code reuse best possible experience games, low-level needs cost: $$$$$

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

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

40

41

42

43 AU REVOIR! Follow me on

44 NATIVE

45 IOS OBJECTIVE-C language dispatch model is very powerful NOT low ceremony

46 ANDROID Java with limitations (Davlik VM) open source platform tools you know and love (?)!

47 NATIVE II developing the same app for 2+ platforms == $$$$ LOW LEVEL programming

48 PHONEGAP

49 PHONEGAP open source, 100% free APACHE PROJECT large community tons of plugins

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!

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

52 phonegap demo!!!!

53 APP DEV PLATFORMS

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!

55 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 }); platform provides API app platform platform bridges to native ios sdk android sdk

56 MONOTOUCH based on mono C# $600 for both ios and android

57 ANSCA CORONA based on LUA - a script lang for c popular with game devs $349 for both ios and android less bridging

58 RUBYMOTION based on RUBY - but ios only fairly new $199 live REPL, other nice features

59 TITANIUM

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

61 TITANIUM II code in javascript again, not a generator!

62 PLATFORMS ios ANDROID Mobile web (beta) Blackberry 10 coming soon

63 Titanium SDK Javascript to native bridge Code to Titanium API (proprietary) Write once, deploy to ios + ANdroid platform specific API s too!

64 WIDGETS Buttons, Labels, Windows, Views Sliders, TextFields, WebViews Pickers, Tables

65 EVENTS ADD / Fire events Very much like web Javascript dev

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!

67 TITANIUM == NATIVE 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

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);

71 Events code Ti.App.addEventListener('event_type', function(e) { Ti.API.info('The '+e.type+' event happened'); });! Ti.App.fireEvent('click', {datakey: 'value'});

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);

73 HttpClient var url = " 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();

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(); }

75 Facebook var fbbutton = Titanium.Facebook.createLoginButton({ 'style':'wide', 'apikey':'9494e611f2a93b8d7bfcdfa8cefdaf9f', 'sessionproxy':' 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(); } });

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); });

77 app dev platforms

78 REDUX APP dev PLATFORMS: a high level env reuse code access to native (and specific) API s

79 REDUX II performance is near native (95%) drawbacks: - abstraction - must know app platform + native platform

80 choosing

81 NATIVE no code reuse best possible experience games, low-level needs cost: $$$$$

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

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

84 what would you pick?!!!!

85 AU REVOIR PRATIK