ios Hybrid Mobile Application Development

(1)

iOS Hybrid Mobile Application Development

Westborough MA 01581 USA

Phone: 508 389 7300 Fax: 508 366 9901

iOS Hybrid Mobile Application Development

Oct 06, 2012

Siva RamaKrishna Ravuri

(2)

Technically, how many kinds of Mobile

applications are there?

(3)

Classification of Mobile Application

• Native Application

• Native apps are built for a specific platform with the platform SDK, tools and languages, typically provided by the platform vendor (e.g. xCode/Objective-C for iOS, Eclipse/Java for Blackberry, Eclipse/Java for Android, Visual Studio/C# for Windows Phone)

• Mobile Web Application

• Mobile Web apps are server-side apps, built with any server-side technology (PHP, Node.js,

• Mobile Web apps are server-side apps, built with any server-side technology (PHP, Node.js, ASP.NET) that render HTML that has been styled so that it renders well on a device form factor.

• Hybrid Application

• Hybrid, by definition is anything derived from heterogeneous sources. A hybrid app is one that is written with the same technology used for websites and mobile web implementations, and that is hosted to run inside a native container on a mobile device.

• It is the marriage of web technology and native execution.

(4)

Classification of Mobile Applications (Interaction)

Native Application

Native App

Web Server

Java/PHP

http://…

Only central application logic

Native App

( executes UI and (some) application logic )

Device Backend

Files/

Resources Database

Web Services

(5)

Classification of Mobile Applications (Interaction) contd…

Mobile Web Application

Mobile Web

Web Server

Java/PHP

http://…

Executes UI and Application Logic

Mobile Web

Browser

( Just a Dumb renderer)

Device Backend

Files/

Resources Database

Web Services

(6)

Classification of Mobile Applications (Interaction) contd…

Hybrid Application

Web Server

Java/PHP

http://…

Only central application logic

Native code

Interpreter/

Translator

Device Backend

Files/

Resources Database

Web Services

Executes UI and (some) Application Logic

JavaScript/HTML/CSS Bridge

http://…

(7)

Frameworks for Hybrid Application Development

(8)

Comparison of various kinds of Mobile Applications

Native Mobile Web Hybrid

App Features

Graphics Native APIs HTML, Canvas, SVG HTML, Canvas, SVG

Performance Fast Slow Slow

Native look and feel Native Emulated Emulated

Distribution App Store Web App Store

Device Access

Camera Yes No Yes

Notifications Yes No Yes

Contacts, calendar Yes No Yes

Offline storage Secure file storage Shared SQL Secure file system, shared SQL

Geo Location Yes Yes Yes

Gestures

Swipe Yes Yes Yes

Pinch, spread Yes No Yes

Connectivity Online and offline Mostly online Online and offline Development skills Objective C, Java HTML5, CSS,

Javascript

HTML5, CSS, JavaScript

(9)

Platform Affinity contd…

Access to Device Capabilities

Native Apps

• Single Platform Affinity

• Need Platform SDKs

• Need to write for each platform

• Access to all Native APIs

• Faster graphics

• App Store Distribution

Hybrid Apps

• Cross Platform Affinity

• Coded with Web Technologies

• Run locally on the device, supports offline

• Access to native APIs

• Centralized updates

Platform Affinity

Access to Device Capabilities

Mobile Web Apps

• Cross Platform Affinity

• Coded with Web Technologies

• Run on Web Server

• Viewable on multiple platforms

• Little slower graphics

• Centralized updates

(10)

Programming Language Popularity

(11)

Case study - Effort comparison

Hybrid Approach Native Approach

% effort of Common components out of

total effort 38% 0%

% effort of Native/UI out of total effort 42% 67%

% effort of Web Services out of total

effort 20% 33%

Total Effort 100% 100%

% Relative Effort 1 * Effort of

Hybrid Approach

2.07 * Effort of Hybrid Approach*

(12)

How to develop hybrid Application in iOS?

•

Hybrid apps use a UIWebView control to present the HTML and JavaScript files in a full- screen format, using the native browser rendering engine (not the browser itself).

•

WebKit is the browser rendering engine that is used on iOS, Android, Blackberry and others.

•

That means that, HTML and JavaScript used to construct a hybrid app is

rendered/processed by the WebKit rendering engine (for you Windows 8 IE10 engine rendered/processed by the WebKit rendering engine (for you Windows 8 IE10 engine does for Metro style apps that use WinJS) and displayed to the user in a full-screen web view control, not in a browser.

•

The real secret sauce of hybrid apps is the implementation of an abstraction layer that exposes the device capabilities (read: native APIs) to the hybrid app as a JavaScript API.

This is something not possible with Mobile Web implementations because of the security boundary between the browser and the device APIs

(13)

UIWebView Class

(14)

UIWebView Class – Important APIs/Delegates

(15)

Most important component of Hybrid is Bridge

• Bridge is the communication element to communicate the data/commands

between JavaScript and Native elements to perform various tasks

• Following are the mechanism used for various platforms

•

^iOS : custom URL Scheme

•

^Android ^{: Intents}

•

^Blackberry : Interface

•

^Web : Hyperlinks

(16)

iOS – custom URL Schema

<myAppName>://<myAppName.com>?Paramteres

• http://websitename will open browser app

• tel:<phone number> will open calling application

• mailto:<details> will open mail application

(17)

Hybrid App Using Cordova

(PhoneGap)

(18)

Cordova – How do I use native APIs in JavaScript?

With Cordova (PhoneGap), can use JavaScript to access a

native API, like the camera, using a single API call

regardless of what platform the app will run on.

Under the covers the JavaScript is making an inter-op call

With Cordova (PhoneGap), can use JavaScript to access a

native API, like the camera, using a single API call

regardless of what platform the app will run on.

Under the covers the JavaScript is making an inter-op call

is making an inter-op call (through bridge) that access the native API for the camera.

That means that on an iOS device, this JavaScript is calling into the native layer to

instantiate a UIImagePickerController to take a picture. When developing a hybrid app you don’t need to worry about this level of detail. All you need to do is call the JavaScript function (navigator.camera.getPicture() in this case), and respond to the outcome (the imageData passed to the onCameraSuccess call back function in this case).

That means that on an iOS device, this JavaScript is calling into the native layer to

instantiate a UIImagePickerController to take a picture. When developing a hybrid app you don’t need to worry about this level of detail. All you need to do is call the JavaScript function (navigator.camera.getPicture() in this case), and respond to the outcome (the imageData passed to the onCameraSuccess call back function in this case).

(19)

Cordova – What’s happening inside?

JavaScriptNative code

(20)

Cordova – What’s happening inside? contd…

(21)

Hybrid App Using Virtusa

Proprietary mechanism

(Access framework)

(22)

Virtusa’s ACCESS Framework

HIGH LEVEL ARCHITECTURE

Native Wrapper [e.g., iOS, Android, WebOS]

Native Feature (e.g. Camera Roll)

Native Feature (e.g., Acceler-

ometer)

Native Feature

HTML5 Container [HTML5, JS, CSS3]

Plug-in Architecture

UI Widgets

Transition/

Effects Charting Web-

Workers

Model – View – Controller Framework

Native Integration

Benefits of Virtusa’s ACCESS Framework:

• Rapidly create Web, Mobile, or

“Hybrid Apps”

• Standards compliant

• Easily integrate with existing server-side assets

• Store data locally with Client-side persistence

Virtusa HTML5 Framework

Native Feature (e.g., Printing)

Server-side

SOAP Web Service Socket Server JSON Web Service RESTful Web Service

Widgets Effects Workers

Airwatch Communication

Layer

Exception Handling Persistence

Layer Integration

Session Management Security

Auth/SSO

persistence

• Rapidly deploy code changes without needing App Store approval

• Fast, lightweight framework (less than 30kb compressed)

• Thoroughly tested

• Can scale to tens of thousands of messages per second

(23)

Access - Details of Bridge concept

Highlights

• Enables multiple clients, or multiple widgets within a client to share data with each other

• Consists of three loosely coupled layers:

• The Event Hub routes published messages to subscribed apps or widgets subscribed apps or widgets

• The Communication Layer makes calls to server-side assets, including Web

Services and Streaming data providers

• The Persistence Layer

saves and retrieves data via various storage mechanisms, such as databases or HTML5 LocalStorage

(24)

Access – How do I use native APIs (DB) in JavaScript?

With Access framework, can use JavaScript to access a native API, like Database, using a single API call. Under the covers the JavaScript is making an inter-op call (through bridge) that access the native API to store data.

That means that on an iOS device, this JavaScript is calling into the native layer to instantiate a an SQLite/CoreData/UserDefaults to store the details.

When developing a hybrid app you don’t need to worry about this level of detail. All you need to do is call the JavaScript function and respond to the outcome with a call back.

With Access framework, can use JavaScript to access a native API, like Database, using a single API call. Under the covers the JavaScript is making an inter-op call (through bridge) that access the native API to store data.

That means that on an iOS device, this JavaScript is calling into the native layer to instantiate a an SQLite/CoreData/UserDefaults to store the details.

When developing a hybrid app you don’t need to worry about this level of detail. All you need to do is call the JavaScript function and respond to the outcome with a call back.

(25)

Access – What’s happening inside?

(26)

Access – What’s happening inside? contd…

(27)

Demo

(28)

Various screen sizes –> answer – CSS Media Queries

@media all {

/* Target all screens here */

}

@media screen and (max-device-width: 320px) {

/* Target small screens here */

}

@media screen and (max-device-width: 760px) {

/* Target iPad screen here */

}

(29)

Summary

Hybrid apps are a great option for you if you:

•

Want to target multiple mobile platforms

•

Want to take advantage of device capabilities like geolocation, accelerometer or the camera

•

Want the app to be useable when the device is offline

•

Don’t need the advanced graphics performance that you can only get from a native app.

Constrains

•

Performance: Beware of some CSS/HTML attributes combination can cause

performance and memory consumption. For example, avoid “position:absolute” in scroll or carousel views. Causing lot of memory consumption, don’t know why.

Need to Consider

•

killed by the OS (or the browser), Interrupted, Network dropped

Hybrid apps are built with web technologies which means there are millions of

web developers who already have the base skill set to build mobile apps.

(30)

Q & A

[email protected] [email protected]

(31)

www.virtusa.com