HTML5 Mobile: doesn't have to suck.

Talk from QCon NY in June 2014 and DevCon5 in July 2014

Transcript

1. Dave Arel ! bellycard.com HTML5 Mobile: doesn’t have to suck. @davearel
2. HTML5 Mobile Apps Don’t Have To Suck @davearel
3. CHICAGO
10. HTML5 Mobile Apps Don’t Have To Suck @davearel
15. “The biggest mistake we made as a company was HTML5” ~Zuck
19. The Problem • Deploying took time and money • Innovation Slowed • Bugs could kill all activity
20. “Mercante” (HTML5) • Deploy New Versions in minutes • Develop multiple versions for A/B and multivariate testing • User Events
21. “Barco” (Native) • Device API • Request Queue • Key/Value Store • Heartbeats
23. The Struggle is Real, Ya’ll • Tooling • Rendering (CPU/GPU) • Memory Management • DOM (Repaints/Reflows)
25. HTML5 Mobile Apps Don’t Have To Suck @davearel CPU & GPU You meh’ G-Unit
26. HTML5 Mobile Apps Don’t Have To Suck @davearel Painting: The visual representation in memory. Drawing: Casting the visual representation onto the screen.
27. HTML5 Mobile Apps Don’t Have To Suck @davearel GraphicsContext “Backing Store”
32. HTML5 Mobile Apps Don’t Have To Suck @davearel Reasons for compositing • Layer has 3D or perspective transform CSS properties • <video> and <canvas> elements • CSS animations • Layer uses accelerated CSS filters • Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer) http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
34. HTML5 Mobile Apps Don’t Have To Suck @davearel
36. HTML5 Mobile Apps Don’t Have To Suck @davearel “Cacheing”
38. HTML5 Mobile Apps Don’t Have To Suck @davearel Tips • Keep composite layers small • Composite elements that are updated often (not just animated) • Compositing layers off screen allows you to buffer / pre-render • Avoid several texture uploads • Use Chrome/Safari (or others) to monitor compositing
39. HTML5 Mobile Apps Don’t Have To Suck @davearel will-change The future of compositing http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/
40. Think like mobile engineers
42. THE END @davearel