1 / 65

By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap

This comprehensive guide explores the differences between HTML5, Native, and Hybrid mobile app development, highlighting the pros and cons of each approach. Learn about the expectations, types of apps, rich mobile experiences, and more.

lanf
Download Presentation

By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Development: HTML5 Vs Native By Rohit Ghatol Director of Engineering,Synerzip Author- Beginning PhoneGap 1

  2. About me • Director of Engineering – Synerzip • Author- Beginning PhoneGap • Architect of QuickOffice (now Google) Product, Connect • QuickOffice Connect • Document Sync and Authoring Product • Built as a Hybrid Mobile App 2

  3. Mobile Apps 3

  4. Topics • Expectations from Mobile Apps • Types of Mobile Apps • Hybrid Case Study • When to choose which route? • What tools are available? 4

  5. Expectations from Mobile Apps Car Pooling Public Transit Driving a Car = Native App = Hybrid App = HTML5 App 5

  6. Rich Mobile Experience • Levelsof rich mobile experience • Level 0 – No Change for Mobile, web app just accessed via mobile browser • Level 1 – Mobile-Friendly WebApp/Site • Level 2 - HTML5 Mobile App • Level 3 - Hybrid Mobile App • Level 4 - Native Mobile App Today’s Focus 6

  7. Topics • Expectations from Mobile Apps • Types of Mobile Apps • Hybrid App UseCase • When to choose which route? • What tools are available? 7

  8. Types of Mobile Apps • HTML5 • Native • Hybrid (HTML5 + Native) 8

  9. HTML5 Mobile App c 9

  10. HTML5 Overview 10

  11. Twitter - Desktop Vs Mobile 11

  12. HTML5 App Overview 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.com Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 12

  13. HTML5 New Features 13

  14. HTML5 App Capabilities Browser App http://m.twitter.com Some HTML5 Capabilities include: GeoLocation Audio/Video Tag Canvas/SVG Local Storage Web Workers Web Sockets Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 14

  15. HTML5 Pros 15

  16. Pros • Lowest Development Cost • Maximum Reuse • Use Same team • No App Store Distribution hassles • Instant Updates, Clients on latest Version 16

  17. HTML5 Cons 17

  18. HTML5 App Limitations Browser App 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. http://m.twitter.com Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 18

  19. 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

  20. Native App Overview 20

  21. Native App 21

  22. Native App Overview Twitter App Full Access Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 22

  23. Native App Pros 23

  24. 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

  25. Native App Cons 25

  26. 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

  27. Hybrid Mobile App 27

  28. Hybrid Apps Overview HTML5 + Native 28

  29. Hybrid App Overview - 1 Twitter App Embedded Embedded Browser file://index.html Hybrid Apps are Native Apps Full Access Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 29

  30. Hybrid App Overview - 2 Twitter App Embedded Embedded Browser file://index.html Web App is hosted inside Native App Full Access Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 30

  31. Hybrid App Overview - 3 Twitter App Embedded Embedded Browser file://index.html Web App's JavaScript can communicate to Native and back Full Access Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 31

  32. Hybrid App Overview - 4 Twitter App Embedded Embedded Browser file://index.html HTML5 contains BI, Native Component are built as Lego blocks Business Intelligence Custom Components Full Access Mobile OS File System SQL-Lite Network Camera GeoLocation ..... ..... Native APIs Contacts Accelerometer 32

  33. Hybrid Pros 33

  34. 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

  35. Hybrid Cons 35

  36. Cons • Development Environment is Complex • Eclipse, XCode, Visual Studio • 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. Capability - Platform Graph Full Capability Native App Hybrid App Multiple Platform Single Platform HTML5 App Partial Capability 37

  38. Topics • Expectations from Mobile Apps • Types of Mobile Apps • Hybrid App UseCase • When to choose which route? • What tools are available? 38

  39. Hybrid App Case Study 39

  40. 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

  41. QuickOffice Connect - 1 41

  42. QuickOffice Connect - 2 42

  43. QuickOffice Connect - 3 43

  44. QuickOffice Connect - 4 44

  45. QuickOffice Connect - 5 45

  46. QuickOffice Connect - 6 46

  47. QuickOffice Connect Demo Youtube Video – http://www.youtube.com/watch?v=u7Cdu-jusB8 47

  48. Topics • Expectations from Mobile Apps • Types of Mobile Apps • Hybrid App UseCase • When to choose which route? • What tools are available? 48

  49. When to choose which route? • Rich User Experience • Performance • Development Cost • Time to Market • App Store Distribution • Security 49

  50. Factors for Choosing 50

More Related