Best Practices for

Mobile App
Development

NTT DATA Mobile Practice

07/17/2012
NTT DATA Corporation

Copyright 2012 NTT DATA, Inc.

 Agenda

Best practices for designing efficient mobile applications.

Enterprise Integration
Security
Data Formats
Storage
Performance
Networking

Copyright 2012 NTT DATA, Inc. 2

 RESTful Architecture

Mobile apps need to retrieve data by calling web services.

SOAP and WS* protocols are defacto standards for enterprise web services.
Web services are internal to the company and are typically not accessible
outside the firewall.
iOS and Android have no built in support for consuming SOAP web services.
Workarounds to invoke SOAP Web Services are available.
Integrating third party SOAP libraries to the app. This approach is not recommended
due to integration complexity.
SOAP messages can be sent using standard HTTP POST. This can be an interim
approach but is not recommended as a long term solution.
REST (Representational State Transfer) is the defacto architecture style that is
widely employed for mobile initiatives.
REST is built on HTTP/1.1 protocols and consists of clients and servers

Copyright 2012 NTT DATA, Inc. 3

 Guiding Principles of REST
REST Architecture is not just simple JSON/HTTP. Restful architecture does not
specify a messaging format and does not require JSON.
Client-Server
This principle recommends a canonical and vendor neutral interface that
separates the clients from the servers.
This separation (APIs) allows multiple and disparate mobile clients to
communicate with the same origin server.
Stateless
Each request from the mobile client contains the necessary information to
service the request.
This principle, by no way means that the server is stateless. The server can
be state full as long as the state is addressable as a URL. Mobile client will
need to maintain state to communicate with the server.

Cacheability
This principle is based on the premise that the clients can cache resources.
Mobile platforms do not conform to HTTP 1.1 caching semantics
Layered Systems
This principle hides the intermediary servers such as transcoding proxies and
security gateways from the mobile application.

Source : WikiPedia
Copyright 2012 NTT DATA, Inc. 4
 Current State

Web App

LDAP Site Minder ALUI

Web Services

Policy Manager

Service Bus/TIBCO
Copyright 2012 NTT DATA, Inc. 5
 Future State Supporting Apps

Mobile
App

LDAP Site Minder ALUI

Web Services

Policy Manager

Copyright 2012 NTT DATA, Inc. 6

 Future State Supporting Apps (ALT - Recommended)

Mobile
App

Web Services (secured)

LDAP Site Minder ALUI

Policy Manager

Service Bus/TIBCO
Copyright 2012 NTT DATA, Inc. 7
 Web Services Security

No intrinsic security model defined by REST.

Basic Authentication [Least Secure]

The user name and password are sent with every REST request.
The credentials are sent in plain text over HTTP.
HTTPS will provide the communication layer encryption.
The password has to be stored on the client.

Digest Authentication [Secure]

Digest authentication is based on a simple challenge response
paradigm.
The server challenges with a simple nonce value.
A valid response contains a hash of user name, password, nonce
value, HTTP method and URL.
Password is never sent over the wire.
Standard HTTP authentication [RFC 2617] protocol with
substantial implementations on mobile platforms and web servers
Copyright 2012 NTT DATA, Inc. 8
 Web Services Security

Client Certificates [Most Secure]

x.509 certificate (token) will be generated for each user
The identification of the user (user name) will be
embedded within the CN field of the x.509 certificate.
The certificates are downloaded to the mobile device
as part of the registration process or out band through
email or mobile browser.
All incoming REST calls will authenticate the client
certificate against the root certificate
LDAP and WebLogic can be configured to authenticate
via client certificates.
IT does not have the bandwidth or resources to deploy
and manage certificates to a large number of users.
Consider setup of a private CA using standard Open
SSL or Java Key Store.
Copyright 2012 NTT DATA, Inc. 9
 What about OAuth?

Oauth is an open protocol to allow secure API authorization in a

simple and standard method from desktop and web applications.

Version 1.0 (released) This version defines a secure mechanism

to share resources between disparate services (f.ex. sharing
contacts between linkedIn and yahoo). Major drawback with this
specification is that the authentication flows require a callback URL
to open a web page in a browser.

Version 2.0 (draft) This version defines a new authentication and

secure API flow for native and mobile applications. This
specification is not recommended as its a work in progress with
experimental implementations.

No out of the box support on iOS.

Secure but lacks substantial implementations within the enterprise.

Copyright 2012 NTT DATA, Inc. 10

 Coding Guidelines for HTML5

Separate HTML, JavaScript and CSS to different files

Page specific CSS and JavaScript can be inline
Use structured HTML
Incorporate HTML5 semantic elements and attributes
Add DOCTYPE declaration to your HTML files
<!doctype html>
No need for version numbers. Prevent browser quirks
mode
Specify character encoding
<meta charset=utf-8/>
Keep tags lower case. Keep quotation marks.
HTML5 is not XML. No need to self close tags
Be consistent with HTML.
Script/Link tags dont need to specify mime-types

