Native, Web or Hybrid Mobile App Development?

WorkLight Webinar Series

Agenda
Introduction Understanding the different approaches
• Native apps • Web apps and HTML5 • Hybrid apps

The business context Q&A

2

Introduction
Native Apps
101101101011011 110110110110110 110110110110101 101101011011011 011011011011011 011101011101111 110110110110101 101000001101011

Web Apps

Hybrid Apps
101101 101011 011110 110110 110110 110110 110110 101101

<!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>

<!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - > <head><title>XY Z</title> </head> <body> <p> Voluptatem </p> </body> </html>

3

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 Resources (e.g. images)

Application Source Code

SDK Tools
Compiler, Linker
Executable (Binary)

Packager

Distributable Package

App Stores

6

iOS – Native App Development
Software Source Code Objective-C, C++, C Resources (e.g. images)

Application Source Code

SDK Tools
Compiler, Linker
Executable (Binary)

Packager

Xcode .app

Distributable Package

App Stores

7

Android – Native App Development
Software Source Code Resources (e.g. images)

Java (some C, C++)

Application Source Code

SDK Tools
Compiler, Linker
Executable (Binary)

Packager

Android SDK .apk

Distributable Package

App Stores

8

BlackBerry – Native App Development
Software Source Code Resources (e.g. images)

Java

Application Source Code

SDK Tools
Compiler, Linker
Executable (Binary)

Packager

BlackBerry Java Plug-in for Eclipse .cod

Distributable Package

App Stores

9

Windows Phone – Native App Development
Software Source Code Resources (e.g. images)

C#, VB.NET, etc.

Application Source Code

(Sliverlight)

SDK Tools
Compiler, Linker
Executable (Binary)

Packager

Visual Studio, Windows Phone Developer Tools

Distributable Package
.xap

App Stores

10

Native App Development Summary

Languages

Obj-C, C, C++

Java (Some C, C++) Android SDK

Java BB Java Eclipse Plug-In .cod BlackBerry App World

C#, VB.NET, etc Visual Studio, Windows Phone Dev Tools .xap Windows Phone Market

Tools

Xcode

Executable Files

.app

.apk

Application Stores

Apple iTunes

Android Market

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
Touch Screen, Keyboard WiFi GSM Network Microphone Speaker Camera Vibration Accelerometer, Compass GPS Storage

Calls, Data
Audio

OS-Specific APIs

Audio

Native App

API Calls

Wide Range of Services

Images, Video

Activation
Orientation Location Data

13

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

API Calls API Calls

Apps

APIs
Calendar API Contacts, Email API API Calls Push API Browser API

High-Level APIs

GUI Toolkit

More

Low-Level APIs
14

File System

Network

Graphics

Camera

Multitasking

Audio

More

GUI Toolkit Provides App With “Native” Look
Downloaded Apps Built-in Apps

API Calls GUI Toolkit

Apps

APIs
Browser API

15

Mobile Web Apps and Mobile Browsing
Downloaded Apps Built-in Apps

Apps

APIs High-Level APIs
GUI Toolkit Calendar API Contacts, Email API Push API Browser API
More…

Rendering Engine (e.g., Webkit)

16

Mobile Browsing and Mobile Web Apps

Google, Wikipedia: Mobile-optimized websites

Dremel: Launch using QR-Codes YouTube: Web App

2B: 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

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

19

HTML5 and related technologies
Static Pages Dynamic Pages Web Applications
w3c.org whatwg.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…
20

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
• • • •
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
Touch Screen, Keyboard WiFi GSM Network Microphone Speaker Camera Vibration Accelerometer, Compass GPS Storage

Calls, Data
Audio

OS-Specific APIs

Audio

Native App

API Calls

Wide Range of Services

Images, Video

Activation
Orientation Location Data

22

Web App – Interaction with Mobile Device
Browser Mobile Operating System
Graphics Touch Events Data
Touch Screen, Keyboard WiFi GSM Network Microphone Speaker Camera Vibration Accelerometer, Compass GPS Storage

Web App
(HTML, CSS, JS)

Calls, Data
Audio

OS-Specific APIs

Audio

W3C Calls

Wide Range of Services

Images, Video

Activation
Orientation

Rendering Engine

API Calls

Location Data

23

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

24

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

25

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
Hybrid App
Web Portion of App

Mobile Operating System

Graphics Touch Events Data

Touch Screen, Keyboard WiFi GSM Network Microphone Speaker Camera Vibration Accelerometer, Compass GPS Storage

HTML, CSS, JS
HTML API calls

Calls, Data
Audio

OS-Specific APIs

Audio

Rendering Engine

API Calls

Wide Range of Services

Images, Video

Activation
Orientation Location Data

API

PhoneGap

Native Portion of App
27

API Calls

Hybrid App Examples
Bank of America

Facebook

Morgan Stanley

Lotte Card (Korea)

28

Hybrid App Development
Native Sources HTML Sources

Server

Software Source Code

Application Source Code

Resources (e.g. images)

SDK Tools
Compiler, Linker Executable (Binary) Packager

Distributable Package

App Stores

29

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

30

No Single Approach Is Right For Everyone

Target Audience

App Function

Time and Budget

IT Resources

31

An Inherent Tradeoff
Native App

Hybrid App
User Experience

Web App

Mobile Web Site

Cost and Time-to-Market
32

Choosing What’s Right For You
Native • Existing in-house native skills Web • Direct distribution to the hands of users • Pilot application • Out-of-store visibility via search engines Hybrid • Breaking the development tradeoff • Existing in-house web development skills • Taking the future into consideration

• Targeting a single mobile OS
• Dominant native functionality • Rich UI requirements

33

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

For More Information
Resource Location

www.worklight.com

Industry Whitepapers Technology Reports Expert Webinars Developer Zone Self-Guided Tutorials Technical Resources

dev.worklight.com

36

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.