extreme mobile app performance: native to web

Jacky Nguyen Chief Mobile Architect - Sencha Inc.

@nktprojacky@sencha.com

Extreme Mobile App Performance:

Native to Web

Wednesday, April 3, 13

vs.

Wednesday, April 3, 13

“Our biggest mistake was betting too much on HTML5”

Mark Zuckerberg - TechCrunch Disrupt 2012

Wednesday, April 3, 13

Fear

Doubt

Bashing

Wednesday, April 3, 13

Talk

Talk

TalkTalk

Talk

Talk

Talk

Talk

TalkTalk

Talk

Wednesday, April 3, 13

Talk

Talk

TalkTalk

Talk

Talk

Talk

Talk

TalkTalk

TalkDO!

Wednesday, April 3, 13

The challenging parts

Wednesday, April 3, 13

The challenging parts

•Lots of data

•Variety of content

•Unknown item sizes

Constraints

Wednesday, April 3, 13

The challenging parts

•Lots of data

•Variety of content

•Unknown item sizes

Constraints

•60fps scrolling

•Fast data loading

•Fast rendering

Requirements

Wednesday, April 3, 13

Under the hood

Wednesday, April 3, 13

UIWebView

UIWebView

Under the hood

Wednesday, April 3, 13

The problems

“So while utilizing web technology [...], people expect a fast, reliable experience and our iOS app was falling short.”

Wednesday, April 3, 13

1

2

3

Wednesday, April 3, 13

1

2

3

4

Wednesday, April 3, 13

2

3

4

5

Wednesday, April 3, 13

Web page approach

2

3

4

5

Wednesday, April 3, 13

Page vs app model

Web page Web app

Payload

State

Memory

Performance

Prioritization

Huge, raw HTML Minimal data

Stateless Stateful

Increasing Constant

Degrading Constant

No Yes

Wednesday, April 3, 13

Shut up and code!

Wednesday, April 3, 13

Shut up and code!

•Pure web (HTML + CSS + JavaScript)

•Cross-platform

•Using Facebook’s own APIs

•Build on top of Sencha Touch 2

•1 engineer, 1 manager, 3 weeks

Wednesday, April 3, 13

Shut up and code!

Wednesday, April 3, 13

Shut up and code!

Wednesday, April 3, 13

Infinite List techniques

Wednesday, April 3, 13

Infinite List techniques

•Recycling

•Prioritizing

•Sandboxing

Wednesday, April 3, 13

DOM recycling

Wednesday, April 3, 13

Infinite list - unknown item sizes

1

2

3

4

Wednesday, April 3, 13

Infinite list - unknown item sizes1

2

3

4

Wednesday, April 3, 13

Infinite list - unknown item sizes

1

2

3

4

Wednesday, April 3, 13

Infinite list - unknown item sizes

2

3

4

5

Wednesday, April 3, 13

Infinite list - unknown item sizes

2

3

4

5 x

Wednesday, April 3, 13

Animation 101

A B

Wednesday, April 3, 13

CSS Positioning

Wednesday, April 3, 13

CSS Positioning

Wednesday, April 3, 13

Scroll Positioning

Wednesday, April 3, 13

Scroll Positioning

Wednesday, April 3, 13

Compositing

Wednesday, April 3, 13

Compositing

Wednesday, April 3, 13

Compositing for Infinite List

Wednesday, April 3, 13

Compositing for Infinite List

•Composite each item and the container independently

•Translate the container for every frame

•Translate each item once per re-rendering cycle

Wednesday, April 3, 13

Compositing

Wednesday, April 3, 13

Compositing

Wednesday, April 3, 13

1

2

3

4

Compositing

Wednesday, April 3, 13

1

2

3

4

Wednesday, April 3, 13

1

2

3

4

5

Wednesday, April 3, 13

Batch DOM read / write separately

1

2

3

4

5

Wednesday, April 3, 13

1

2

3

4

5

translate inner composite

Wednesday, April 3, 13

1

23

4

5

translate inner composite

Wednesday, April 3, 13

3

4

5

6

7

translate inner composite

render 6, 7 write

Wednesday, April 3, 13

3

4

5

6

7

translate inner composite

render 6, 7 write

read 6, 7 heights read - layout

Wednesday, April 3, 13

3

4

5

6

7

translate inner composite

render 6, 7 write

read 6, 7 heights read - layout

translate 6, 7 composite

Wednesday, April 3, 13

Wednesday, April 3, 13

Prioritizing

Wednesday, April 3, 13

16.7ms

Wednesday, April 3, 13

16.7ms

Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing

Wednesday, April 3, 13

Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing

100ms

Wednesday, April 3, 13

Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing

16ms12ms13ms60ms15ms13ms16ms40ms16ms17ms15ms55ms14ms17ms35ms

Wednesday, April 3, 13

The AnimationQueue

60fps

Wednesday, April 3, 13

The AnimationQueue

60fps

Touch eventsAnimation

Image loading

Image rendering

Data loading

Wednesday, April 3, 13

Buffered renderingProgressive Buffered

Wednesday, April 3, 13

Buffered renderingProgressive Buffered

Wednesday, April 3, 13

Delayed image rendering

Wednesday, April 3, 13

Combined techniques

Wednesday, April 3, 13

Demo

Wednesday, April 3, 13

60fps

Scalability problem

Wednesday, April 3, 13

60fps

Scalability problem

Wednesday, April 3, 13

50fps50fps

Scalability problem

Wednesday, April 3, 13

40fps40fps40fps

Scalability problem

Wednesday, April 3, 13

Scalability problem

8ms layout cost

Wednesday, April 3, 13

Scalability problem

40ms layout costWednesday, April 3, 13

By making it fast, I make it slow...

Wednesday, April 3, 13

Sandboxing

Wednesday, April 3, 13

Sandboxing

Wednesday, April 3, 13

Sandboxing

Wednesday, April 3, 13

Sandboxing

Wednesday, April 3, 13

IFRAME IFRAME IFRAME

60fps 60fps 60fps

document

Wednesday, April 3, 13

Demo

Wednesday, April 3, 13

Extreme benefits, frameworks required

•Bridge all events, remap coordinates

•Copy stylesheets dynamically

•Connect layouts

•Workaround browser bugs

Wednesday, April 3, 13

Extreme benefits, frameworks required

•Bridge all events, remap coordinates

•Copy stylesheets dynamically

•Connect layouts

•Workaround browser bugs

That’s what frameworks are for!

Wednesday, April 3, 13

Stop reinventing the wheel

https://www.sencha.com/store/sencha-touch-bundleWednesday, April 3, 13

Sum it up

Wednesday, April 3, 13

Wednesday, April 3, 13