Seeking the best performance in mobile apps built with HTML5

Talk at #BrazilJS on August 23, 2013.

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
   

   View Slide

2. “Fulfill the promise of
   a full mobile computing experience”.
   ONE CLEAR GOAL
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. Source: http://html5test.com
   

   View Slide

8. View Slide

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
   

   View Slide

10. View Slide

11. View Slide

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
    

    View Slide

13. W H Y ?
    • Reach
    • Huge Developer Community
    • Cross* Platform (Cordova, PhoneGap, Sencha etc)
    • Standards
    • Tons of Libraries, Tools and Services
    

    View Slide

14. Source: Vision Mobile Developer Economics 2013
    78% of
    developers
    interested in
    revenue,
    use two or more
    platforms
    concurrently
    

    View Slide

15. Source: Vision Mobile Developer Economics 2013
    Android, iOS and BlackBerry
    are top priority for their developers
    

    View Slide

16. H O W D O E S I T W O R K ?
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

20. Source: Michael Wolf, Director of Technology at Cynergy
    PERFORMANCE UX
    ===
    

    View Slide

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

    View Slide

22. L A T E N C Y
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Accessing the DOM is expensive, do smarter trips
    1
    ECMA
    LAND
    DOM
    LAND
    BRIDGE
    TOLL ROAD
    

    View Slide

27. 2 Call the right keyboard
    
    

    View Slide

28. 2 Call the right keyboard
    
    

    View Slide

29. 2 Call the right keyboard
    
    

    View Slide

30. 3 Use custom data-* attributes
    
    

    View Slide

31. 3 Use custom data-* attributes
    // Add new data attributes via JS.
    var el = document.querySelector('#demian');
    el.setAttribute('data-focus', 'html5');
    

    View Slide

32. 3 Use custom data-* attributes
    var html = [];
    for (var key in el.dataset) {
    html.push(key, ': ', el.dataset[key], '
    ');
    }
    el.innerHTML = html.join('');
    Output:
    job: evangelist
    company: blackberry
    focus: html5
    

    View Slide

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

    View Slide

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

    View Slide

35. 5 Be careful with Gradients, prefer CSS or SVG
    
    
    fill="url(#myGradient)"
    onmousedown="alert('hello');"/>
    
    
    

    View Slide

36. 6 Use sprites and pick the right image format
    USE JPEG FOR
    for non-transparent images
    USE PNG FOR
    for transparent images
    

    View Slide

37. 7 dataURI is your friend
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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);
    });
    

    View Slide

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 = ...;
    };
    

    View Slide

44. 1 1 Create single page apps
    
    
    App
    
    
    
    
    
    

    View Slide

45. 1 2 Touch is different than Click
    click: 307ms
    

    View Slide

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

    View Slide

47. 1 2 Touch is different than Click
    github.com/ftlabs/fastclick
    index.html:
    
    app.js:
    window.addEventListener('load', function () {
    new FastClick(document.body);
    }, false);
    

    View Slide

48. 1 3 jQuery? Well...
    .querySelectorAll()
    

    View Slide

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

    View Slide

50. 1 4 CSS for touch is special
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    

    View Slide

51. 1 5 Boost your scrolling list
    -webkit-overflow-scrolling: touch;
    iScroll
    

    View Slide

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

    View Slide

53. 1 7 preventDefault()
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

56. 1 9 Be careful with frameworks
    http://zeptojs.com/
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. 2 0 There is no magic! (JSPerf, BrowserScope, WebInspector)
    Test! Test! Test!
    Tip: 20% QA
    

    View Slide

61. • bbUI.js
    • Sensors
    • Accelerometer Fight
    • BrickBreaker
    • Built For BlackBerry
    • WebGL Sample (Computer)
    S A M P L E A P P S
    

    View Slide

62. blackberrydeveloper.com.br/bfb
    

    View Slide

63. developer.blackberry.com/html5
    C++/Qt
    Cascades
    ActionScript
    Adobe® AIR®
    HTML5 BlackBerry®
    WebWorks™
    C/C++
    Native SDK
    Java
    Android™
    Runtime
    

    View Slide

64. R E M O T E W E B I N S P E C T O R
    

    View Slide

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)
    +
    +
    

    View Slide

66. T H E C A R
    

    View Slide

67. Q N X C A R
    

    View Slide

68. View Slide

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
    

    View Slide

70. View Slide

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$
    

    View Slide

72. A P P ?
    

    View Slide

73. A P P ?
    

    View Slide

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
    

    View Slide

75. T R I G G E R S
    Sample: Travel, Context Aware, Headless Apps
    

    View Slide

76. N F C
    Sample: Pictures, Wotando
    

    View Slide

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

    View Slide

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
    

    View Slide

79. G A M I N G
    Sample: SFII / Tunnel Tilt
    

    View Slide

80. D O
    I T
    

    View Slide

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
    

    View Slide

82. View Slide

83. W H A T A R E Y O U
    W A I T I N G F O R ?
    

    View Slide

84. Demian Borba
    BlackBerry Developer Evangelist
    @demianborba
    www.dborba.com
    O B R I G A D O
    

    View Slide