Codestrong 2012 breakout session introduction to mobile web and best practices


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • At Appcelerator:* Implemented UI for the Mobile Web platform* Titanium Command Line Interface* Lead for the Titanium Code Processor
  • The browser does not control navigation in the app
  • Custom implementation that supports AMD and CommonJS simultaneouslyPrototypal inheritanceDo not try experiment in practice
  • Ti.UI elements are composites of a combination of HTML elements and other Ti.UI elementsTi.UI.View is the simplest, consisting of a single DIVCustom single-pass, polynomial-based layout algorithmAnimations use matrix3d CSS transforms + requestAnimationFrameSupport for multiple animations on a single element, although none of the other platforms support it
  • Default provider uses Local StorageCustom lightweight file system implemented on top of Local StorageCan create custom providers that use SQL on a server, indexdb, etc
  • Resources/mobileweb/splash/splash.html - HTML fragmentsplash.css – splash.html CSS
  • Favicon:Resources/mobileweb/appicon.pngApple web applications: Resources/mobileweb/apple_startup_images
  • Mobile Web:Must be AMD modulesDo not recommend using UI libraries such as jQuery or Sensa Touch due to conflicts
  • Android/iOS app as parent containerMobile Web app as child content
  • WebKit Inspector, Firebug, F12 Tools, etc in Desktop browserWeb Inspector in iOS 6adblogcat and about:debug in Android Browser
  • Logs instrumentation data to the consoleEnabled in tiapp.xml
  • Place the contents of build/mobileweb in the web server’s document rootMinified using uglify-js
  • Filesystem, Ti.App.Properties, analytics, and others share Local StorageSites installed to the home screen, etc typically get unlimited storageStoring images and other binary data quickly eats up available space
  • Access-Control-Allow-Origin is set on the serverDo not want to set to * in production for security reasonsIf using a proxy, need to secure proxy against nefarious agents
  • Many methods do not work and some properties are unavailable if the source is cross domainGoogle, Facebook, Twitter, and others set X-Frame-Options
  • Example DOM names: window, document, event, location, navigator, parent, screen, selfVaries from browser to browserOverwriting hidden fields can break the appExample fields: properties, constants, constructor, _parent, _childrenRecommend not adding fields to Titanium objects, instead create a wrapper classScreenshot is of the global namespace in Chrome
  • Minified code can be easily reverse engineeringMinification is used to decreasing load times
  • First layout pass is our algorithm, second is browser reflowDesktop web can even be slower than native mobile in some cases
  • Facebook apps must have their Site URL set to the web server via
  • Windows Phone 7.5 does not support touch events, so scrolling is not supportedBlackberry 6 supports all the necessary features, but it so slow as to be unusable in most cases
  • Application can be spoofed by malicious actorsScreenshot is of minified source codeCaptured via WebKit InspectorBeautified using
  • Buttons contain 6 elements, but views only contain 1 elementViews receive the same events as buttonsPerformance of gradients vs images is flipped on Mobile Web compared to iOS
  • Natural images such as photographs should be compressed using JPEGStructural images such as graphs and text should be compressed using PNGImage dimensions should be as low as tolerableColor depth should be as low as tolerable
  • InliningSubstantially reduces the number of HTTP requestsLoad time when resource is requested is very fastCaching increases in-app performance at the expense of startup time
  • Too Text HeavyShorten
  • Codestrong 2012 breakout session introduction to mobile web and best practices

    1. 1. Introduction to Mobile Web and Best Practices Bryan Hughes, Ph.D. Software Engineer Appcelerator 1
    2. 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. 3. Mobile WebPlatform Overview
    4. 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. 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. 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! });; 6
    7. 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. 8. File System• Pluggable provider architecture• Fully support directories, binary files, etc. 8
    9. 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. 10. Mobile WebSpecific Features
    11. 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. 12. Splash Screen Created with HTML+CSS 12
    13. 13. Icons• Favicon• Apple Web Applications 13
    14. 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. 15. Hybrid Apps 100% Written in Titanium 15
    16. 16. Debugging Debug like any other web page 16
    17. 17. Instrumentation• Layout• Networking• System Load Time 17
    18. 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. 19. Limitations andCommon Pitfalls
    20. 20. Local Storage• Several APIs use Local Storage• 5mb Local Storage per domain• Exception thrown when exceeded 20
    21. 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 + // + + 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. 22. WebViews• Cross domain WebViews are limited• Sites with X- Frame-Options set will not load 22
    23. 23. Code Limitations• Variables and functions cannot use DOM names• Titanium objects contain many “hidden” fields 23
    24. 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. 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. 26. Miscellany • Unsupported APIs – Database – Contacts – AudioPlayer – Sockets • Facebook Site URL must be set • Everything must be loaded over the network! 26
    27. 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. 28. Optimizing forMobile Web
    29. 29. Security• Everything in the app is public information• Don‟t trust the client application• Don‟t put private keys in code 29
    30. 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. 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. 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. 33. Bryan Hughes, 33