html5 application optimizations - Motorola Solutions LaunchPad ...

DEVELOP FASTER FOR MOREDEVICES, SOLUTIONS ANDOPPORTUNITIESFORENTERPRISE

INTRODUCTIONMEBEN KENNEDY• Software Engineer• RhoElementsFOCUSES• HTML5• JavaScript• CSS3• AndroidACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

INTRODUCTIONPURPOSETips, tricks and Techniques to make your web apps:• Faster,• Smaller,• More responsiveFor low powered devicesACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

INTRODUCTIONHTML5 TECHNOLOGIESWe will be using:HTML5 CSS3 JavaScriptMotorolaRhoElementsGoogleChromeACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

INTRODUCTIONLEGENDTECHNOLOGIESThe technologies to which the improvement isapplied{HTTPHTMLJSCSSIMPROVEMENTSSpeedSize{Tips & TricksResponsiveness (Delta)ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

INTRODUCTIONCONTENTSWebView: System WebKit browser orMotorola WebKit browserNative UIcomponents:TabBar,ToolBar etcJavascript,css, htmlRemote/LocalHttp ServerRuby VMRuby code:controllers, models,erb-files, rubyextensionsDatabase:RHOM API,Direct SQLNativeextensionsRhoConnectClientRhoConnect ServerACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

INTRODUCTIONCONTENTSNAVIGATING LOADING USING … LEAVINGAJAXForm SubmittalCSS AnimationUser InteractionDOM Manipulationonload EventInitial StylingResource LoadingDOM LoadingHTTP ResponseHTTP RequestDNSRedirectsACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

NAVIGATING…

NAVIGATINGINTRO & CONTENTSThe internet isS L O W …thereforeUSE IT AS LITTLE AS POSSIBLEACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

NAVIGATINGINTRO & CONTENTS• Local vs Remote Pages• Redirects• Server speed• Server LocationACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

NAVIGATINGLOCAL VS REMOTE PAGESLOCAL PAGESHTTPHTMLBENEFITS• No network latency• Always available• ConsistentperformanceDRAWBACKS• No dynamic data*• Cant update pages**• Markup/code stored ondeviceJSCSS* AJAX could be used to update data (see later)* RhoElements FileTransfer module could be used to update pagesACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIPEXAMPLE >

NAVIGATINGREDIRECTSHTTP REDIRECT:• HTTP Response code: 3xx• Signifies that the resource is at a different location• Location in response bodyHTTPHTMLJSCSS1 Redirect = 2 extra http messagesSo “Be direct, don’t redirect”ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIPEXAMPLE >

NAVIGATINGSERVER LOCATIONSCENARIO

(Earth’s circumference ÷ 2) ÷ c= transmissiontime(40000km ÷ 2) ÷ c =20000km ÷ 30000000ms -1 = 66ms

NAVIGATINGSERVER LOCATIONThe fastest Trans globe Request:• 66ms request + 66ms response = 130ms (2 sig. fig.)DOES NOT INCLUDE:• Other media (copper cable etc)• Server Latency• Router/Switch Latency• Satellite Distance/Latency• Network Topography• Proxies/GatewaysHTTPHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

NAVIGATINGSERVER SPEEDHTTPGood speed =• Good server hardware/software• Good code• Good connectionHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADING

LOADING…INTRO & CONTENTSNAVIGATINGLOADINGUSING…LEAVING• Reducing resource size• Externalising scripts/styles• Removing unused scripts/styles• Minification• Reducing HTTP requests• Image Sprites• Merging styles/scripts• Reducing time to page start• Page layout best practices• CachingACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGEXTERNALISING STYLES/SCRIPTSHTTPexternalisation /ikˈstərnlīzāSHən/ n. to keep CSSand JavaScript in files separate from the parentHTML fileAdvantagesDisadvantages• Files can be cachedseparately• HTML files are smaller• Scripts can be reused inother pages• More HTTP requests!• (Can be) slower to loadHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGREMOVING UNUSED STYLES/SCRIPTSRemove:• Unused JavaScript scripts, functions & variables• Unused stylesheets & stylesHTTPHTMLJSCSSCommon sense:• Less data to download• Less HTTP requests• Less to parseACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADING…MINIFICATIONvar globalTransaction;functiondoTheTransactionWhenOnline(transaction){}var transactionTime = transaction + 5;globalTransaction = globalTransaction +theTransactionData;MINIFYHTTPHTMLJSCSS200 bytes28 bytesvar a;function b(c){a+=c+5;}ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGIMAGE SPRITESThe Problem• Each image requires an HTTP request• Browsers have a limited max number of connectionsHTTPHTMLJSCSSThe Solution• Combine images into one file• Define images using x/y offsets and height/width inCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIPEXAMPLE >

LOADINGMERGING STYLES/SCRIPTSHTTP.js.js.css.css+ = 7 HTTPRequestsHTMLJS.js.js.cssCSS.js+ = 2 HTTP.cssRequestsACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGPAGE LAYOUT BEST PRACTICESPut the css in the head• Allows progressive page loads• Looks like page loads fasterPut the Javascript at the bottom• Allows parallel downloads• Alternative: “defer” HTML5 attribute• *Doesn’t work with “document.write” scriptsHTTPHTMLJSCSSDefine Image sizes• Layout won’t change during page loadACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGCACHINGBROWSER CACHE• “Controlled” by thebrowser/proxy• Uses HTTP headers• Expires• Cache-Control• Last-Modified• If-Modified-Since• Caches pages andresources• Invalidated with nonidempotentrequestOFFLINE APPLICATIONS• Controlled by the app• Uses “Cache Manifest”• (At best) One HTTPrequest per page• Caches pages andresources• Defines fallbacks• HTML5 featureHTTPHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGOFFLINE APPLICATIONSCache ManifestCACHE MANIFESTCACHE:index.htmlscript.jsstyles.cssHTTPHTMLJSCSSFALLBACK:/ offline.htmlNETWORK:twitterFeed.php# version 21ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LOADINGOFFLINE APPLICATIONSHTML FILE:HTTPHTMLJSCSSQUIRKS:• The first time an update is available, the previousversion will be shown.• The page must be forced to update by checking thewindow.applicationcache.status property and updatingthe page via JavaScriptACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

USING

USINGINTRODUCTION & CONTENTSNAVIGATING LOADING USING … LEAVINGIMPROVING THE USER EXPERIENCE• Selecting CSS• Animations: CSS ☺, JavaScript ☹ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

USINGSELECTING CSSHTTPHTMLANIMATIONSTRANSITIONSBORDER-RADIUSGRADIENTSBOX-SHADOWTRANSFORMSTEXT-SHADOWOPACITYJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP27 th SEPTEMBER 2012PAGE 31

USINGANIMATION: CSS ☺, JAVASCRIPT ☹JAVASCRIPT ANIMATION:• Does exactly what it istold• Interpreted at runtime• Styles are recalculated oneach eventCSS ANIMATION:• Does what is best• Can be native• Styles are pre-calculatedHTTPHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

USINGANIMATION: CSS ☺, JAVASCRIPT ☹JAVASCRIPTvar cycle = 1;function darkenAll() {var divs =document.getElementById('container').children;HTTPHTMLJSCSS}for(var i = 0; i < divs.length; i++) {divs[i].style.opacity = 0.05 * cycle;}if(++cycle < 20) {setTimeout(darkenAll, 50);}ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

USINGANIMATION: CSS ☺, JAVASCRIPT ☹CSSsection#container div{background-color: black;opacity: 0;transition: opacity 2s;}HTTPHTMLJSCSSsection#container.dark div { opacity: 1; }JAVASCRIPTfunction darkenAll() {document.getElementById('container').className = ‘dark’;}ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIPEXAMPLE >

LEAVING

USINGINTRODUCTION & CONTENTSNAVIGATING LOADING USING … LEAVINGLEAVING? DON’T DO IT!GETTING NEW DATA• AJAX• Dom manipulation tipsACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LEAVINGAJAXAJAX = Asychronous Javascript AndXML• Fetches new data from servers• Reduces page loads• Increases interactivity• Plain old HTTP requests• Useful for prefetchingHTTPHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LEAVINGAJAXvar xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState==4 &&xmlhttp.status==200){document.getElementById("myDiv").innerHTML =xmlhttp.responseText;}}xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();HTTPHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LEAVINGAJAXSECURITY ISSUES• By default, AJAX calls can only be from the samedomain• Security aspect of HTTP• Stops remote pages taking files off your computerHTTPHTMLJSCSSCROSS ORIGIN RESOURCE SHARING (CORS)• Web server settings• Adds HTTP Response headers• Whitelist of domainsACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LEAVINGDOM MANIPULATION TIPSDOM = Document Object ModelDom manipulations are expensivefunction fillSection(section, dataSet){for(var i = 0; i < dataSet.length; i++){section.innerHTML += "" +dataSet[i] + "";}}HTTPHTMLJSCSSACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LEAVINGDOM MANIPULATION TIPSDOM = Document Object ModelDom manipulations are expensivefunction fillSection(section, dataSet){var htmlText = "";for(var i = 0; i < dataSet.length; i++){htmlText =+ "" +dataSet[i] + "";}section.innerHTML = htmlText;}HTTPHTMLJSCSS~ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

LEAVINGDOM MANIPULATION TIPSDOM = Document Object ModelDom manipulations are expensivefunction fillSection(section, dataSet){for(var i = 0; i < dataSet.length; i++){var div = document.createElement('div');div.innerText = dataSet[i];section.appendChild(div);}}*CONTENTIOUS!!ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIPHTTPHTMLJSCSS

LOADINGDOM MANIPULATION TIPS: EVALeval(arg) = Evaluate a string to JavaScriptEVAL IS EVIL• LAZY PROGRAMMING• SLOW TO USE• DANGEROUS (THINK SQL INJECTION)• DIFFICULT TO DEBUGHTTPHTMLJSCSS• … BUT IT CAN BE USEFULACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

SUMMARY

SUMMARYInternet is slow, use it efficiently• Reduce HTTP requests• Utilise Caching• Reduce Resource sizePage loads are ugly• Ajax is your friendCSS3 is cool but hungry• Be lean with CSS3 calls on mobile devicesCode Well!ACCELERATING MOMENTUM WITH MULTIPLICITY, ONEPARTNERSHIP

THANK YOUReferences:Performance Bookmarklet: http://66.7percentangel.com/2011/12/breaking-down-onloadevent-performance-bookmarklet/