extreme mobile app performance: native to web

Jacky Nguyen Chief Mobile Architect - Sencha Inc.

@[email protected]

Extreme Mobile App Performance:

Native to Web

Wednesday, April 3, 13

mailto:[email protected]

mailto:[email protected]

vs.


“Our biggest mistake was betting too much on HTML5”

Mark Zuckerberg - TechCrunch Disrupt 2012


Fear

Doubt

Bashing


Talk

Talk

TalkTalk

Talk

Talk

Talk

Talk

TalkTalk

Talk


Talk

Talk

TalkTalk

Talk

Talk

Talk

Talk

TalkTalk

TalkDO!


The challenging parts



•Lots of data

•Variety of content

•Unknown item sizes

Constraints



•Lots of data

•Variety of content

•Unknown item sizes

Constraints

•60fps scrolling

•Fast data loading

•Fast rendering

Requirements


Under the hood


UIWebView

UIWebView

Under the hood


The problems

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


1

2

3


1

2

3

4


2

3

4

5


Web page approach

2

3

4

5


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


Shut up and code!


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


Shut up and code!


Infinite List techniques


Infinite List techniques

•Recycling

•Prioritizing

•Sandboxing


DOM recycling


Infinite list - unknown item sizes

1

2

3

4


Infinite list - unknown item sizes1

2

3

4



1

2

3

4



2

3

4

5



2

3

4

5 x


Animation 101

A B


CSS Positioning


Scroll Positioning


Compositing


Compositing for Infinite List


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


Compositing


1

2

3

4

Compositing


1

2

3

4


1

2

3

4

5


Batch DOM read / write separately

1

2

3

4

5


1

2

3

4

5

translate inner composite


1

23

4

5



3

4

5

6

7


render 6, 7 write


3

4

5

6

7


render 6, 7 write

read 6, 7 heights read - layout


3

4

5

6

7


render 6, 7 write

read 6, 7 heights read - layout

translate 6, 7 composite


Prioritizing


16.7ms


16.7ms

Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing



100ms



16ms12ms13ms60ms15ms13ms16ms40ms16ms17ms15ms55ms14ms17ms35ms


The AnimationQueue

60fps


The AnimationQueue

60fps

Touch eventsAnimation

Image loading

Image rendering

Data loading


Buffered renderingProgressive Buffered


Delayed image rendering


Combined techniques


Demo


60fps

Scalability problem


50fps50fps

Scalability problem


40fps40fps40fps

Scalability problem


Scalability problem

8ms layout cost


Scalability problem

40ms layout costWednesday, April 3, 13

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


Sandboxing


IFRAME IFRAME IFRAME

60fps 60fps 60fps

document


Demo


Extreme benefits, frameworks required

•Bridge all events, remap coordinates

•Copy stylesheets dynamically

•Connect layouts

•Workaround browser bugs


Extreme benefits, frameworks required

•Bridge all events, remap coordinates

•Copy stylesheets dynamically

•Connect layouts

•Workaround browser bugs

That’s what frameworks are for!


Stop reinventing the wheel

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

https://www.sencha.com/store/sencha-touch-bundle

https://www.sencha.com/store/sencha-touch-bundle

Sum it up


extreme mobile app performance: native to web

Technology

ms compositing

ms image decoding

innite list composite

ms network requests

ms style recalculation

ms data processing

inner composite

innite listwednesday