native, web or hybrid mobile app development?

Native, Web or Hybrid Mobile App Development?

Presented by:

Gurpreet SinghAssistant Professor

Department of School of Computing and EngineeringGalgotias University

Agenda

IntroductionUnderstanding the different approaches• Native apps• Web apps and HTML5• Hybrid apps

The business contextQ&A

2

Introduction

3

Native AppsNative Apps Web AppsWeb Apps Hybrid AppsHybrid Apps

101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011

101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011

<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem accusantium doTotam rem aperiam eaque</p></body></html>

<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem accusantium doTotam rem aperiam eaque</p></body></html>

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

6

SDK Tools

Application Source CodeApplication Source Code

Resources(e.g. images)


Software Source Code


Compiler, LinkerCompiler, Linker Executable(Binary)

Executable(Binary) PackagerPackager

Distributable Package


App Stores

iOS – Native App Development

7

SDK Tools






Executable(Binary)




App Stores

XcodeXcode

Objective-C, C++, C

Objective-C, C++, C

.app.app

Compiler, LinkerCompiler, Linker

Android – Native App Development

8

SDK Tools






Executable(Binary)




App Stores

Java(some C, C++)

Java(some C, C++)

.apk.apkAndroid SDKAndroid SDK


BlackBerry – Native App Development

9

SDK Tools






Executable(Binary)




App Stores

BlackBerry Java Plug-in for

Eclipse

BlackBerry Java Plug-in for

Eclipse

JavaJava

.cod.cod


Windows Phone – Native App Development

10

SDK Tools






Executable(Binary)




App Stores

Visual Studio, Windows Phone Developer Tools

Visual Studio, Windows Phone Developer Tools

C#, VB.NET, etc.

C#, VB.NET, etc.

.xap.xap


(Sliverlight)

Native App Development Summary

11

Languages Obj-C, C, C++ Java(Some C, C++) Java C#, VB.NET, etc

Tools Xcode Android SDK BB Java Eclipse Plug-In

Visual Studio, Windows Phone

Dev Tools

Executable Files .app .apk .cod .xap

Application Stores Apple iTunes Android Market BlackBerry App World

Windows Phone Market

Similar approach, but different source code and expertise results in expensive development and maintenance

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

13

Touch Screen,Keyboard


Graphics

Touch Events

GPSGPSLocation

MicrophoneMicrophoneAudio

SpeakerSpeaker

GSM NetworkGSM NetworkCalls, Data

VibrationVibrationActivation

Accelerometer, Compass

Accelerometer, CompassOrientation

CameraCamera

WiFiWiFiData

Images, Video

StorageStorage

Mobile Operating System


Data

Native App

Native App

OS-Specific APIs

Wide Range of Services

Audio

API Calls

Native App – High-level APIs and Built-in Apps

14

File System Network Graphics CameraLow-Level

APIsMulti-tasking More

High-Level APIs

GUI Toolkit

Calendar API

PushAPI

Contacts, Email API

Browser API

More

Audio

Built-in Apps

Downloaded Apps

Apps

APIs

GUI Toolkit Provides App With “Native” Look

15

GUI Toolkit

Apps

APIs

Browser API

Built-in Apps

Downloaded Apps

Mobile Web Apps and Mobile Browsing

16

High-Level APIs

GUI Toolkit

Calendar API

PushAPI

Contacts, Email API

Browser API

More…

Apps

APIs

Rendering Engine(e.g., Webkit)

Built-in Apps

Downloaded Apps

API Calls

API C

alls

Mobile Browsing and Mobile Web Apps

17

Google, Wikipedia: Mobile-optimized

websites

Dremel: Launch using

QR-Codes

2B: Web App

YouTube: Web App

Mobile Browsing vs. Mobile Web Apps

18

Pure Mobile Web Sites• Visited by browsing• Static, navigational UI• Generic look & feel• Server-side rendering• Require connectivity

Pure Mobile Web Apps• Installed and launched• Interactive UI• Touch optimized•Client-side rendering•Available offline

