Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Choosing Between Cross Platform of Native Development

0 views

Published on

A brief history on hybrid applications and their transformation from then to now. an overview of cross platform mobile app development, giving examples of Xamarin and Ionic.

Published in: Mobile

Choosing Between Cross Platform of Native Development

  1. 1. Choosing Between Cross Pla1orm or Na4ve App Development Dave Springgay November 26, 2016
  2. 2. Dave Springgay SoAware development manager, user experience architect and scrum master
  3. 3. Agenda •  History of hybrid app development •  Why it’s important today •  Discuss one decision making process •  The elements of a great user experience •  Evaluate one popular app, to see how we could build it
  4. 4. KEEP CALM There are many ways to build an app. Let’s share ideas.
  5. 5. History •  When the iPhone was first released in 2007, it didn’t support 3rd party apps. •  It wasn’t un4l July 2008 that Apple released an SDK. •  The first Facebook app was built using HTML5 – It supported more than 500 million people on 7000 devices •  The first Linked In app was built using mobile- web technology
  6. 6. Hybrid Back Then •  Na4ve apps that hosted a mobile web site •  Mul4 page applica4ons •  Long page load 4mes •  No local storage for data •  No connec4on à no applica4on •  Very li[le integra4on with na4ve features •  Na4ve apps with small web views and simple content
  7. 7. The Times of London •  2012 •  Na4ve app •  Page templates and data were downloaded separately •  Each page was rendered in a web view •  Offline reading •  Performance challenges •  Nega4ve feedback from Apple and Google
  8. 8. The Disrup4on •  In August, 2012, Facebook released their first na4ve iOS app –  “Faster, more reliable and easier to use” •  In April, 2013, Linked In released their na4ve app –  “It’s not a performance issue” –  Their HTML5 app was running out of memory •  In 2015, Flipkart abandoned their web presence –  “If you win in mobile, you win it all”
  9. 9. Since Then •  Mobile first and responsive design –  Design and build apps that work across mobile, tablet and web •  Single page applica4ons –  Download your app code once –  Retrieve your app data using REST calls –  Load views within the page dynamically –  Faster load 4mes •  PhoneGap / Cordova –  First class na4ve wrapper –  JavaScript API’s for na4ve features •  Cross pla1orm mobile development languages
  10. 10. In 2016 •  Flipkart re-launched their mobile web app –  They were losing market share to Amazon –  Search is cri4cal to retail discovery –  Social sharing is cri4cal to growth •  We s4ll need to build applica4ons that work across mobile, tablet and web •  India’s startup community is thriving •  9 out of 10 startups fail (Forbes) –  Test your hypothesis quickly –  Minimize waste
  11. 11. Cross Pla1orm Development Op4ons Na4ve App One app per pla1or A different language on each pla1orm Pla1orm specific system API’s Pla1orm specific UI library Hybrid App One language In a web view Common browser API Common user interface Na4ve if needed HTML5 / Cordova / Ionic Common Language App One cross pla1orm language Shared API for network access and data storage Pla1orm specific UI library Xamarin and Appcelerator Mobile Web App Pure HTML 5 Common browser API No pla1orm API HTML5
  12. 12. Decision Criteria 1.  Development skills, budget and 4me –  Cross pla1orm op4ons are cheaper 2.  User experience –  Pla1orm look and feel –  Performance –  Na4ve op4ons are be[er 3.  Distribu4on and discovery
  13. 13. Development Effort Na$ve App Common Language App Hybrid App Two or more apps A separate code base for each A skilled development team for each pla1orm Highest development costs One code base / mul4ple variants Common core (C# or JS) + pla1orm specific UI 60 – 70% reuse * Moderate development costs One code base One team of web developers, with some mobile knowledge Lowest development costs Can be the basis for a web app * Some4mes the SDK lags behind a pla1orm release
  14. 14. User Experience •  Pla1orm look and feel – Naviga4on, tabs, bu[ons, switches – Swiping, scrolling, pinch and zoom •  Pla1orm integra4on – Camera, device orienta4on, mo4on, loca4on – Push no4fica4ons – In app purchases •  Performance •  Offline behavior
  15. 15. Cross Pla1orm User Experience •  The user goal, the context, and their skills •  Mobile web, mobile, and the desktop •  Applica4on workflow and interac4on •  Design best prac4ces – Mobile first, responsive design, material design •  Visual design – Pla1orm look and feel
  16. 16. Facebook
  17. 17. Facebook
  18. 18. Facebook
  19. 19. Facebook
  20. 20. Linked In
  21. 21. Linked In
  22. 22. Linked In
  23. 23. Linked In
  24. 24. Snapchat
  25. 25. Snapchat
  26. 26. Snapchat
  27. 27. In Other Words •  The cross pla1orm experience is more important than you think •  Pla1orm look and feel is less important than you think
  28. 28. User Experience Na$ve App Common Language App Hybrid App Variable cross pla1orm experience Op4mal pla1orm look and feel Op4mal pla1orm integra4on Variable cross pla1orm experience ? ? Consistent cross pla1orm experience ? ? * Some4mes the SDK lags a pla1orm release
  29. 29. Xamarin
  30. 30. Xamarin Forms •  Ac4vityIndicataor •  Bu[ons •  DatePicker •  Editor (n lines of text) •  Entry (1 line of text) •  Image •  Label •  ListView •  Picker (list) •  ProgressBar •  SearchBar •  Slider •  Stepper •  Switch •  TimePicker
  31. 31. Ionic •  “Build great mobile apps and progressive web apps in a way that feels just like building websites” •  HTML5 and Cordova •  Angular.js SPA framework •  Free and open source •  “Beau4ful design” •  “Obsessed with performance”
  32. 32. Pla1orm look and feel •  Ac4on sheets •  Alerts •  Badges •  Bu[ons •  Cards •  Checkboxes •  DateTime •  Gestures •  Inputs •  Lists •  Menus •  Modals •  Popover •  Slides •  Tabs •  Toolbars Link to Demo
  33. 33. Pla1orm Integra4on •  Ba[ery Status •  Camera •  Contacts •  Device Mo4on (accelerometer) •  Device Orienta4on (compass) •  File •  File Transfer •  Geoloca4on •  In App Purchases •  Maps (Na4ve or JS) •  Media Capture •  Network Informa4on •  No4fica4on dialogs •  Push no4fica4ons •  Social Sharing •  Sqlite Storage •  Status Bar •  Vibra4on
  34. 34. Some Excep4ons •  Deep pla1orm integra4on – Custom keyboards – Home screen ac4ons – 3D Touch on iOS •  Peek and pop – Widgets •  Are there any more?
  35. 35. User Experience Na$ve App Common Language App Hybrid App Variable cross pla1orm experience Op4mal pla1orm look and feel Op4mal pla1orm integra4on Variable cross pla1orm experience Op4mal pla1orm look and feel * Op4mal pla1orm integra4on * Consistent cross pla1orm experience Beau4ful look and feel * Broad pla1orm integra4on There are excep4ons where na4ve code is needed * Some4mes the SDK lags behind a pla1orm release
  36. 36. Performance •  Poor performance à poor experience •  Factors that affect performance – Load 4me – Network 4me (spinner) – Render 4me – Interac4ve response (feel) •  Scroll, flick, swipe, jank – Data processing
  37. 37. Nureva Span
  38. 38. Data Processing •  Heavy data processing is risky in a hybrid applica4on •  Camera filters •  Graphic manipula4on •  Graphically intensive games •  Are there any more?
  39. 39. Performance Na$ve App Common Language App Hybrid App Fast load 4mes Fast rendering Fast interac4on Raw horsepower Bad design à bad experience The same as a na4ve app Bad design à bad experience Good design à good experience Store code locally Load views dynamically Do UI work on the main thread Do network opera4ons na4vely on a background thread
  40. 40. Distribu4on and Discovery •  It should be easy to discover an app or service •  It should be easy to launch an app – Install – Shortcut •  As a developer, I wish it was easier to update my app
  41. 41. Distribu4on and Discovery Na$ve App Common Language App Hybrid App In the app store Easy to find, install and launch You have to upload a new app every 4me you release Apple will review it The same as a na4ve app In the app store Easy to find, install and launch You only have to upload the app once Push changes to your app directly from the Ionic server Can be the basis for a web app
  42. 42. Summary Na$ve App Common Language App Hybrid App Easy to find, install and launch Op4mal pla1orm look and feel Op4mal pla1orm integra4on Op4mal performance Higher development costs Almost the same as a na4ve app Moderate development costs Easy to find, install and launch Beau4ful look and feel Broad pla1orm integra4on There are some excep4ons Lowest development costs Rapid release
  43. 43. Decision Making Process 1.  If you have a mul4-million dollar budget, a large team of experienced na4ve developers, and a billion dollar revenue stream, build a na4ve app 2.  If 4me or money are a concern to you, consider another approach 3.  If you think it’s possible to build a great experience for your app using HTML5, Cordova and Ionic, build a hybrid app 4.  If you release your app on a weekly basis, build a hybrid app 5.  Otherwise, build a common language app
  44. 44. Can You Build a Great Hybrid Facebook App? Scenario Hybrid Implementa$on Install app Install from store Sign up Angular view + OAuth2 Setup contacts Contacts plugin Download feed data H[p Get Display feed data Angular view Expand photo Angular view Play inline video Angular view Share status, photos and videos Camera plugin + H[p Post Edit and filter photos Performance concerns Push no4fica4ons Push no4fica4ons plugin Change seungs Use Ionic styles + H[p Get / Put Update app Ionic.Deploy
  45. 45. Thank you Linked In: davespringgay

×