$30 off During Our Annual Pro Sale. View Details »

HTML5 Mobile Apps Don't Have To Suck

Dave Arel
October 23, 2013

HTML5 Mobile Apps Don't Have To Suck

Sometimes, you've got to rock the boat to keep it from sinking. Belly's decision to scrap their native iPad app and build an HTML5 app was a risky move but proved to be one of the best decisions the startup has made. While mobile web is considered a harsh environment with low processing power, a few key techniques can be used to get the best performance out of your application. Belly's unique deployment platform, built on Phonegap's mobile framework, enables instantaneous software updates to any or all devices; making A/B testing a breeze. In this talk, Dave Arel will discuss how to build fast, proficient, native-like HTML5 mobile applications, and the enormous benefit it surely brings.

Dave Arel

October 23, 2013
Tweet

More Decks by Dave Arel

Other Decks in Programming

Transcript

  1. David Arel
    @davearel
    bellycard.com
    HTML5 Mobile Apps
    Don't Have To Suck
    Wednesday, October 23, 13

    View Slide

  2. Native vs HTML5 Mobile Apps
    Wednesday, October 23, 13

    View Slide

  3. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  4. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  5. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  6. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  7. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  8. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  9. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Wednesday, October 23, 13

    View Slide

  10. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Hybrid
    Wednesday, October 23, 13

    View Slide

  11. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Hybrid
    ish
    ish
    ish
    Wednesday, October 23, 13

    View Slide

  12. Native vs HTML5 Mobile Apps
    Performance
    Native
    Dev Tools
    HTML5
    User Experience
    Features
    Monetization
    Hybrid
    ish
    ish
    ish
    Wednesday, October 23, 13

    View Slide

  13. Wednesday, October 23, 13

    View Slide

  14. Wednesday, October 23, 13

    View Slide

  15. “The biggest mistake we
    made as a company was
    HTML5” ~Zuck
    Wednesday, October 23, 13

    View Slide

  16. I DONO LOL
    Wednesday, October 23, 13

    View Slide

  17. Wednesday, October 23, 13

    View Slide

  18. Wednesday, October 23, 13

    View Slide

  19. Wednesday, October 23, 13

    View Slide

  20. The Problem
    Wednesday, October 23, 13

    View Slide

  21. The Problem
    Deploying took time and money
    Innovation Slowed
    Bugs could kill all activity
    Wednesday, October 23, 13

    View Slide

  22. The Solution
    Wednesday, October 23, 13

    View Slide

  23. The Solution
    HTML5
    Deploy New Versions in minutes
    Develop multiple versions for A/B and multivariate testing
    User Events
    Wednesday, October 23, 13

    View Slide

  24. Mercante
    Wednesday, October 23, 13

    View Slide

  25. Mercante
    Backbone
    Dogbone
    Develop within a desktop browser
    Wednesday, October 23, 13

    View Slide

  26. Barco
    Wednesday, October 23, 13

    View Slide

  27. Barco
    Device API
    Queue
    Key/Value Store
    Heartbeats
    Wednesday, October 23, 13

    View Slide

  28. Barco
    Device API
    Queue
    Key/Value Store
    Heartbeats
    Wednesday, October 23, 13

    View Slide

  29. The Process
    Wednesday, October 23, 13

    View Slide

  30. Wednesday, October 23, 13

    View Slide

  31. Wednesday, October 23, 13

    View Slide

  32. Wednesday, October 23, 13

    View Slide

  33. The nightmares
    Wednesday, October 23, 13

    View Slide

  34. The nightmares
    Wednesday, October 23, 13

    View Slide

  35. The nightmares
    Tooling
    Rendering (CPU/GPU)
    DOM (Repaints/Reflows)
    Memory Management
    Wednesday, October 23, 13

    View Slide

  36. Forget all we knew
    Wednesday, October 23, 13

    View Slide

  37. Evaluate our advantages
    Wednesday, October 23, 13

    View Slide

  38. Tooling
    Wednesday, October 23, 13

    View Slide

  39. Wednesday, October 23, 13

    View Slide

  40. Wednesday, October 23, 13

    View Slide

  41. Settings > Safari > Advanced
    Wednesday, October 23, 13

    View Slide

  42. Wednesday, October 23, 13

    View Slide

  43. Memory
    Wednesday, October 23, 13

    View Slide

  44. Garbage Collection
    Wednesday, October 23, 13

    View Slide

  45. Garbage Collection
    Garbage collectors attempt to find objects that are no
    longer being used and frees up memory
    6x the necessary memory
    doesn’t eliminate all memory leaks
    Wednesday, October 23, 13

    View Slide

  46. Memory Leaks
    Wednesday, October 23, 13

    View Slide

  47. Memory Leaks
    Failure to release discarded memory
    JavaScript events were a common problem
    Wednesday, October 23, 13

    View Slide

  48. “The primary reason for switching from
    HTML5 Mobile to native is that we’re seeing
    that more and more people are spending
    more time in the app, and the app is
    running out of memory”
    - Kiran Prasad,
    Senior Director for Mobile Engineering, LinkedIn
    Wednesday, October 23, 13

    View Slide

  49. Wednesday, October 23, 13

    View Slide

  50. Wednesday, October 23, 13

    View Slide

  51. Memory Optimization
    Wednesday, October 23, 13

    View Slide

  52. Memory Optimization
    Keep variables as local as possible
    Use delete to dereference object properties
    Reuse Objects
    Wednesday, October 23, 13

    View Slide

  53. window.performance.memory
    Wednesday, October 23, 13

    View Slide

  54. window.performance.memory
    Wednesday, October 23, 13

    View Slide

  55. Wednesday, October 23, 13

    View Slide

  56. Rendering
    Wednesday, October 23, 13

    View Slide

  57. Single page
    Wednesday, October 23, 13

    View Slide

  58. Single page
    Wednesday, October 23, 13

    View Slide

  59. DOM (Repaints/Reflows)
    Wednesday, October 23, 13

    View Slide

  60. Document Fragments
    Wednesday, October 23, 13

    View Slide

  61. Document Fragments
    var fragment = document.createDocumentFragment();
    Wednesday, October 23, 13

    View Slide

  62. Document Fragments
    var fragment = document.createDocumentFragment();
    fragment.appendChild( elem );
    Wednesday, October 23, 13

    View Slide

  63. Document Fragments
    var fragment = document.createDocumentFragment();
    fragment.appendChild( elem );
    $(‘’);
    Wednesday, October 23, 13

    View Slide

  64. Perception is everything
    Wednesday, October 23, 13

    View Slide

  65. Perception is everything
    Use touch events to avoid 300ms delay
    -webkit-overflow-scrolling: touch;
    Avoid processing overload by spacing out animations
    Wednesday, October 23, 13

    View Slide

  66. Make use of the GPU
    Wednesday, October 23, 13

    View Slide

  67. Wednesday, October 23, 13

    View Slide

  68. Wednesday, October 23, 13

    View Slide

  69. Wednesday, October 23, 13

    View Slide

  70. Wednesday, October 23, 13

    View Slide

  71. Wednesday, October 23, 13

    View Slide

  72. Wednesday, October 23, 13

    View Slide

  73. Think like mobile engineers
    Wednesday, October 23, 13

    View Slide

  74. DAVE AREL
    @davearel
    tech.bellycard.com
    Wednesday, October 23, 13

    View Slide