Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Seeking the best performance in mobile apps built with HTML5

Seeking the best performance in mobile apps built with HTML5

Talk at #BrazilJS on August 23, 2013.

Demian Borba

August 23, 2013

More Decks by Demian Borba

Other Decks in Programming


  1. Demian Borba BlackBerry Developer Evangelist @demianborba www.dborba.com S E E

    K I N G T H E B E S T P E R F O R M A N C E I N M O B I L E A P P S B U I L T W I T H H T M L 5
  2. • Graduated in Industrial Design (CEFET-PR) • Graduated in Computer

    Science (UFAL) • Crazy about Design, UX, Business and Technology • Professor at University of California San Diego (UCSD) • Working with Interactive Media for over 13 years • Founder of Action Creations, interactive agency in California • Developer Evangelist, 90% #upintheair • Launch the Startup Jam program globally • Launched the Tech Centers in Universities A B O U T M E
  3. • Why HTML5? • Defining PERFORMANCE • 20 tips to

    improve performance • Samples built with HTML5 • Remote Web Inspector • Live Refresh • The Car • What we are trying to solve • Giveaway (BlackBerry Z10) • Questions & Answers A G E N D A
  4. W H Y ? • Reach • Huge Developer Community

    • Cross* Platform (Cordova, PhoneGap, Sencha etc) • Standards • Tons of Libraries, Tools and Services
  5. Source: Vision Mobile Developer Economics 2013 78% of developers interested

    in revenue, use two or more platforms concurrently
  6. Source: Wikipedia (http://en.wikipedia.org/wiki/Computer_performance) Computer performance is characterized by the amount

    of useful work accomplished by a computer system compared to the time and resources used.
  7. Source: Wikipedia (http://en.wikipedia.org/wiki/Computer_performance) Computer performance is characterized by the amount

    of useful work accomplished by a computer system compared to the time and resources used.
  8. L A T E N C Y Input Event (

    press menu key ) Display Update ( menu appears ) timeline UI Latency
  9. D O E S P E R F O R

    M A N C E M A T T E R ? Source: http://www.slideshare.net/stoyan/yslow-20-presentation
  10. D O E S P E R F O R

    M A N C E M A T T E R ? Source: https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0
  11. 2 0 T I P S P E R F

    O R M A N C E I M P R O V E T O
  12. 3 Use custom data-* attributes // Add new data attributes

    via JS. var el = document.querySelector('#demian'); el.setAttribute('data-focus', 'html5');
  13. 3 Use custom data-* attributes var html = []; for

    (var key in el.dataset) { html.push(key, ': ', el.dataset[key], '<br>'); } el.innerHTML = html.join(''); Output: job: evangelist company: blackberry focus: html5
  14. 4 Worry about keeping the user well informed (good feedback)

  15. 4 Worry about keeping the user well informed (good feedback)

  16. 5 Be careful with Gradients, prefer CSS or SVG <html>

    <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>
  17. 6 Use sprites and pick the right image format USE

    JPEG FOR for non-transparent images USE PNG FOR for transparent images
  18. 1 0 Create an offline mode (Web SQL Database) var

    db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); // 5MB db.transaction(function(tx) { tx.executeSql("SELECT * FROM employees", [], successCallback, errorCallback); });
  19. 1 0 Create an offline mode (IndexedDB) var idbRequest =

    window.indexedDB.open('Database Name'); idbRequest.onsuccess = function(event) { var db = event.srcElement.result; var transaction = db.transaction([], IDBTransaction.READ_ONLY); var curRequest = transaction.objectStore('ObjectStore Name').openCursor(); curRequest.onsuccess = ...; };
  20. 1 1 Create single page apps <html> <head> <title>App<title> <script

    src="app.js"></script> </head> <body> </body> <html>
  21. 1 2 Touch is different than Click github.com/ftlabs/fastclick index.html: <script

    src="lib/fastclick.js"></script> app.js: window.addEventListener('load', function () { new FastClick(document.body); }, false);
  22. 1 8 Web Workers Execution happens in a separate process.

    Not on the UI THREAD = no UI delays Main Script doWork.js (The Worker)
  23. 1 9 Be careful with frameworks http://jquerymobile.com § Easy to

    write (no need for heavy JS work) § Theme Roller & Codiqa (visual tool) § Does well with single page apps § Built upon jQuery UI § Runs on iOS, Android, BlackBerry, Bada, Windows Phone, WebOS and more § Has a builder tool (alpha)
  24. 1 9 Be careful with frameworks http://www.sencha.com/products/touch § MVC like

    § Focused on commercial products § Training & Support § Runs on OS, Android, BlackBerry, Windows Phone, and more.
  25. 1 9 Be careful with frameworks http://lungo.tapquo.com § Created to

    run on low end devices § Robust API § Community Driven (GitHub) § Runs on iOS / Android / Blackberry / FirefoxOS
  26. 1 9 Be careful with frameworks https://github.com/blackberry/bbUI.js § Niche specific,

    (BlackBerry 10 look and feel) § Follows BlackBerry 10 User Experience Guidelines § Community Driven (GitHub) § OFF DOM Implementation § UI only
  27. • bbUI.js • Sensors • Accelerometer Fight • BrickBreaker •

    Built For BlackBerry • WebGL Sample (Computer) S A M P L E A P P S
  28. R E M O T E W E B I

    N S P E C T O R
  29. L I V E R E F R E S

    H Video tutorial: http://dborba.com/wow-no-more-re-packaging-when-testing-html5-apps-on-your-device/ Text Editor (i.g. Sublime) Packager (i.g. WebWorks) Network Observer (i.g. Live Reload) + +
  30. • HTML5 SDK for Web Developers • Launch planned for

    October 2013 (in sync with QNX CAR 2.1) How app developers can make money? • Advertising • In-app purchases • SaaS - Software as a Service (monthly charges) • OEM pre-funded • Etc Q N X C A R S D K
  31. QNX$CAR$2$feature$highlights$ Naviga&on) •  Elektrobit$embedded$ •  Telenav$hybrid$ •  TCS$off@board$ $ Infotainment)+)social)media)

    •  Media/AM/FM/HD$ •  Pandora,$SHtcher$ •  Web$browser,$YouTube$ •  Facebook,$TwiMer$ Automo&ve) •  PersonalizaHon$ •  Climate$control$ •  Virtual$mechanic$ •  Audio$control$ $ Connec&vity) •  Bluetooth$+$SMS$ •  MirrorLink$+$iPod$Out$ •  Smartphone$w/$HTML5$ •  DLNA$ Pla9orm)+)framework) •  Torch$browser$ •  ComposiHon$manager$ •  HTML5$framework$ •  App$store$support$
  32. • Bluetooth 4.0 • Wifi • NFC • USB •

    HDMI • DLNA • Triggers SENSES UNDERSTANDS ADAPTS • BBM • Files • Screen • Video • Game GPS Accelerometer Altimeter Gyroscope Camera Screens Keyboard Cascades UI Framework My Location Geofence Places Map Automotive Hub Contacts Calendar Notifications UI Outputs based on Sensor Inputs and User Preferences CONNECT SHARE
  33. T R I G G E R S Sample: Travel,

    Context Aware, Headless Apps
  34. C O N T R O L L E R

    Sample: Sphero “In 2 hours, I created an app to control my Sphero with a BlackBerry 10. It was the 1st time I had even heard of the BlackBerry development tools”. - Mike DePhillips, Software Engineer at GoSphero
  35. • Find a real world problem • Never bring TECHNOLOGY

    before the PROBLEM • Analyze the current solutions • Validate your idea • Build your MVP (Minimum Viable Product) • Sense, understand and adapt S U G G E S T I O N S
  36. W H A T A R E Y O U

    W A I T I N G F O R ?