Mobile Development: HTML5 Vs. Native
Download as PPT, PDF0 likes12 views
Specifically, in this webinar we will cover following key topics. Alternative approaches for developing mobile applications – Native, HTML5, and Hybrid Pros and cons of each approach When to go for HTML5 or Hybrid approach and when not to Recommended tools for HTML5 and Hybrid development Read more at - https://www.synerzip.com/webinar/mobile-development-html5-vs-native/
More Related Content
What's hot (6)
Similar to Mobile Development: HTML5 Vs. Native (20)
More from Synerzip (20)
Recently uploaded (20)
Mobile Development: HTML5 Vs. Native
- 1. Mobile Development: HTML5 Vs Native By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap 1
- 2. www.synerzip.com About me • Director of Engineering – Synerzip • Author- Beginning PhoneGap • Architect of QuickOffice (now Google) Product, Connect • QuickOffice Connect o Document Sync and Authoring Product o Built as a Hybrid Mobile App 2
- 4. www.synerzip.com Topics • Types of Mobile Apps • Hybrid Case Study • When to choose which route? • What tools are available? 4
- 5. www.synerzip.com Expectations from Mobile Apps Driving a Car Car Pooling Public Transit 5 = Native App = Hybrid App = HTML5 App
- 6. www.synerzip.com Rich Mobile Experience Levels of rich mobile experience • Level 0 – No Change for Mobile, web app just accessed via mobile browser • Level 1 – Mobile-Friendly Web App/Site • Level 2 - HTML5 Mobile App • Level 3 - Hybrid Mobile App • Level 4 - Native Mobile App Today’s Focus 6
- 7. www.synerzip.com Topics • Expectations from Mobile Apps • Hybrid App UseCase • When to choose which route? • What tools are available? 7
- 8. www.synerzip.com Types of Mobile Apps • HTML5 • Native • Hybrid (HTML5 + Native) 8
- 11. www.synerzip.com Twitter - Desktop Vs Mobile 11
- 12. www.synerzip.com HTML5 Apps run inside a Browser and cannot make use of many things that Mobile OS provides, like File System, SQLLite Database, Network APIs, Camera, Contacts etc. A few APIs are exposed to browser JavaScripts like GeoLocation, very limited local storage, and more. Browser App http://m.twitter.c om Mobile OS File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... HTML5 App Overview 12
- 14. www.synerzip.com Mobile OS Browser App http://m.twitter.c omSome HTML5 Capabilities include: 1. GeoLocation 2. Audio/Video Tag 3. Canvas/SVG 4. Local Storage 5. Web Workers 6. Web Sockets File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... HTML5 App Capabilities 14
- 16. www.synerzip.com Pros • Lowest Development Cost • Maximum Reuse • Use Same team • No App Store Distribution hassles • Instant Updates, Clients on latest Version 16
- 18. www.synerzip.com Mobile OS Browser App http://m.twitter.c om An HTML5 App runs as long as a browser is running. HTML5 Apps start only when a user starts them; no native-like background processing is available. File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... HTML5 App Limitations 18
- 19. www.synerzip.com Cons • User needs to open browser • Loading time is slowest • No notification available for updates • Limited access to Phone Features • App Store Marketing not available • HTML5 Fragmentation • Simulation of Native UX 19
- 22. www.synerzip.com Mobile OS Twitter App Full Access File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... Native App Overview 22
- 24. www.synerzip.com Pros • Prowess of Mobile is available • Ability to build Richest & Fastest Apps • Notifications Available • Offline Storage Available • Background Processing Available • Entire Device Sensor Array Available • App Store/Market Monetization Possible 24
- 26. www.synerzip.com Cons • Highest Development Cost • Dedicated teams for different Platforms • Architecture Reuse Possible but • Design/Code Reuse not Possible • AppStore/Market approval is prerequisite for launch of new features • Fragmentation is also an issue (Android) 26
- 28. www.synerzip.com Hybrid Apps Overview HTML5 + Native 28
- 29. www.synerzip.com Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht mlHybrid Apps are Native Apps File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... Hybrid App Overview - 1 29
- 30. www.synerzip.com Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht mlWeb App is hosted inside Native App File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... Hybrid App Overview - 2 30
- 31. www.synerzip.com Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht mlWeb App's JavaScript can communicate to Native and back File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... Hybrid App Overview - 3 31
- 32. www.synerzip.com Mobile OS Twitter App Full Access Embedded Embedded Browser file://index.ht mlHTML5 contains BI, Native Component are built as Lego blocks File System SQL-Lite Network Camera GeoLocation Contacts Accelerometer Native APIs ..... ..... Business Intelligence Custom Components Hybrid App Overview - 4 32
- 34. www.synerzip.com Pros • Best of Both Worlds • Native App with Embedded Browser • HTML5 in Embedded Browser • Business Logic in HTML 5/Server • Sensor Array available via Native • Any Extensions are Native 34
- 36. www.synerzip.com Cons • Development Environment is Complex o Eclipse, XCode, Visual Studio o CIT Builds and Release cycles • Limited Native Skills are required • Native Skills required for extensions across platforms • Pains from both worlds─ Catching up on new OS and HTML5 Feature sets 36
- 37. www.synerzip.com Partial Capability Single Platform Multiple Platform Full Capability Capability - Platform Graph 37
- 38. www.synerzip.com Topics • Expectations from Mobile Apps • Types of Mobile Apps • When to choose which route? • What tools are available? 38
- 39. www.synerzip.com Hybrid App Case Study 39
- 40. www.synerzip.com QuickOffice Connect • File Sync Service for Mobile/Desktop • Built as Hybrid Mobile App • User Interface in HTML5 • Sync Code is Native • Built using inhouse PhoneGap-like platform 40
- 47. www.synerzip.com QuickOffice Connect Demo Youtube Video – http://www.youtube.com/watch?v=u7Cdu-jusB8 47
- 48. www.synerzip.com Topics • Expectations from Mobile Apps • Types of Mobile Apps • Hybrid App UseCase • What tools are available? 48
- 49. www.synerzip.com When to choose which route? • Rich User Experience • Performance • Development Cost • Time to Market • App Store Distribution • Security 49
- 50. www.synerzip.com Native Hybrid HTML5 Performance Highest High Low Rich UI Highest Moderate Moderate Development Cost Highest High Lower Time to Market Longest Moderate Shortest App Store Engagement Maximum Engagement Maximum Engagement No Engagement Security Highest High Limited Factors for Choosing 50
- 51. www.synerzip.com Topics • Expectations from Mobile Apps • Types of Mobile Apps • Pros and Cons of each Type • When to choose which route? 51
- 52. www.synerzip.com What tools are available? • Native App Wrappers o PhoneGap o Trigger IO (*new) • UI Framework o Backbone o Sencha Touch 2 Backbone JS Flexible Sencha Touch 2 Complete 52
- 53. www.synerzip.com Hybrid Application Structure Native App Wrapper HTML5 UI Framework 53
- 54. www.synerzip.com PhoneGap • Most Mature Native Wrapper Framework • Supports 7 Platforms • Supports building Extension • Backed by Adobe • OpenSource Link - http://phonegap.com/ 54
- 55. www.synerzip.com Trigger.IO • Much like PhoneGap • Claims to be faster than PhoneGap • Claims to better in Build process • OpenSource Link - https://trigger.io/s 55
- 56. www.synerzip.com Backbone JS • Most Flexible JavaScript UI Framework • Works for both Desktop/Mobile UI • Works with many other Javascript frameworks • OpenSource Link - http://backbonejs.org/ 56
- 57. www.synerzip.com Sencha Touch 2 • Richest Mobile UI framework • Complete Framework • Free for Commercial Use • Paid Support available Link - http://www.sencha.com/products/touch 57
- 59. www.synerzip.com Factors Affecting Choice Product Features Kind of Audience Time/Cost to Market Available Team & IP 59
- 60. www.synerzip.com Pros Vs ConsAppRichness&UX Time to Market, Cost, Maintenance HTML5 App Native App Hybrid App 60
- 61. www.synerzip.com Final Comparison • Needs Richest UI • Focuses on Single Platform (Mobile is the main platform) • Can be used to build Authoring tools, Games, Social Networking Apps etc. • Very Concerned with UX (Apple-like Quality) Native HybridHTML 5 • Needs rich Mobile users with minimal cost and effort • App Store Marketing and Monetization are not important • Required as a fallback for social e.g, Twitter still has a mobile web site • Needs Rich UI • Focuses on Multiple Platforms • Can be used to build Enterprise Apps, Travel/News Apps, Sync Clients, etc. • Most of the time will suffice your needs 61
- 63. www.synerzip.com Synerzip in a Nut-shell 1. Software product development partner for small/mid- sized technology companies • Exclusive focus on small/mid-sized technology companies, typically venture-backed companies in growth phase • By definition, all Synerzip work is the IP of its respective clients • Deep experience in full SDLC – design, dev, QA/testing, deployment 2. Dedicated team of high caliber software professionals for each client • Seamlessly extends client’s local team, offering full transparency • Stable teams with very low turn-over • NOT just “staff augmentation”, but provide full mgmt support 3. Actually reduces risk of development/delivery • Experienced team - uses appropriate level of engineering discipline • Practices Agile development – responsive, yet disciplined 4. Reduces cost – dual-shore team, 50% cost advantage 5. Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option 63
- 65. www.synerzip.com Call Us for a Free Consultation! www.synerzip.com Hemant Elhence [email protected] 469.322.0349 Thanks! 65