Codestrong 2012 breakout session introduction to mobile web and best practices

Introduction to Mobile Web
and Best Practices
Bryan Hughes, Ph.D.
Software Engineer
Appcelerator

bhughes@appcelerator.com

1

About Me

• Appcelerator Software Engineer in
the JavaScript Engineering group

• Previously developed the HTML 5
platform at Particle Code

• Ph.D. in Electrical Engineering and
Computer Science from Texas
Tech University

2

Titanium Mobile Target

• Provides similar experience to
Android and iOS

• Not intended for integration into
existing web apps/frameworks

• Designed specifically for mobile
browsers and devices

4

Single Page Web App

• Apps are hosted on traditional web
servers

• Users use their device‟ browser to
navigate to the URL of the app

• Apps are a single page only

5

Architecture

• Uses HTML 5 technologies to
implement the Titanium Mobile API

• APIs implemented using
Asynchronous Module Definition

• Everything is require()‟d

var ad = require('Ti/UI/AlertDialog'),
foo = new ad({
title: 'Mobile Web Rules!'
});
foo.show();

6

User Interface

• Controls are
composites of
other controls

• Custom layout Ti.UI.View
algorithm
Ti.UI.View
Ti.UI.ImageView
Ti.UI.Label

7

File System

• Pluggable
provider
architecture

• Fully support
directories,
binary files, etc.

8

Miscellany

Titanium API HTML/CSS API

Ti.Network.HTTPClient XML HTTP Request (XHR)

Ti.Accelerometer devicemotion window event

navigator.geolocation and deviceorientation
Ti.Geolocation
window event

Touch Gestures touchstart/move/end window events

Ti.Media.VideoPlayer <video> HTML tag

9

Tiapp.xml Options
<analytics>
<use-xhr>true, false</use-xhr>
</analytics>
<filesystem>
<backend>Ti/_/Filesystem/Local</backend>
<registry>preload</registry>
</filesystem>
<Instrumentation>true, false</Instrumentation>
<precache>
<image>image path</image>
<include>file path</include>
<require>module id</require>
<locale>locale code</locale>
</precache>
<splash>
<enabled>true, false</enabled>
<inline-css-images>true, false</inline-css-
</splash>
<theme>theme name (default is „default‟)</theme>

11

Splash Screen

Created with
HTML+CSS

12

Icons

• Favicon

• Apple Web
Applications

13

Modules

• CommonJS
– Can only use Titanium APIs

– Compatible with Android and iOS

• MobileWeb
– Can use any browser features

– Will not work on Android and iOS

14

Hybrid Apps

100% Written
in Titanium

15

Debugging

Debug like any
other web page

16

Instrumentation

• Layout

• Networking

• System Load
Time

17

Deploying

production minifies code

function myFunction(parameterOne, parameterTwo) {
• Web server var parameterOnePlusFive = parameterOne + 5;
agnostic var parameterTwoPlusTen = parameterTwo + 10;
}
myFunction(5 + 10, 15 - 20);
• Deployment:
development or
production

function myFunction(a,b){var x=a+5,d=b+10}myFunction(15,-5)

18

Limitations and
Common Pitfalls

Local Storage

• Several APIs use
Local Storage

• 5mb Local
Storage per
domain

• Exception thrown
when exceeded

20

Cross Domain HTTP

if (Ti.Platform.osname === 'mobileweb') {
Ti.Network.httpURLFormatter = function (url) {

• Access-Control- // Create prefix from server’s hostname
var newPrefix =
Allow-Origin location.protocol + '//' + location.host +
HTTP header (location.port ? ':' + location.port : '');

// Make sure URL isn't relative
• Proxy + URL if (url.indexOf(newPrefix) === -1 &&
url.indexOf('://') !== -1) {
formatter url = newPrefix + '/proxy?url=' + url;
console.debug('proxying to ' + url);
}
return url;
}
}

21

WebViews

• Cross domain
WebViews are
limited

• Sites with X-
Frame-Options
set will not load

22

Code Limitations

• Variables and
functions cannot
use DOM names

• Titanium objects
contain many
“hidden” fields

23

Code Minification

function myFunction(parameterOne, parameterTwo) {
var parameterOnePlusFive = parameterOne + 5;
var parameterTwoPlusTen = parameterTwo + 10;
}
• Code minification myFunction(5 + 10, 15 - 20);

is not code
obfuscation

• Code/resources function myFunction(a,b){var x=a+5,d=b+10}myFunction(15,-5)

cannot be
secured in
Mobile Web
function myFunction(a, b) {
var c = a + 5,
d = b + 10;
}
myFunction(15, -5);

24

UI Performance

• Two layout passes per layout

• Browsers are slower than native

• Titanium apps that perform well in
Android/iOS may not perform well
in Mobile Web

25

Miscellany

• Unsupported APIs
– Database

– Contacts

– AudioPlayer

– Sockets

• Facebook Site URL must be set

• Everything must be loaded over
the network!

26

Browser Compatibility

• Recommended
– Mobile Safari 4.2+
– Android 2.2+
– Chrome for Android
– Firefox Mobile for Android
– BlackBerry 7+, Playbook

• Limited Support
– Windows Phone 7.5 (Mango)
– BlackBerry 6 (Bold)
27

Security

• Everything in the
app is public
information

• Don‟t trust the
client application

• Don‟t put private
keys in code

29

Layout Optimizations

• Reduce the number of controls on
screen

• Only use vertical and horizontal
layouts if they are actually needed

• Use basic views whenever
possible

• Use gradients and solid colors
instead of images

30

Image Optimizations

• Compress JPEG: 371 KB
images with the
correct CODEC PNG: 2.3 MB

• Reduce image
dimensions

• Reduce color JPEG: 10.14 KB
depth
PNG: 10.08 KB

31

Pre-caching

• Cache commonly used source
code, images, and text files

• Images are encoded as data URIs

• Cached resources are inlined in
index.html

32

Bryan Hughes, Ph.D.

bhughes@appcelerator.com

33

Codestrong 2012 breakout session introduction to mobile web and best practices

More Related Content

What's hot (20)

Similar to Codestrong 2012 breakout session introduction to mobile web and best practices (20)

More from Axway Appcelerator (20)

Codestrong 2012 breakout session introduction to mobile web and best practices

Editor's Notes