Native Web or Hybrid Mobile App Development Presented

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 HTML 5 • Hybrid apps The business context Q&A 2

Introduction Native Apps 10110110110 110110101 1011011011 011101111 110110101 101000001101011 3 Web Apps <!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> Hybrid Apps

Examples of Purely-Native Mobile Apps 4

Characteristics of a Purely-Native Mobile App 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 5

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

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

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

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

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

Native App Development Summary Languages Tools Executable Files Application Stores Java (Some C, C++) Java C#, VB. NET, etc Xcode Android SDK BB Java Eclipse Plug-In Visual Studio, Windows Phone Dev Tools . app . apk . cod . xap Apple i. Tunes Android Market Black. Berry App World Windows Phone Market Obj-C, C, C++ Similar approach, but different source code and expertise results in expensive development and maintenance 11

Characteristics of a Purely-Native Mobile App 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 12

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

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

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

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

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

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

Java. Script Toolkits for Mobile Web App UI Sencha. Touch Example: Crossword Puzzles for i. Pad 19 j. Query Mobile: Boston Event App

HTML 5 and related technologies Static Pages Dynamic Pages Web Applications w 3 c. org whatwg. org Main HTML 5/CSS 3 features on mobile Bitmapped and vector graphics, including animations Offline support and data URLs Geolocation Video and Audio Continuous communications with the server More… 20

Characteristics of Mobile Web Apps Entirely written using web technologies • HTML, CSS and Java. Script 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 HTML 5 and device-specific features optimize apps • • 21 Touch-optimized look & feel No address bar Suggestion to pin to home screen Offline availability

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

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

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

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

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, appstore 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 26

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

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

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

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

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

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

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