Tweet
Tweet

Slide 1

Slide 1 text

Dave Arel ! bellycard.com HTML5 Mobile: doesn’t have to suck. @davearel

Slide 2

Slide 2 text

HTML5 Mobile Apps Don’t Have To Suck @davearel

Slide 3

Slide 3 text

CHICAGO

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

HTML5 Mobile Apps Don’t Have To Suck @davearel

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

“The biggest mistake we made as a company was HTML5” ~Zuck

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

The Problem • Deploying took time and money • Innovation Slowed • Bugs could kill all activity

Slide 20

Slide 20 text

“Mercante” (HTML5) • Deploy New Versions in minutes • Develop multiple versions for A/B and multivariate testing • User Events

Slide 21

Slide 21 text

“Barco” (Native) • Device API • Request Queue • Key/Value Store • Heartbeats

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

The Struggle is Real, Ya’ll • Tooling • Rendering (CPU/GPU) • Memory Management • DOM (Repaints/Reflows)

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

HTML5 Mobile Apps Don’t Have To Suck @davearel CPU & GPU You meh’ G-Unit

Slide 26

Slide 26 text

HTML5 Mobile Apps Don’t Have To Suck @davearel Painting: The visual representation in memory. Drawing: Casting the visual representation onto the screen.

Slide 27

Slide 27 text

HTML5 Mobile Apps Don’t Have To Suck @davearel GraphicsContext “Backing Store”

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

HTML5 Mobile Apps Don’t Have To Suck @davearel Reasons for compositing • Layer has 3D or perspective transform CSS properties • and 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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

HTML5 Mobile Apps Don’t Have To Suck @davearel

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

HTML5 Mobile Apps Don’t Have To Suck @davearel “Cacheing”

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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/

Slide 40

Slide 40 text

Think like mobile engineers

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

THE END @davearel