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.

Transcript

1. David Arel @davearel bellycard.com HTML5 Mobile Apps Don't Have To Suck Wednesday, October 23, 13
2. Native vs HTML5 Mobile Apps Wednesday, October 23, 13
3. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
4. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
5. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
6. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
7. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
8. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
9. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Wednesday, October 23, 13
10. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Hybrid Wednesday, October 23, 13
11. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Hybrid ish ish ish Wednesday, October 23, 13
12. Native vs HTML5 Mobile Apps Performance Native Dev Tools HTML5 User Experience Features Monetization Hybrid ish ish ish Wednesday, October 23, 13
13. Wednesday, October 23, 13
14. Wednesday, October 23, 13
15. “The biggest mistake we made as a company was HTML5” ~Zuck Wednesday, October 23, 13
16. I DONO LOL Wednesday, October 23, 13
17. Wednesday, October 23, 13
18. Wednesday, October 23, 13
19. Wednesday, October 23, 13
20. The Problem Wednesday, October 23, 13
21. The Problem Deploying took time and money Innovation Slowed Bugs could kill all activity Wednesday, October 23, 13
22. The Solution Wednesday, October 23, 13
23. The Solution HTML5 Deploy New Versions in minutes Develop multiple versions for A/B and multivariate testing User Events Wednesday, October 23, 13
24. Mercante Wednesday, October 23, 13
25. Mercante Backbone Dogbone Develop within a desktop browser Wednesday, October 23, 13
26. Barco Wednesday, October 23, 13
27. Barco Device API Queue Key/Value Store Heartbeats Wednesday, October 23, 13
28. Barco Device API Queue Key/Value Store Heartbeats Wednesday, October 23, 13
29. The Process Wednesday, October 23, 13
30. Wednesday, October 23, 13
31. Wednesday, October 23, 13
32. Wednesday, October 23, 13
33. The nightmares Wednesday, October 23, 13
34. The nightmares Wednesday, October 23, 13
35. The nightmares Tooling Rendering (CPU/GPU) DOM (Repaints/Reflows) Memory Management Wednesday, October 23, 13
36. Forget all we knew Wednesday, October 23, 13
37. Evaluate our advantages Wednesday, October 23, 13
38. Tooling Wednesday, October 23, 13
39. Wednesday, October 23, 13
40. Wednesday, October 23, 13
41. Settings > Safari > Advanced Wednesday, October 23, 13
42. Wednesday, October 23, 13
43. Memory Wednesday, October 23, 13
44. Garbage Collection Wednesday, October 23, 13
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
46. Memory Leaks Wednesday, October 23, 13
47. Memory Leaks Failure to release discarded memory JavaScript events were a common problem Wednesday, October 23, 13
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
49. Wednesday, October 23, 13
50. Wednesday, October 23, 13
51. Memory Optimization Wednesday, October 23, 13
52. Memory Optimization Keep variables as local as possible Use delete to dereference object properties Reuse Objects Wednesday, October 23, 13
53. window.performance.memory Wednesday, October 23, 13
54. window.performance.memory Wednesday, October 23, 13
55. Wednesday, October 23, 13
56. Rendering Wednesday, October 23, 13
57. Single page Wednesday, October 23, 13
58. Single page Wednesday, October 23, 13
59. DOM (Repaints/Reflows) Wednesday, October 23, 13
60. Document Fragments Wednesday, October 23, 13
61. Document Fragments var fragment = document.createDocumentFragment(); Wednesday, October 23, 13
62. Document Fragments var fragment = document.createDocumentFragment(); fragment.appendChild( elem ); Wednesday, October 23, 13
63. Document Fragments var fragment = document.createDocumentFragment(); fragment.appendChild( elem ); $(‘<div><ul><li></li></ul></div>’); Wednesday, October 23, 13
64. Perception is everything Wednesday, October 23, 13
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
66. Make use of the GPU Wednesday, October 23, 13
67. Wednesday, October 23, 13
68. Wednesday, October 23, 13
69. Wednesday, October 23, 13
70. Wednesday, October 23, 13
71. Wednesday, October 23, 13
72. Wednesday, October 23, 13
73. Think like mobile engineers Wednesday, October 23, 13
74. DAVE AREL @davearel tech.bellycard.com Wednesday, October 23, 13