Native Web or Hybrid Mobile App Development Webinar

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

3

Web Apps

XYZ Voluptatem accusantium do Totam rem aperiam eaque

Hybrid Apps 101101 101011 011110 110110 110110 110110 110110 101101

XY Z Voluptatem

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

Resources (e.g. images)

Application Source Code

Objective-C, C++, C

SDK Tools Compiler, Linker

Executable (Binary)

Packager

Distributable Package

Xcode .app

App Stores

7

Android – Native App Development

Java (some C, C++)

Software Source Code

Resources (e.g. images)

Application Source Code

SDK Tools Compiler, Linker

Executable (Binary)

Packager

Distributable Package

Android SDK .apk

App Stores

8

BlackBerry – Native App Development Software Source Code

Resources (e.g. images)

Application Source Code

Java

SDK Tools Compiler, Linker

Executable (Binary)

Packager

BlackBerry Java Plug-in for Eclipse

Distributable Package .cod

App Stores

9

Windows Phone – Native App Development Software Source Code

Resources (e.g. images)

Application Source Code

C#, VB.NET, etc.

(Sliverlight)

SDK Tools Compiler, Linker

Visual Studio, Windows Phone Developer Tools

Executable (Binary)

Packager

Distributable Package .xap

App Stores

10

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 iTunes

Android Market

BlackBerry 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

WiFi

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

Apps

API Calls 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

Apps

API Calls GUI Toolkit

15

APIs Browser API

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

Apps

APIs High-Level APIs

GUI Toolkit

Calendar API

Contacts, Email API

Rendering Engine (e.g., Webkit)

16

Push API

Browser API

More…

Mobile Browsing and Mobile Web Apps

Google, Wikipedia: Mobile-optimized websites

Dremel: Launch using QR-Codes

2B: Web App

YouTube: 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

19

jQuery Mobile: Boston Event App

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

WiFi

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

WiFi

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

W3C 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

Native

Device Access

Speed

Development Cost

App Store

Approval Process

Full

Very Fast

Expensive

Available

Mandatory

Partial

Fast

Reasonable

Not

None

Hybrid

Web

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 Mobile Operating System

Hybrid App

Graphics Touch Events

Web Portion of App

Data

WiFi

HTML, CSS, JS

Calls, Data

GSM Network

Audio

Rendering Engine

API

Native Portion of App

API Calls

PhoneGap

API Calls

OS-Specific APIs

HTML API calls

Audio

Wide Range of Services

Images, Video

Activation

Microphone Speaker Camera Vibration

Orientation

Accelerometer, Compass

Location

GPS

Data 27

Touch Screen, Keyboard

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

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

36

Location

www.worklight.com

Industry Whitepapers Technology Reports Expert Webinars

dev.worklight.com

Developer Zone Self-Guided Tutorials Technical Resources