Copyright 2012 NTT DATA, Inc. 11

 HTML5 App Cache

Caching data is important on mobile devices

Mobile browsers do not adhere to the HTTP 1.1 caching
semantics
Cache control headers such as max-age are often
ignored on mobile platforms.
iOS has its own proprietary caching heuristics.
HTML5 has introduced app cache to make web apps
accessible even when the user is not connected to the
Internet
App cache can also be used as a dedicated and reliable
cache to improve performance and page download time
of mobile web sites
Resources specified in the app cache are downloaded
and saved locally on the mobile device.
All components required by the application are listed in a manifest file
Mime Type : text/cache-manifest
Copyright 2012 NTT DATA, Inc. 12
 Cache Manifest (Sample Only)

The cache is referenced from the HTML HEAD tag. Mobile browser requests the
cache manifest every time the user loads the page. Any changes made to the
manifest file will cause the browser to update the application
cache.

Copyright 2012 NTT DATA, Inc. 13

 Usage of HTML5 Mobile Frameworks

HTML5 solutions rely on third party frameworks to offer rich and compelling mobile
experiences.

Understand the differences!

HTML5 Framework Licensing Pros Cons

JQuery Mobile Dual License - 1. Support for tablets, smart phones, e- 1. Community Support
MIT/GPL readers, older browsers and features 2. Fast maturing but not
phones bullet proof yet.
2. Declarative model with standards 3. Evolving tooling
compliant HTML5 support
3. Built on solid JQuery framework
4. Light weight
5. Modular architecture

Sencha Touch Commercial 1. Paid Support and training 1. Steep learning curve -
Software License 2. Optimized for iOS, Android and BB App is written entirely in
(Free) 3. Rich widget set with very good JavaScript.
performance 2. Larger footprint
4. Excellent charting library 3. Vendor lock-in
4. Weak tooling

Copyright 2012 NTT DATA, Inc. 14

 Redirection to mobile site

Its good practice to redirect users who arrive at the desktop site to a
dedicated mobile site. There are two approaches to redirection

Execute client side JavaScript to detect device capabilities

Server side redirection [Recommended]

All browsers send user-agent HTTP header to identify themselves

Detecting the device and mobile browser requires parsing the header
string provided by the browser
Format of the User-Agent strings are not standardized!
Android recommends searching for Mobile string in user agent
header
Apple has standardized on the user-agent string format.
3rd party libraries that reliably sniff user-agent strings are available

Copyright 2012 NTT DATA, Inc. 15

 Performance

Mobile web apps are primarily written in JavaScript. So, its essential
to optimize JavaScript. Understand closures and problems with
circular references and memory leaks.

function sayHello (name)

{
var txt = 'Hello ' + name; return txt;
}

var hello = sayHello(bootcamp); // When is the stack frame deallocated?

Google has published

excellent articles on optimizing web performance. See
http://code.google.com/speed/articles/

Copyright 2012 NTT DATA, Inc. 16

 Performance (Contd)

Pre fetch content to the mobile device.

Content can be downloaded in the background using
periodic timers or in response to user actions such as
panning content.
JQM has built in constructs for pre fetching content

<a href=foo.html" data-prefetch> ... </a>

XMLHTTPRequest is supported on all modern mobile browsers

This is a non blocking operation. Mobile application will not be stalled.
Fetch in bursts. Dont trickle.
JSON is efficient.
Timers may not fire when browser is in background.

Copyright 2012 NTT DATA, Inc. 17

 Memory Consumption

Consider CSS Sprites instead of

downloading each image. If possible
preload images to app cache.
Decoding a 10kb, 320 x 240 pixels image
requires a memory allocation of width x
height x color depth / 8. On an iPad this
is 320 x 240 x 4 = 300kB. On iPad3
retina display this would be doubled to
600kB!
CSS pixels are not device pixels
iPad3 scales the whole ui by 2x
Copyright 2012 NTT DATA, Inc. 18
 Scaling Factor

Mobile Safari assumes 980px

All content is scaled down
You can specify no scale by specifying your own width using meta tag

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>

<!-- Change this if you want to allow scaling -->

<meta name="viewport"
content="width=default-width; user-
scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-
8">

</head>
<body> Hello World! </body>
</html>

Copyright 2012 NTT DATA, Inc. 19

Offline Access
Limitations with the traditional cache

Browser Cache (Disk)

Caching on mobile browsers does not adhere to the HTTP
caching semantics.
Cache control headers such as max-age may be ignored on
some mobile platforms.
iOS only writes resources 15K or less to disk.

WebKit Cache (Memory)

All CSS (parsed, not raw), JS (byte code, ARM instructions, not
raw JS) end-up in memory cache.
HTML including DOM, layout tress are saved in page cache.
Cache is flushed at browser exit

Copyright 2012 NTT DATA, Inc. 20

Web Storage API

Two options for storing data locally on the device

