extreme mobile app performance: native to web
TRANSCRIPT
![Page 1: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/1.jpg)
Jacky Nguyen Chief Mobile Architect - Sencha Inc.
Extreme Mobile App Performance:
Native to Web
Wednesday, April 3, 13
![Page 2: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/2.jpg)
vs.
Wednesday, April 3, 13
![Page 3: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/3.jpg)
“Our biggest mistake was betting too much on HTML5”
Mark Zuckerberg - TechCrunch Disrupt 2012
Wednesday, April 3, 13
![Page 4: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/4.jpg)
Fear
Doubt
Bashing
Wednesday, April 3, 13
![Page 5: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/5.jpg)
Talk
Talk
TalkTalk
Talk
Talk
Talk
Talk
TalkTalk
Talk
Wednesday, April 3, 13
![Page 6: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/6.jpg)
Talk
Talk
TalkTalk
Talk
Talk
Talk
Talk
TalkTalk
TalkDO!
Wednesday, April 3, 13
![Page 7: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/7.jpg)
The challenging parts
Wednesday, April 3, 13
![Page 8: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/8.jpg)
The challenging parts
•Lots of data
•Variety of content
•Unknown item sizes
Constraints
Wednesday, April 3, 13
![Page 9: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/9.jpg)
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
![Page 10: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/10.jpg)
Under the hood
Wednesday, April 3, 13
![Page 11: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/11.jpg)
UIWebView
UIWebView
Under the hood
Wednesday, April 3, 13
![Page 12: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/12.jpg)
The problems
“So while utilizing web technology [...], people expect a fast, reliable experience and our iOS app was falling short.”
Wednesday, April 3, 13
![Page 13: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/13.jpg)
1
2
3
Wednesday, April 3, 13
![Page 14: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/14.jpg)
1
2
3
4
Wednesday, April 3, 13
![Page 15: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/15.jpg)
2
3
4
5
Wednesday, April 3, 13
![Page 16: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/16.jpg)
Web page approach
2
3
4
5
Wednesday, April 3, 13
![Page 17: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/17.jpg)
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
![Page 18: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/18.jpg)
Shut up and code!
Wednesday, April 3, 13
![Page 19: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/19.jpg)
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
![Page 20: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/20.jpg)
Shut up and code!
Wednesday, April 3, 13
![Page 21: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/21.jpg)
Shut up and code!
Wednesday, April 3, 13
![Page 22: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/22.jpg)
Infinite List techniques
Wednesday, April 3, 13
![Page 23: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/23.jpg)
Infinite List techniques
•Recycling
•Prioritizing
•Sandboxing
Wednesday, April 3, 13
![Page 24: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/24.jpg)
DOM recycling
Wednesday, April 3, 13
![Page 25: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/25.jpg)
Infinite list - unknown item sizes
1
2
3
4
Wednesday, April 3, 13
![Page 26: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/26.jpg)
Infinite list - unknown item sizes1
2
3
4
Wednesday, April 3, 13
![Page 27: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/27.jpg)
Infinite list - unknown item sizes
1
2
3
4
Wednesday, April 3, 13
![Page 28: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/28.jpg)
Infinite list - unknown item sizes
2
3
4
5
Wednesday, April 3, 13
![Page 29: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/29.jpg)
Infinite list - unknown item sizes
2
3
4
5 x
Wednesday, April 3, 13
![Page 30: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/30.jpg)
Animation 101
A B
Wednesday, April 3, 13
![Page 31: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/31.jpg)
CSS Positioning
Wednesday, April 3, 13
![Page 32: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/32.jpg)
CSS Positioning
Wednesday, April 3, 13
![Page 33: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/33.jpg)
Scroll Positioning
Wednesday, April 3, 13
![Page 34: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/34.jpg)
Scroll Positioning
Wednesday, April 3, 13
![Page 35: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/35.jpg)
Compositing
Wednesday, April 3, 13
![Page 36: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/36.jpg)
Compositing
Wednesday, April 3, 13
![Page 37: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/37.jpg)
Compositing for Infinite List
Wednesday, April 3, 13
![Page 38: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/38.jpg)
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
![Page 39: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/39.jpg)
Compositing
Wednesday, April 3, 13
![Page 40: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/40.jpg)
Compositing
Wednesday, April 3, 13
![Page 41: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/41.jpg)
1
2
3
4
Compositing
Wednesday, April 3, 13
![Page 42: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/42.jpg)
1
2
3
4
Wednesday, April 3, 13
![Page 43: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/43.jpg)
1
2
3
4
5
Wednesday, April 3, 13
![Page 44: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/44.jpg)
Batch DOM read / write separately
1
2
3
4
5
Wednesday, April 3, 13
![Page 45: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/45.jpg)
1
2
3
4
5
translate inner composite
Wednesday, April 3, 13
![Page 46: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/46.jpg)
1
23
4
5
translate inner composite
Wednesday, April 3, 13
![Page 47: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/47.jpg)
3
4
5
6
7
translate inner composite
render 6, 7 write
Wednesday, April 3, 13
![Page 48: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/48.jpg)
3
4
5
6
7
translate inner composite
render 6, 7 write
read 6, 7 heights read - layout
Wednesday, April 3, 13
![Page 49: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/49.jpg)
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
![Page 50: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/50.jpg)
Wednesday, April 3, 13
![Page 51: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/51.jpg)
Prioritizing
Wednesday, April 3, 13
![Page 52: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/52.jpg)
16.7ms
Wednesday, April 3, 13
![Page 53: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/53.jpg)
16.7ms
Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing
Wednesday, April 3, 13
![Page 54: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/54.jpg)
Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing
100ms
Wednesday, April 3, 13
![Page 55: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/55.jpg)
Style recalculationLayoutCompositingPaintingNetwork requestsImage decodingData processing
16ms12ms13ms60ms15ms13ms16ms40ms16ms17ms15ms55ms14ms17ms35ms
Wednesday, April 3, 13
![Page 56: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/56.jpg)
The AnimationQueue
60fps
Wednesday, April 3, 13
![Page 57: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/57.jpg)
The AnimationQueue
60fps
Touch eventsAnimation
Image loading
Image rendering
Data loading
Wednesday, April 3, 13
![Page 58: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/58.jpg)
Buffered renderingProgressive Buffered
Wednesday, April 3, 13
![Page 59: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/59.jpg)
Buffered renderingProgressive Buffered
Wednesday, April 3, 13
![Page 60: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/60.jpg)
Delayed image rendering
Wednesday, April 3, 13
![Page 61: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/61.jpg)
Combined techniques
Wednesday, April 3, 13
![Page 62: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/62.jpg)
Demo
Wednesday, April 3, 13
![Page 63: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/63.jpg)
60fps
Scalability problem
Wednesday, April 3, 13
![Page 64: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/64.jpg)
60fps
Scalability problem
Wednesday, April 3, 13
![Page 65: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/65.jpg)
50fps50fps
Scalability problem
Wednesday, April 3, 13
![Page 66: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/66.jpg)
40fps40fps40fps
Scalability problem
Wednesday, April 3, 13
![Page 67: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/67.jpg)
Scalability problem
8ms layout cost
Wednesday, April 3, 13
![Page 68: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/68.jpg)
Scalability problem
40ms layout costWednesday, April 3, 13
![Page 69: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/69.jpg)
By making it fast, I make it slow...
Wednesday, April 3, 13
![Page 70: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/70.jpg)
Sandboxing
Wednesday, April 3, 13
![Page 71: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/71.jpg)
Sandboxing
Wednesday, April 3, 13
![Page 72: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/72.jpg)
Sandboxing
Wednesday, April 3, 13
![Page 73: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/73.jpg)
Sandboxing
Wednesday, April 3, 13
![Page 74: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/74.jpg)
IFRAME IFRAME IFRAME
60fps 60fps 60fps
document
Wednesday, April 3, 13
![Page 75: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/75.jpg)
Demo
Wednesday, April 3, 13
![Page 76: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/76.jpg)
Extreme benefits, frameworks required
•Bridge all events, remap coordinates
•Copy stylesheets dynamically
•Connect layouts
•Workaround browser bugs
Wednesday, April 3, 13
![Page 77: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/77.jpg)
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
![Page 78: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/78.jpg)
Stop reinventing the wheel
https://www.sencha.com/store/sencha-touch-bundleWednesday, April 3, 13
![Page 79: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/79.jpg)
Sum it up
Wednesday, April 3, 13
![Page 80: Extreme Mobile App Performance: Native to Web](https://reader035.vdocument.in/reader035/viewer/2022070316/5557a487d8b42a4a5d8b4aa7/html5/thumbnails/80.jpg)
Wednesday, April 3, 13