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.

0553dfba18ad7e1094da785e0336adb8?s=128

Demian Borba

August 23, 2013
Tweet

Transcript

  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. “Fulfill the promise of a full mobile computing experience”. ONE

    CLEAR GOAL
  3. None
  4. None
  5. None
  6. None
  7. Source: http://html5test.com

  8. None
  9. • 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
  10. None
  11. None
  12. • 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
  13. W H Y ? • Reach • Huge Developer Community

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

    in revenue, use two or more platforms concurrently
  15. Source: Vision Mobile Developer Economics 2013 Android, iOS and BlackBerry

    are top priority for their developers
  16. H O W D O E S I T W

    O R K ?
  17. P E R F O R M A N C

    E
  18. 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.
  19. 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.
  20. Source: Michael Wolf, Director of Technology at Cynergy PERFORMANCE UX

    ===
  21. L A T E N C Y Input Event (

    press menu key ) Display Update ( menu appears ) timeline UI Latency
  22. L A T E N C Y

  23. 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
  24. 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
  25. 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
  26. Accessing the DOM is expensive, do smarter trips 1 ECMA

    LAND DOM LAND BRIDGE TOLL ROAD
  27. 2 Call the right keyboard <input type="text" />

  28. 2 Call the right keyboard <input type="email" />

  29. 2 Call the right keyboard <input type="number" />

  30. 3 Use custom data-* attributes <div id="demian" data-job="evangelist" data-company="blackberry"></div>

  31. 3 Use custom data-* attributes // Add new data attributes

    via JS. var el = document.querySelector('#demian'); el.setAttribute('data-focus', 'html5');
  32. 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
  33. 4 Worry about keeping the user well informed (good feedback)

    TAP REQUEST DATA WAIT PARSE DATA UPDATE VIEW
  34. 4 Worry about keeping the user well informed (good feedback)

    TAP REQUEST DATA WAIT PARSE DATA UPDATE VIEW
  35. 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>
  36. 6 Use sprites and pick the right image format USE

    JPEG FOR for non-transparent images USE PNG FOR for transparent images
  37. 7 dataURI is your friend

  38. 8 Browser APIs are awesome if (navigator.onLine) { alert('online'); }

    else { alert('offline'); }
  39. 9 Have a nice backend solution (ex: Amazon AWS)

  40. 9 Have a nice backend solution (ex: Amazon AWS)

  41. 1 0 Create an offline mode (localStorage) window.localStorage.setItem('nome', 'Demian Borba');

    window.localStorage.getItem('nome');
  42. 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); });
  43. 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 = ...; };
  44. 1 1 Create single page apps <html> <head> <title>App<title> <script

    src="app.js"></script> </head> <body> </body> <html>
  45. 1 2 Touch is different than Click click: 307ms

  46. 1 2 Touch is different than Click touchstart: 4ms

  47. 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);
  48. 1 3 jQuery? Well... .querySelectorAll()

  49. 1 3 jQuery? Well... document.getElementById

  50. 1 4 CSS for touch is special -webkit-tap-highlight-color: rgba(0, 0,

    0, 0); user-select: none;
  51. 1 5 Boost your scrolling list -webkit-overflow-scrolling: touch; iScroll

  52. 1 6 Use CSS Transitions + Hardware Acceleration -webkit-transform: translate3d(0,0,0);

  53. 1 7 preventDefault()

  54. 1 8 Web Workers Execution happens in a separate process.

    Not on the UI THREAD = no UI delays Main Script doWork.js (The Worker)
  55. 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)
  56. 1 9 Be careful with frameworks http://zeptojs.com/

  57. 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.
  58. 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
  59. 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
  60. 2 0 There is no magic! (JSPerf, BrowserScope, WebInspector) Test!

    Test! Test! Tip: 20% QA
  61. • bbUI.js • Sensors • Accelerometer Fight • BrickBreaker •

    Built For BlackBerry • WebGL Sample (Computer) S A M P L E A P P S
  62. blackberrydeveloper.com.br/bfb

  63. developer.blackberry.com/html5 C++/Qt Cascades ActionScript Adobe® AIR® HTML5 BlackBerry® WebWorks™ C/C++

    Native SDK Java Android™ Runtime
  64. R E M O T E W E B I

    N S P E C T O R
  65. 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) + +
  66. T H E C A R

  67. Q N X C A R

  68. None
  69. • 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
  70. None
  71. 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$
  72. A P P ?

  73. A P P ?

  74. • 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
  75. T R I G G E R S Sample: Travel,

    Context Aware, Headless Apps
  76. N F C Sample: Pictures, Wotando

  77. P R O T Y P I N G Sample:

    Rabiscapp
  78. 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
  79. G A M I N G Sample: SFII / Tunnel

    Tilt
  80. D O I T

  81. • 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
  82. None
  83. W H A T A R E Y O U

    W A I T I N G F O R ?
  84. Demian Borba BlackBerry Developer Evangelist @demianborba www.dborba.com O B R

    I G A D O