0% found this document useful (0 votes)
50 views36 pages

Native, Web or Hybrid Mobile App Development?: Worklight Webinar Series

Download as ppsx, pdf, or txt
Download as ppsx, pdf, or txt
Download as ppsx, pdf, or txt
You are on page 1/ 36

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

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>

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


Software Source Code Resources (e.g. images)

Application Source Code

SDK Tools
Compiler, Linker Executable (Binary) Packager

Distributable Package

App Stores

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

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

BlackBerry Native App Development


Software Source Code Java Resources (e.g. images)

Application Source Code

SDK Tools
Compiler, Linker Executable (Binary) Packager

BlackBerry Java Plug-in for Eclipse .cod

Distributable Package

App Stores

Windows Phone Native App Development


Software Source Code C#, VB.NET, etc. Resources (e.g. images)

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

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 More

High-Level APIs

GUI Toolkit

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

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 Web App (HTML, CSS, JS) Calls, Data Audio
Touch Screen, Keyboard WiFi GSM Network Microphone Speaker Camera Vibration Accelerometer, Compass GPS Storage

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

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 Calls, Data Audio

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

HTML, CSS, JS
HTML API calls
Rendering Engine API Calls

OS-Specific APIs

Audio

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 Whats Right For You


Native 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

Existing in-house native skills


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 www.worklight.com Industry Whitepapers Technology Reports Expert Webinars Developer Zone Self-Guided Tutorials Technical Resources Location

dev.worklight.com

36

You might also like