Native Web or Hybrid Mobile App Development Webinar

(1)

Native, Web or Hybrid Mobile

App Development?

(2)

Agenda

Introduction

Understanding the different approaches

• Native apps

• Web apps and HTML5 • Hybrid apps

The business context

Q&A

(3)

Introduction

Native Apps Web Apps Hybrid Apps

101101101011011 110110110110110 110110110110101 101101011011011 011011011011011 011101011101111 110110110110101 101000001101011 <!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> 101101 101011 011110 110110 110110 110110 110110 101101 <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - > <head><title>XY Z</title> </head> <body> <p> Voluptatem </p> </body> </html>

(4)

(5)

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

binary

(6)

Native App Development

SDK Tools

Application Source Code

Resources (e.g. images) Software Source

Code

Compiler, Linker Executable

(Binary) Packager

Distributable Package

(7)

iOS – Native App Development

SDK Tools

Resources (e.g. images) Software Source Code Executable (Binary) Packager Distributable Package App Stores Xcode Objective-C, C++, C .app Compiler, Linker

(8)

Android – Native App Development

SDK Tools

Resources (e.g. images) Software Source Code Executable (Binary) Packager Distributable Package App Stores Java (some C, C++) .apk Android SDK Compiler, Linker

(9)

BlackBerry – Native App Development

SDK Tools

Resources (e.g. images) Software Source Code Executable (Binary) Packager Distributable Package App Stores BlackBerry Java Plug-in for Eclipse

Java

.cod

(10)

Windows Phone – Native App Development

SDK Tools

Resources (e.g. images) Software Source Code Executable (Binary) Packager Distributable Package App Stores Visual Studio, Windows Phone Developer Tools C#, VB.NET, etc. .xap Compiler, Linker (Sliverlight)

(11)

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

(12)

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 Executed directly

(13)

Native App – Interaction with Mobile Device

Touch Screen, Keyboard Graphics Touch Events GPS Location Microphone Audio Speaker GSM Network Calls, Data Vibration Activation Accelerometer, Compass Orientation Camera WiFi Data Images, Video Mobile Operating System Native App OS -Specif ic API s Wide Range of Services Audio API Calls

(14)

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

Low-Level High-Level APIs GUI Toolkit Calendar API Push API Contacts, Email API Browser API More Built-in Apps Downloaded Apps Apps APIs API Calls API Calls API Calls

(15)

GUI Toolkit Provides App With “Native” Look

GUI Toolkit Apps APIs Browser API API Calls Built-in Apps Downloaded Apps

(16)

Mobile Web Apps and Mobile Browsing

High-Level APIs GUI Toolkit Calendar API Push API Contacts, Email API Browser API More… Apps APIs Rendering Engine (e.g., Webkit) Built-in Apps Downloaded Apps

(17)

Mobile Browsing and Mobile Web Apps

Google, Wikipedia: Mobile-optimized websites Dremel: Launch using

(18)

Mobile Browsing vs. Mobile Web Apps

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

Pure Mobile Web Apps • Installed and launched • Interactive UI

(19)

JavaScript Toolkits for Mobile Web App UI

SenchaTouch Example: Crossword Puzzles for iPad

jQuery Mobile: Boston Event App

(20)

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…

(21)

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

(22)

Native App – Interaction with Mobile Device

Touch Screen, Keyboard Graphics Touch Events GPS Location Microphone Audio Speaker GSM Network Calls, Data Vibration Activation Accelerometer, Compass Orientation Camera WiFi Data Images, Video Mobile Operating System Native App OS -Specif ic API s Wide Range of Services Audio API Calls

(23)

Web App – Interaction with Mobile Device

Browser Touch Screen,_Keyboard

GPS Microphone Speaker GSM Network Vibration Accelerometer, Compass Camera WiFi Mobile Operating System OS -Specif ic API s Wide Range of Services Web App (HTML, CSS, JS) W3C Calls Rendering

Engine API Calls

Graphics Touch Events Location Audio Calls, Data Activation Orientation Data Images, Video Audio

(24)

Native vs. Web

Native

Device

Access Speed App Store

Development Cost

Approval Process

Full Very Fast Expensive Available Mandatory

Partial Fast Reasonable Not None

(25)

Hybrid

Introducing Hybrid Apps

Native

Device

Approval Process

Full Very Fast Available Mandatory

Development Cost

Expensive

Partial Fast Reasonable Not None

(26)

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

(27)

Hybrid App – Interaction with Mobile Device

Hybrid App Web Portion of App Native Portion Touch Screen, Keyboard Graphics Touch Events GPS Location Microphone Audio Speaker GSM Network Calls, Data Vibration Activation Accelerometer, Compass Orientation Camera WiFi Data Images, Video Audio Web Portion of App HTML, CSS, JS HTML API calls Rendering Engine API Mobile Operating System OS -Specif ic API s Wide Range of Services API Calls API Calls PhoneGap API Calls API Calls

(28)

Hybrid App Examples

Bank of America

Morgan Stanley

(29)

Hybrid App Development

SDK Tools

Application Source Code _{(e.g. images)}Resources

Software Source Code

Compiler, Linker Executable

(Binary) Packager

Distributable Package

(30)

Full

Native Speed as Necessary

Reasonable Available Low

Overhead

Hybrid

App Development Comparison

Native

Device

Approval Process

Full Very Fast Available Mandatory

Development Cost

Expensive

Partial Fast Not

Available

Reasonable None

(31)

No Single Approach Is Right For Everyone

Target Audience App Function

(32)

An Inherent Tradeoff

Native App User Experi en ce Hybrid App Web App Mobile Web Site

(33)

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

Web

• Breaking the

development tradeoff • Existing in-house web

development skills • Taking the future into

consideration

(34)

Future Trends

Future device fragmentation

Accelerated enterprise adoption

New features and complementing technologies New distribution channels

(35)

Mobile is Strategic. Not Tactical.

Flexible Development

Secure and Scalable Integration Ongoing Monitoring and Control

(36)

For More Information

Resource Location

www.worklight.com Industry Whitepapers

Technology Reports Expert Webinars

dev.worklight.com Developer Zone

Self-Guided Tutorials Technical Resources