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

Introduction

Native AppsNative Apps Web AppsWeb Apps Hybrid AppsHybrid Apps

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>

Examples of Purely-Native Mobile Apps

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

Native App Development

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

SDK Tools

Executable(Binary)

App Stores

XcodeXcode

Objective-C, C++, C

.app.app

Compiler, LinkerCompiler, Linker

Android – Native App Development

SDK Tools

Executable(Binary)

App Stores

Java(some C, C++)

.apk.apkAndroid SDKAndroid SDK

BlackBerry – Native App Development

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

SDK Tools

Executable(Binary)

App Stores

Visual Studio, Windows Phone Developer Tools

C#, VB.NET, etc.

.xap.xap

(Sliverlight)

Native App Development Summary

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

Native App – Interaction with Mobile Device

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

Native App

OS-Specific APIs

Wide Range of Services

API Calls

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

File System Network Graphics CameraLow-Level

APIsMulti-tasking More

High-Level APIs

GUI Toolkit

Calendar API

PushAPI

Contacts, Email API

Browser API

Built-in Apps

Downloaded Apps

GUI Toolkit Provides App With “Native” Look

GUI Toolkit

Browser API

Built-in Apps

Downloaded Apps

Mobile Web Apps and Mobile Browsing

High-Level APIs

GUI Toolkit

Calendar API

PushAPI

Contacts, Email API

Browser API

More…

Rendering Engine(e.g., Webkit)

Built-in Apps

Downloaded Apps

API Calls

Mobile Browsing and Mobile Web Apps

Google, Wikipedia: Mobile-optimized

websites

Dremel: Launch using

QR-Codes

2B: Web App

YouTube: Web App

Mobile Browsing vs. Mobile Web Apps

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

SenchaTouch Example: Crossword Puzzles for iPad

jQuery Mobile:Boston Event App

HTML5 and related technologies

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

Native App – Interaction with Mobile DeviceTouch Screen,

KeyboardTouch Screen,

KeyboardGraphics

Touch Events

GPSGPSLocation

SpeakerSpeaker

CameraCamera

WiFiWiFiData

Images, Video

StorageStorage

Native App

OS-Specific APIs

API Calls

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

API Calls

Graphics

Touch Events

Location

Calls, Data

Activation

Orientation

Images, Video

Native vs. Web

Native

Device Access Speed App StoreDevelopment

CostApproval Process

Full Very Fast AvailableExpensive Mandatory

Partial Fast NotReasonable NoneWeb

Hybrid

Introducing Hybrid Apps

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

Hybrid App – Interaction with Mobile Device

Hybrid AppHybrid App

Web Portionof App

Native Portion of App

Touch Screen,Keyboard

Graphics

Touch Events

GPSGPSLocation

SpeakerSpeaker

CameraCamera

WiFiWiFiData

Images, Video

StorageStorageData

Web Portionof App

HTML, CSS, JS

Rendering EngineRendering Engine

OS-Specific APIs

API Calls

PhoneGapPhoneGap

API Calls

Hybrid App Examples

Bank of America

Morgan StanleyLotte Card (Korea)

Facebook

Hybrid App Development

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

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

Target AudienceTarget Audience App FunctionApp Function

Time and BudgetTime and Budget IT ResourcesIT Resources

An Inherent Tradeoff

Native App

Cost and Time-to-Market

Hybrid App

Web App

Mobile Web Site

Choosing What’s Right For You

• 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

• 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

Mobile is Strategic. Not Tactical.

Flexible Development

Secure and Scalable Integration

Ongoing Monitoring and Control

Native, Web or Hybrid Mobile App Development?

Documents

Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearncon15

Sample Exam - Amazon Web Services€¦ · a) Hybrid app. b) Mobile web app. c) Native app. d) Desktop app. Select ONE option. Question #5 (1 Point) Your team develops an iOS app that

Which App Is Better For My Business - HTML5, Native or Hybrid App?

White paper native, web or hybrid mobile app development

Native App Vs HTML5 Mobile App Vs Hybrid App Development

IBM / worklight - native-web-or-hybrid-mobile-app-development

hybrid app landscape release · 2016-02-04 · JS. Hybrid app properties Native apps Hybridapps Web apps Ease of discovery Through native appstores Search on referrals (Facebook,

React Native - Build Native Mobile App

Hybrid vs. Native app - Ionic Framework with AngularJS

Native vs hybrid approach Mobile App Development

Crossmos Hybrid Mobile Web-apps & Sencha Platform meeting...Hybrid vs Native vs Web Native apps Hybrid apps Web apps Ease of discovery Through native app stores Search on referrals

Mobile Performance - Tizendownload.tizen.org › misc › media › tds2014 › slides › Tizen...TIZEN : A True Hybrid Mobile Platform Hybrid App Mobile Web App Native Mobile App

Native Web or Hybrid Mobile App Development

Hybrid vs Native Mobile App. Decide in 5 minutes!

USERINTERFACE DESIGN & SIMULATION Mobile App Development · •App generators •Hybrid Apps •Native apps ... (including Axure tutorial) * license available from teacher Skill level:

"Native App & Hybrid App, what is at stake?" by Olivier Berni

Native Web Hybrid

Native vs Hybrid App Development

PWA e Hybrid App VS Native

FOWA 2012: Native, HTML5, and Hybrid Mobile App Development: Real-Life Experiences - Eran Zinman