JavaScript Toolkits for Mobile Web App UI

19

SenchaTouch Example: Crossword Puzzles for iPad

jQuery Mobile:Boston Event App

HTML5 and related technologies

20

Static Pages Dynamic Pages Web Applications

w3c.orgwhatwg.org

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…

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

21

Native App – Interaction with Mobile DeviceTouch Screen,

KeyboardTouch Screen,

KeyboardGraphics

Touch Events

GPSGPSLocation


SpeakerSpeaker





CameraCamera

WiFiWiFiData

Images, Video

StorageStorage



Data

Native App

Native App

OS-Specific APIs


Audio

API Calls

22

Web App – Interaction with Mobile DeviceBrowserBrowser Touch Screen,

KeyboardTouch Screen,

Keyboard

GPSGPS

MicrophoneMicrophone

SpeakerSpeaker

GSM NetworkGSM Network

VibrationVibration



CameraCamera

WiFiWiFi

StorageStorage



OS-Specific APIs


WebApp

(HTML, CSS, JS)

WebApp

(HTML, CSS, JS)

Rendering Engine

Rendering Engine

API Calls

Graphics

Touch Events

Location

Audio

Calls, Data

Activation

Orientation

Data

Images, Video

Data

Audio

23

Native vs. Web

24

Native

Device Access Speed App StoreDevelopment

CostApproval Process

Full Very Fast AvailableExpensive Mandatory

Partial Fast NotReasonable NoneWeb

Hybrid

Introducing Hybrid Apps

25

Native

Device Access Speed App Store Approval

Process

Full Very Fast Available Mandatory

Partial Fast Not NoneWeb

Development Cost

Expensive

Reasonable

Partial Fast NotReasonable NoneWeb

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

26

Hybrid App – Interaction with Mobile Device

27

Hybrid AppHybrid App

Web Portionof App

Web Portionof App

Native Portion of App



Graphics

Touch Events

GPSGPSLocation


SpeakerSpeaker





CameraCamera

WiFiWiFiData

Images, Video

StorageStorageData

Audio

Web Portionof App

HTML, CSS, JS

Rendering EngineRendering Engine



OS-Specific APIs


API Calls

API Calls

PhoneGapPhoneGap

API Calls

API Calls

Hybrid App Examples

28

Bank of America

Morgan StanleyLotte Card (Korea)

Facebook

Hybrid App Development

29

SDK Tools

Application Source CodeApplication Source Code Resources(e.g. images)




Compiler, LinkerCompiler, Linker Executable(Binary)




App Stores

Native SourcesNative Sources HTML SourcesHTML Sources Server

FullNative

Speed as Necessary

Reasonable Available Low OverheadHybrid

App Development Comparison

30

Native

Device Access Speed App Store Approval

Process

Full Very Fast Available Mandatory

Development Cost

Expensive

Partial Fast Not AvailableReasonable NoneWeb

No Single Approach Is Right For Everyone

31

Target AudienceTarget Audience App FunctionApp Function

Time and BudgetTime and Budget IT ResourcesIT Resources

An Inherent Tradeoff

32

Native App

Use

r Exp

erie

nce

Cost and Time-to-Market

Hybrid App

Web App

Mobile Web Site

Choosing What’s Right For You

33

• Existing in-house native skills

• Targeting a single mobile OS

• Dominant native functionality

• Rich UI requirements

Native

• Direct distribution to the hands of users

• Pilot application

• Out-of-store visibility via search engines

Web

• Breaking the development tradeoff

• Existing in-house web development skills

• Taking the future into consideration

Hybrid

Future Trends

Future device fragmentation

Accelerated enterprise adoption

New features and complementing technologies

New distribution channels

34

Mobile is Strategic. Not Tactical.

Flexible Development

Secure and Scalable Integration

Ongoing Monitoring and Control

35

native, web or hybrid mobile app development?

Documents

native app interaction

container app

hybrid mobile app development

c javasome c

native mobile apps

popular app store

c javac

different source code