Codestrong 2012 breakout session introduction to mobile web and best practices

  • View

  • Download

Embed Size (px)

Text of Codestrong 2012 breakout session introduction to mobile web and best practices

  • 1.Introduction to Mobile Web and Best PracticesBryan Hughes, Ph.D. Software 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!});; 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 + // + +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, 33