1 / 35

Native, Web or Hybrid Mobile App Development?

Native, Web or Hybrid Mobile App Development?. Presented by: Gurpreet Singh Assistant Professor Department of School of Computing and Engineering Galgotias University. Agenda. Introduction Understanding the different approaches Native apps Web apps and HTML5 Hybrid apps

ondrea
Download Presentation

Native, Web or Hybrid Mobile App Development?

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. Native, Web or Hybrid Mobile App Development? Presented by: Gurpreet Singh Assistant Professor Department of School of Computing and Engineering Galgotias University

  2. Agenda • Introduction • Understanding the different approaches • Native apps • Web apps and HTML5 • Hybrid apps • The business context • Q&A

  3. Introduction Native Apps Web Apps Hybrid Apps 101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011 <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - > <head><title>XYZ</title> </head> <body> <p> Voluptatem accusantium do Totam rem aperiam eaque </p> </body> </html> 101101101011011110110110110110110110110110101101 <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - > <head><title>XYZ</title> </head> <body> <p> Voluptatem </p> </body> </html>

  4. Examples of Purely-Native Mobile Apps

  5. Characteristics of a Purely-Native Mobile App binary • A binary “executable image”, that is explicitly downloaded and stored on the file system of the mobile device • Distributed through the popular app store or marketplace of the device, or via an enterprise distribution mechanism • Executed directly by the operating system • Launched from the home screen • Does not require another “container app” to run it • Makes explicit use of operating-system APIs Distributed

  6. Native App Development Application Source Code Software Source Code Resources (e.g. images) SDK Tools Compiler, Linker Packager Executable (Binary) Distributable Package App Stores

  7. iOS – Native App Development Application Source Code Software Source Code Resources (e.g. images) Objective-C, C++, C SDK Tools Compiler, Linker Packager Executable (Binary) Xcode Distributable Package .app App Stores iOS

  8. Android – Native App Development Application Source Code Software Source Code Resources (e.g. images) Java (some C, C++) SDK Tools Compiler, Linker Packager Executable (Binary) Android SDK Distributable Package .apk App Stores

  9. BlackBerry – Native App Development Application Source Code Software Source Code Resources (e.g. images) Java SDK Tools Compiler, Linker Packager Executable (Binary) BlackBerry Java Plug-in for Eclipse Distributable Package .cod App Stores

  10. Windows Phone – Native App Development Application Source Code Software Source Code Resources (e.g. images) C#, VB.NET, etc. (Sliverlight) SDK Tools Compiler, Linker Packager Executable (Binary) Visual Studio, Windows Phone Developer Tools Distributable Package .xap App Stores

  11. Native App Development Summary • Similar approach, but different source code and expertise results in expensive development and maintenance

  12. Characteristics of a Purely-Native Mobile App • Abinary“executable image”, that is explicitly downloaded andstored on the file system of the mobile device. • Distributed through the popular app store or marketplace of the device, or via an enterprise distribution mechanism. • Executed directly by the operating system • Launched from the home screen • Does not require another “container app” to run it. • Makes explicit use of operating-system APIs Executed directly operating-system APIs

  13. Native App – Interaction with Mobile Device Mobile Operating System Touch Screen, Keyboard Graphics Touch Events Data WiFi Wide Range of Services Calls, Data GSM Network Audio Microphone Native App Speaker Audio API Calls OS-Specific APIs Images, Video Camera Vibration Activation Accelerometer, Compass Orientation Location GPS Data Storage

  14. Native App – High-level APIs and Built-in Apps Downloaded Apps Built-in Apps API Calls Apps APIs API Calls High-Level APIs GUI Toolkit More Calendar API Contacts, Email API PushAPI Browser API API Calls Low-Level APIs File System Network Graphics Camera More Multi-tasking Audio

  15. GUI Toolkit Provides App With “Native” Look Downloaded Apps Built-in Apps API Calls Apps APIs GUI Toolkit Browser API

  16. Mobile Web Apps and Mobile Browsing Downloaded Apps Built-in Apps Apps API Calls API Calls APIs High-Level APIs GUI Toolkit More… Calendar API Contacts, Email API PushAPI Browser API Rendering Engine (e.g., Webkit)

  17. Mobile Browsing and Mobile Web Apps YouTube: Web App Dremel: Launch using QR-Codes Google, Wikipedia: Mobile-optimized websites 2B: Web App

  18. Mobile Browsing vs. Mobile Web Apps … Gray Area … Pure Mobile Web Sites Pure Mobile Web Apps • Visited by browsing • Static, navigational UI • Generic look & feel • Server-side rendering • Require connectivity • Installed and launched • Interactive UI • Touch optimized • Client-side rendering • Available offline

  19. JavaScript Toolkits for Mobile Web App UI SenchaTouch Example: Crossword Puzzles for iPad jQuery Mobile:Boston Event App

  20. HTML5 and related technologies Static Pages Dynamic Pages Web Applications Main HTML5/CSS3 features on mobile • Bitmapped and vector graphics, including animations • Offline support and data URLs • Geolocation • Video and Audio • Continuous communications with the server • More… w3c.org whatwg.org

  21. Characteristics of Mobile Web Apps • Entirely written using web technologies • HTML, CSS and JavaScript • Code is executed by the browser, not by the OS • Various launch mechanisms • Typing URL, clicking hyperlink, scanning QR Code or clicking home-screen shortcut • Installation is optional • Combine cross-platform HTML5 and device-specific features optimize apps • Touch-optimized look & feel • No address bar • Suggestion to pin to home screen • Offline availability

  22. Native App – Interaction with Mobile Device Mobile Operating System Touch Screen, Keyboard Graphics Touch Events Data WiFi Wide Range of Services Calls, Data GSM Network Audio Microphone Native App Speaker Audio API Calls OS-Specific APIs Images, Video Camera Vibration Activation Accelerometer, Compass Orientation Location GPS Data Storage

  23. Web App – Interaction with Mobile Device Mobile Operating System Touch Screen, Keyboard Browser Graphics Touch Events Web App (HTML, CSS, JS) Data WiFi Wide Range of Services Calls, Data GSM Network Audio Microphone Speaker Audio OS-Specific APIs W3C Calls Images, Video Camera Vibration Activation Accelerometer, Compass Orientation Rendering Engine API Calls Location GPS Data Storage

  24. Native vs. Web Device Access Speed Development Cost App Store Approval Process Native Full Very Fast Expensive Available Mandatory Web Partial Fast Reasonable Not None

  25. Introducing Hybrid Apps Device Access Speed Development Cost App Store Approval Process Native Full Very Fast Expensive Available Mandatory Hybrid Web Partial Fast Reasonable Not None Web Partial Fast Reasonable Not None

  26. Characteristics of Hybrid Apps • A Hybrid App is a native app with embedded HTML • It has all the benefits of native apps: full access to APIs, app-store presence, etc. • Selected portions of the app are written using web technologies • The web portions of the app can either be downloaded from the web or packaged within the app

  27. Hybrid App – Interaction with Mobile Device Mobile Operating System Touch Screen, Keyboard Hybrid App Graphics Touch Events Web Portionof App Web Portionof App Data WiFi Wide Range of Services Calls, Data GSM Network HTML, CSS, JS Audio Microphone HTML API calls Speaker Audio OS-Specific APIs API Calls Images, Video API Calls Camera Rendering Engine Vibration Activation API PhoneGap Accelerometer, Compass Orientation Native Portion of App Location API Calls API Calls GPS Data Storage

  28. Hybrid App Examples Bank of America Facebook Morgan Stanley Lotte Card (Korea)

  29. Hybrid App Development Native Sources HTML Sources Server Application Source Code Software Source Code Resources (e.g. images) SDK Tools Compiler, Linker Packager Executable (Binary) Distributable Package App Stores

  30. App Development Comparison Device Access Speed Development Cost App Store Approval Process Native Full Very Fast Expensive Available Mandatory Hybrid Full Native Speed as Necessary Reasonable Available Low Overhead Web Partial Fast Reasonable Not Available None

  31. No Single Approach Is Right For Everyone Target Audience App Function Time and Budget IT Resources

  32. An Inherent Tradeoff Native App Hybrid App User Experience Web App Mobile Web Site Cost and Time-to-Market

  33. Choosing What’s Right For You Native Web Hybrid • Existing in-house native skills • Targeting a single mobile OS • Dominant native functionality • Rich UI requirements • Direct distribution to the hands of users • Pilot application • Out-of-store visibility via search engines • Breaking the development tradeoff • Existing in-house web development skills • Taking the future into consideration

  34. Future Trends • Future device fragmentation • Accelerated enterprise adoption • New features and complementing technologies • New distribution channels

  35. Mobile is Strategic. Not Tactical. • Flexible Development • Secure and Scalable Integration • Ongoing Monitoring and Control

More Related