Simple key value pairs
Relational Databases
Simple key value pairs
localStorage for long term storage
sessionStorage
All pages from the same domain share the same local storage
Relational Databases
Thin JavaScript layer on SQLLite
You can create tables, execute SQL queries on the tables etc.
Widely supported (also on BB5.0) but now being deprecated
with indexDB.

None of these mechanisms offer built-in encryption or any

other kind of security.

Copyright 2012 NTT DATA, Inc. 2

21
 Importing large data sets

Application needs to handle large amount of data, which is available

in excel files.

Client does not want to use any services to get data, so data should
be bundled within the application and reside locally on device.

Mobile devices have SQLite database locally.

Biggest challenge was how to pre populate the data to the SQLite
database.

To add this data manually, it requires large number of insert queries

(1000+) and these queries need to be created from excel files.

It requires lot of effort to create the queries manually and chances of

inserting wrong data are very high during the manual process.

Copyright 2012 NTT DATA, Inc. 22

 Importing large data sets

Create SQLite database on the device pragmatically.

Created different tables to hold data for different group of models

Pre populate the data to these tables. To avoid manually creation

of insert queries, create dump files from excel data sheets

Develop JavaScript to read and insert data to database from

dump file

Application gets data from tables using SQL queries and uses it
on different screens.

Copyright 2012 NTT DATA, Inc. 23

 Adaptive Layouts
Consider using CSS Grids. First code default layout and then use CSS Media Queries
to code child layouts

Tablet Layout Smart Phone Layout

Copyright 2012 NTT DATA, Inc. 24

 Adaptive Layout Using Media Queries
LESS Framework 4 is a CSS grid systems for designing adaptive layouts
Tablet Layout : 8 columns at 768 px. For iPads and other tablets
Mobile Layout: 3 columns at 320 px. For iPhones, iPod Touches, and most other modern mobile
devices

/* Tablet Layout: 768px. /* Mobile Layout: 320px.

Gutters: 24px. Gutters: 24px.
Outer margins: 28px. Outer margins: 34px. Inherits
Inherits styles from: Default Layout. styles from: Default Layout.
----------------------------------------------------------------- ---------------------------------------------
cols 1 2 3 4 5 6 7 8 cols 1 2 3
px 68 160 252 344 436 528 620 712 */ px 68 160 252 */

@media only screen and (min-width: 768px) and (max-

width: 991px) { @media only screen and (max-width: 767px) {
body { body {
width: 712px; width: 252px;
padding: 48px 28px 60px; padding: 48px 34px 60px;
}
} }
}

Copyright 2012 NTT DATA, Inc. 25

 HTTP Pipelining

Mechanism to send multiple HTTP requests over a single TCP connection. This is
widely implemented in all HTTP 1.1 compliant mobile browsers and web servers.
This dramatically increases throughput especially in high latency cellular networks.

Copyright: WikiPedia
Copyright 2012 NTT DATA, Inc. 26
 Media Playback with HTTP Live Streaming

You have two options for streaming audio or video to any Apple
device.
HTTP progressive download
HTTP Live Streaming

HTTP progressive download.

No QOS support. Same video stream will be delivered
irrespective of network throughput.
Playback begins immediately after the player has downloaded
enough content.
Slow seek times

iOS 3.0 and above has built in client SW for HTTP Live Streaming.

Stream using standard web servers. No special SW or commercial

licenses are required.

Copyright 2012 NTT DATA, Inc. 27

 How does this work?
Fast startup and seek times.
Right stream for the right device.
64kbps only for cellular
128kbps
256kbps
Adjacent bit rates should be 1.5 to 2 apart
Stream can be encrypted and protected using keys.

Copyright: Apple Inc.

Copyright 2012 NTT DATA, Inc. 28
 Power Consumption

Simple rules for developing power efficient software.

Optimize SW. CPU cycles do consume power.
Dont trickle data. Download in bursts. Design the web service interfaces to be coarse and not
too granular.

Cache the data on the mobile device and dont access the network if not required. Cellular
networks are power hungry!
Only open TCP connection if absolutely required. Keeping a connection open requires
sending a periodic heart beat. Heart beat algorithms can be difficult to implement. One minute
heart beat can potentially drain your battery in 4hours.
Always use HTTP 1.1 GET/POST. Let the HTTP stack manage the tcp connection pool.

Use background timers sparingly. Pause the timers if they are not required. Are you painting
to the screen when the app is in the background?
iOS stops the timers when the application moves to the background.
Android does not pause the app or stop the timers
Dont program to the low level sensor APIs. Use the Core Motion or high level sensor
frameworks.
Both Android and iOS have tools for profiling power consumption.

Copyright 2012 NTT DATA, Inc. 29

Copyright 2012 NTT DATA, Inc. This document contains confidential Company information. Do not disclose it to third parties without permission from the Company.
 Client Certificates Implementation

Copyright 2012 NTT DATA, Inc. 31