Mobile Development Options

371 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
371
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Development Options

  1. 1. MOBILE DEVELOPMENT OPTIONS ! PRATIK PATEL | CTO | TripLingo twitter: @prpatel
  2. 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. 3. WE’ll FOCUS ON PRATIK PATEL | CTO
  4. 4. MY EXPERIENCE PRATIK PATEL | CTO
  5. 5. overview of the options ! ! ! !
  6. 6. NATIVE MOBILE • Must know Objective-C & Java very well • SDK is closed source, many open-source libs available PRATIK PATEL | CTO
  7. 7. NATIVE II • MUST KNOW THE TOOL chain for each platform PRATIK PATEL | CTO
  8. 8. ANDROID PRATIK PATEL | CTO
  9. 9. XCODE PRATIK PATEL | CTO
  10. 10. NATIVE III • ABILITY TO CREATE best possible app • time & effort multiplied by platform • obviously not cross-platform PRATIK PATEL | CTO
  11. 11. PRATIK PATEL | CTO
  12. 12. PHONEGAP • native wrapper - bootstraps a webkit browser ! • open-source as “Apache Cordova” PRATIK PATEL | CTO
  13. 13. PHONEGAP • provides hooks into native functions - camera, contacts, accelerometer, etc PRATIK PATEL | CTO
  14. 14. PRATIK PATEL | CTO http://www.melablog.it/post/11421/phonegap-riceve-il-nulla-osta-di-apple-per-app-store
  15. 15. PHONEGAP • Must use native toolchain to build phonegap wrapper PRATIK PATEL | CTO
  16. 16. CROSS PLATFORM PRATIK PATEL | CTO http://mashable.com/2011/02/22/html-mobile-development/
  17. 17. CODING PHONEGAP • you can develop right in a desktop browser for most of your app! PRATIK PATEL | CTO
  18. 18. MOBILE WEB LIBS - jquery mobile - sencha touch - jo (joapp.com) - kendoui PRATIK PATEL | CTO
  19. 19. PRATIK PATEL | CTO phonegap DIAGRAM Operating System (iOS/Android) Phonegap native wrapper app Webkit browser engineYour code runs here
  20. 20. PRATIK PATEL | CTO phonegap on ios
  21. 21. APP DEV PLATFORMS PRATIK PATEL | CTO
  22. 22. APP DEV PLATFORMS • Xamarin (formerly monotouch) (C#) • Ansca Corona (LUA) • Appcelerator TITANIUM (JAVASCRIPT) • Only TITANIUM is open-source PRATIK PATEL | CTO
  23. 23. APP DEV PLATFORMS • do _NOT_ generate code • bridge from LANG <X> to native • uses native toolchain PRATIK PATEL | CTO
  24. 24. BRIDGE • VENDOR WRITES HOOKS to native API • vendor marshalls / unmarshalls calls & data in both directions PRATIK PATEL | CTO
  25. 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. 26. TITANIUM PRATIK PATEL | CTO
  27. 27. TITANIUM • open source, 100% free • IDE - titanium studio - based on eclipse PRATIK PATEL | CTO
  28. 28. TITANIUM II • code in javascript • again, not a generator ! PRATIK PATEL | CTO
  29. 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. 30. TITANIUM == NATIVE PRATIK PATEL | CTO • Titanium api calls native objects/methods • no code generation • native widgets • Tons of open-source modules available!
  31. 31. PRATIK PATEL | CTO titanium live coding
  32. 32. notice something common? ! ! ! !
  33. 33. NATIVE TOOLCHAIN! PRATIK PATEL | CTO
  34. 34. PRATIK PATEL | CTO you must learn the native toolchain for any of the options!
  35. 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. 36. COMPARING THE OPTIONS PRATIK PATEL | CTO
  37. 37. NATIVE • no code reuse • best possible experience • games, low-level needs • cost: $$$$$ PRATIK PATEL | CTO
  38. 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. 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. 40. PRATIK PATEL | CTO
  41. 41. PRATIK PATEL | CTO
  42. 42. PRATIK PATEL | CTO
  43. 43. AU REVOIR! ! Follow me on twitter: @PRPATEL
  44. 44. NATIVE PRATIK PATEL | CTO
  45. 45. IOS • OBJECTIVE-C language • dispatch model is very powerful • NOT low ceremony PRATIK PATEL | CTO
  46. 46. ANDROID • Java with limitations (Davlik VM) • open source platform • tools you know and love (?) ! PRATIK PATEL | CTO
  47. 47. NATIVE II • developing the ‘same’ app for 2+ platforms == $$$$ • “LOW LEVEL” programming PRATIK PATEL | CTO
  48. 48. PHONEGAP PRATIK PATEL | CTO
  49. 49. PHONEGAP • open source, 100% free • APACHE PROJECT • large community • tons of plugins PRATIK PATEL | CTO
  50. 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. 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. 52. phonegap demo ! ! ! !
  53. 53. APP DEV PLATFORMS PRATIK PATEL | CTO
  54. 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. 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. 56. MONOTOUCH • based on mono • C# • $600 for both ios and android PRATIK PATEL | CTO
  57. 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. 58. RUBYMOTION • based on RUBY - but ios only • fairly new • $199 • live REPL, other nice features PRATIK PATEL | CTO
  59. 59. TITANIUM PRATIK PATEL | CTO
  60. 60. TITANIUM • open source, 100% free • support contract costs $ • extra modules cost $ (ex: storekit) • IDE - titanium studio - based on eclipse PRATIK PATEL | CTO
  61. 61. TITANIUM II • code in javascript • again, not a generator ! PRATIK PATEL | CTO
  62. 62. PLATFORMS • iOS • ANDROID • Mobile web (beta) • Blackberry 10 coming soon PRATIK PATEL | CTO
  63. 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. 64. WIDGETS • Buttons, Labels, Windows, Views • Sliders, TextFields, WebViews • Pickers, Tables PRATIK PATEL | CTO
  65. 65. EVENTS • ADD / Fire events • Very much like “web” Javascript dev PRATIK PATEL | CTO
  66. 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. 67. TITANIUM == NATIVE PRATIK PATEL | CTO • Titanium api calls native objects/methods • no code generation • native widgets
  68. 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. 69. let’s write a Titanium app
  70. 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. 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. 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. 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. 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. 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. 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. 77. app dev platforms PRATIK PATEL | CTO
  78. 78. REDUX • APP dev PLATFORMS: a high level env • reuse code • access to native (and specific) API’s PRATIK PATEL | CTO
  79. 79. REDUX II • performance is near native (95%) • drawbacks: - abstraction - must know app platform + native platform PRATIK PATEL | CTO
  80. 80. choosing PRATIK PATEL | CTO
  81. 81. NATIVE • no code reuse • best possible experience • games, low-level needs • cost: $$$$$ PRATIK PATEL | CTO
  82. 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. 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. 84. what would you pick? ! ! ! !
  85. 85. AU REVOIR PRATIK PATEL @PRPATEL PRPATEL@TRIPLINGO.COM

×