Download as PDF, PPTX
Uploaded byCodeOps Technologies LLP
Choosing Between Cross Platform of Native Development
The document discusses the evolution of app development, focusing on the comparison between native and cross-platform/hybrid app approaches. It outlines historical milestones, user experience considerations, and various development options, emphasizing that while native apps offer better performance and integration, hybrid apps are more cost-effective and suitable for quicker iterations. The decision-making process is presented, suggesting that the choice between app types depends on budget, team capabilities, and user experience expectations.
More Related Content
Similar to Choosing Between Cross Platform of Native Development
Choosing Between Cross Platform of Native Development
- 1.
- 2.
- 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.
- 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. 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. 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. 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. 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. 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.
- 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.
- 14.
- 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.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 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. 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. 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. 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.
- 35.
- 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.
- 38. Data Processing • Heavy data processing is risky in a hybrid applica4on • Camera filters • Graphic manipula4on • Graphically intensive games • Are there any more?
- 39.
- 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.
- 42.
- 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. 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.