- 1.Introduction to Mobile Web and Best PracticesBryan Hughes,
Ph.D. Software [email protected] 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 WebPlatform Overview 4.
Titanium Mobile Target Provides similar experience toAndroid and
iOS Not intended for integration intoexisting web apps/frameworks
Designed specifically for mobilebrowsers and devices4 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()dvar ad =
require(Ti/UI/AlertDialog),foo = new ad({title: Mobile Web
Rules!});foo.show(); 6 7. User Interface Controls arecomposites
ofother controls Custom layoutTi.UI.Viewalgorithm Ti.UI.View
Ti.UI.ImageView Ti.UI.Label 7 8. File System
Pluggableproviderarchitecture Fully supportdirectories,binary
files, etc. 8 9. Miscellany Titanium API HTML/CSS API
Ti.Network.HTTPClient XML HTTP Request (XHR)
Ti.Accelerometerdevicemotion window event navigator.geolocation and
deviceorientation Ti.Geolocation window event Touch
Gesturestouchstart/move/end window events Ti.Media.VideoPlayer HTML
tag 9 10. Mobile WebSpecific Features 11. Tiapp.xml Optionstrue,
falseTi/_/Filesystem/Localpreloadtrue, falseimage pathfile
pathmodule idlocale codetrue, falsetrue, falsetheme name (default
is default)11 12. Splash ScreenCreated withHTML+CSS 12 13. Icons
Favicon Apple WebApplications 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
Apps100% Written in Titanium 15 16. Debugging Debug like any other
web page16 17. Instrumentation Layout Networking System LoadTime17
18. Deployingproduction minifies code function
myFunction(parameterOne, parameterTwo) { Web server var
parameterOnePlusFive = parameterOne + 5;agnostic var
parameterTwoPlusTen = parameterTwo + 10; } myFunction(5 + 10, 15 -
20); Deployment:development orproduction function
myFunction(a,b){var x=a+5,d=b+10}myFunction(15,-5)18 19.
Limitations andCommon Pitfalls 20. Local Storage Several APIs
useLocal Storage 5mb LocalStorage perdomain Exception thrownwhen
exceeded 20 21. Cross Domain HTTPif (Ti.Platform.osname ===
mobileweb) {Ti.Network.httpURLFormatter = function (url) {
Access-Control- // Create prefix from servers hostnamevar newPrefix
=Allow-Originlocation.protocol + // + location.host +HTTP header
(location.port ? : + location.port : );// Make sure URL isnt
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 domainWebViews arelimited Sites with
X-Frame-Optionsset will not load22 23. Code Limitations Variables
andfunctions cannotuse DOM names Titanium objectscontain manyhidden
fields 23 24. Code Minificationfunction myFunction(parameterOne,
parameterTwo) {var parameterOnePlusFive = parameterOne + 5;var
parameterTwoPlusTen = parameterTwo + 10;} Code minification
myFunction(5 + 10, 15 - 20);is not codeobfuscation
Code/resourcesfunction myFunction(a,b){var
x=a+5,d=b+10}myFunction(15,-5)cannot besecured inMobile Webfunction
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 forMobile Web 29. Security Everything in theapp is
publicinformation Dont trust theclient application Dont put
privatekeys in code 29 30. Layout Optimizations Reduce the number
of controls onscreen Only use vertical and horizontallayouts if
they are actually needed Use basic views wheneverpossible Use
gradients and solid colorsinstead of images 30 31. Image
Optimizations CompressJPEG: 371 KBimages with thecorrect CODEC PNG:
2.3 MB Reduce imagedimensions Reduce colorJPEG: 10.14 KBdepthPNG:
10.08 KB 31 32. Pre-caching Cache commonly used sourcecode, images,
and text files Images are encoded as data URIs Cached resources are
inlined inindex.html32 33. Bryan Hughes,
[email protected] 33
