1. Introduction to Mobile Web
and Best Practices
Bryan Hughes, Ph.D.
Software Engineer
Appcelerator
bhughes@appcelerator.com
1

2. 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

3. Mobile Web
Platform Overview

4. 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

5. 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

6. 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

7. User Interface
• Controls are
composites of
other controls
• Custom layout Ti.UI.View
algorithm
Ti.UI.View
Ti.UI.ImageView
Ti.UI.Label
7

8. File System
• Pluggable
provider
architecture
• Fully support
directories,
binary files, etc.
8

9. 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

10. Mobile Web
Specific Features

11. 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

12. Splash Screen
Created with
HTML+CSS
12

13. Icons
• Favicon
• Apple Web
Applications
13

14. 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

15. Hybrid Apps
100% Written
in Titanium
15

16. Debugging
Debug like any
other web page
16

17. Instrumentation
• Layout
• Networking
• System Load
Time
17

18. 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

19. Limitations and
Common Pitfalls

20. Local Storage
• Several APIs use
Local Storage
• 5mb Local
Storage per
domain
• Exception thrown
when exceeded
20

21. 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

22. WebViews
• Cross domain
WebViews are
limited
• Sites with X-
Frame-Options
set will not load
22

23. Code Limitations
• Variables and
functions cannot
use DOM names
• Titanium objects
contain many
“hidden” fields
23

24. 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

25. 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

26. Miscellany
• Unsupported APIs
– Database
– Contacts
– AudioPlayer
– Sockets
• Facebook Site URL must be set
• Everything must be loaded over
the network!
26

27. 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

28. Optimizing for
Mobile Web

29. Security
• Everything in the
app is public
information
• Don‟t trust the
client application
• Don‟t put private
keys in code
29

30. 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

31. 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

32. 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

33. Bryan Hughes, Ph.D.
bhughes@appcelerator.com
33