Creating High Performance Mobile Apps with HTML5

0553dfba18ad7e1094da785e0336adb8?s=47 Demian Borba
October 24, 2013

Creating High Performance Mobile Apps with HTML5

Learn how to create amazing HTML5 apps for mobile devices — always focusing on the best performance possible — using debugging and inspection tools. This presentation covers how to package applications for BlackBerry 10 devices and how to set up your environment to get live reloads on your mobile devices. Open source JavaScript libraries for our UI are mentioned, and it goes through some of the important ins and outs of mobile development using HTML5.

0553dfba18ad7e1094da785e0336adb8?s=128

Demian Borba

October 24, 2013
Tweet

Transcript

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

    A T I N G H I G H P E R F O R M A N C E M O B I L E A P P S 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. None
  4. None
  5. • Mobile is different • 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 • Questions & Answers A G E N D A
  6. • Large display • Large point of focus • Unlimited

    connection and power • IMMERSIVE EXPERIENCE D E S K T O P C O N N E C T E D W O R L D
  7. • Small display • Single point of focus • Variable

    limited connection and power INTERACTIVE EXPERIENCE M O B I L E I S D I F F E R E N T
  8. None
  9. “Fulfill the promise of a full mobile computing experience”. ONE

    CLEAR GOAL
  10. None
  11. None
  12. None
  13. None
  14. None
  15. Source: http://html5test.com

  16. Source: http://beta.html5test.com/compare/browser/bb-10.2/ios-7.0/android-4.3/firefoxmobile-24/wp-8.html

  17. W H Y ? • Reach • Huge Developer Community

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

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

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

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

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

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

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

  26. 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
  27. 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
  28. 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
  29. Accessing the DOM is expensive, do smarter trips 1 ECMA

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

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

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

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

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

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

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

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

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

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

    else { alert('offline'); }
  42. 9 Have a nice backend solution (e.g. Amazon AWS)

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

    tutorial by Christophe Coenraets: http://bit.ly/1aDYANI
  44. 9 Have a nice backend solution (ex: Amazon AWS)

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

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

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

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

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

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

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

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

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

  57. 1 7 preventDefault()

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

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

  61. 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.
  62. 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
  63. 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
  64. 2 0 There is no magic! (JSPerf, BrowserScope, WebInspector) Test!

    Test! Test! Tip: 20% QA
  65. • bbUI.js • Sensors • Accelerometer Fight • Built For

    BlackBerry • WebGL Sample (http://dborba.com/gamepad) source code: http://github.com/blackberry/ and look for WebWorks S A M P L E A P P S
  66. developer.blackberry.com/html5 C++/Qt Cascades ActionScript Adobe® AIR® HTML5 BlackBerry® WebWorks™ C/C++

    Native SDK Java Android™ Runtime
  67. developer.blackberry.com/builtforblackberry

  68. R E M O T E W E B I

    N S P E C T O R Sample App: bbUI Sample
  69. 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) + +
  70. T H E C A R

  71. Q N X C A R

  72. None
  73. • HTML5 SDK for Web Developers • Launch planned for

    end of 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
  74. None
  75. 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$
  76. A P P ?

  77. A P P ?

  78. • Bluetooth 4.0 • Wifi • NFC • USB •

    HDMI • DLNA • Triggers SENSE UNDERSTAND ADAPT • 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
  79. T R I G G E R S Sample: Travel,

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

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

    Rabiscapp
  82. 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
  83. G A M I N G Sample: ShadowGun / Tunnel

    Tilt
  84. D O I T

  85. • 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
  86. None
  87. W H A T A R E Y O U

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

    N K Y O U