![The problems
“So while utilizing web technology [...], people expect a fast,
reliable experience and our iOS app was falling short.”
Wednesday, April 3, 13](https://image.slidesharecdn.com/nativetoweb-130403063945-phpapp02/85/Extreme-Mobile-App-Performance-Native-to-Web-12-320.jpg)
Extreme Mobile App Performance: Native to Web
- 1. Extreme Mobile App Performance: Native to Web Jacky Nguyen Chief Mobile Architect - Sencha Inc. jacky@sencha.com @nktpro Wednesday, April 3, 13
- 2. vs. Wednesday, April 3, 13
- 3. “Our biggest mistake was betting too much on HTML5” Mark Zuckerberg - TechCrunch Disrupt 2012 Wednesday, April 3, 13
- 4. Fear Doubt Bashing Wednesday, April 3, 13
- 5. Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk Wednesday, April 3, 13
- 6. Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk DO! Talk Wednesday, April 3, 13
- 7. The challenging parts Wednesday, April 3, 13
- 8. The challenging parts Constraints •Lots of data •Variety of content •Unknown item sizes Wednesday, April 3, 13
- 9. The challenging parts Constraints •Lots of data •Variety of content •Unknown item sizes Requirements •60fps scrolling •Fast data loading •Fast rendering Wednesday, April 3, 13
- 10. Under the hood Wednesday, April 3, 13
- 11. Under the hood UIWebView UIWebView Wednesday, April 3, 13
- 12. The problems “So while utilizing web technology [...], people expect a fast, reliable experience and our iOS app was falling short.” Wednesday, April 3, 13
- 13. 1 2 3 Wednesday, April 3, 13
- 14. 1 2 3 4 Wednesday, April 3, 13
- 15. 2 3 4 5 Wednesday, April 3, 13
- 16. 2 3 4 5 Web page approach Wednesday, April 3, 13
- 17. Page vs app model Web page Web app Payload Huge, raw HTML Minimal data State Stateless Stateful Memory Increasing Constant Performance Degrading Constant Prioritization No Yes Wednesday, April 3, 13
- 18. Shut up and code! Wednesday, April 3, 13
- 19. 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
- 20. Shut up and code! Wednesday, April 3, 13
- 21. Shut up and code! Wednesday, April 3, 13
- 22. Infinite List techniques Wednesday, April 3, 13
- 23. Infinite List techniques •Recycling •Prioritizing •Sandboxing Wednesday, April 3, 13
- 24. DOM recycling Wednesday, April 3, 13
- 25. Infinite list - unknown item sizes 1 2 3 4 Wednesday, April 3, 13
- 26. Infinite list - unknown item sizes 1 2 3 4 Wednesday, April 3, 13
- 27. Infinite list - unknown item sizes 2 3 4 1 Wednesday, April 3, 13
- 28. Infinite list - unknown item sizes 2 3 4 5 Wednesday, April 3, 13
- 29. Infinite list - unknown item sizes 2 3 4 5 x Wednesday, April 3, 13
- 30. Animation 101 A B Wednesday, April 3, 13
- 31. CSS Positioning Wednesday, April 3, 13
- 32. CSS Positioning Wednesday, April 3, 13
- 33. Scroll Positioning Wednesday, April 3, 13
- 34. Scroll Positioning Wednesday, April 3, 13
- 37. Compositing for Infinite List Wednesday, April 3, 13
- 38. 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
- 41. Compositing 1 2 3 4 Wednesday, April 3, 13
- 42. 1 2 3 4 Wednesday, April 3, 13
- 43. 2 3 4 1 5 Wednesday, April 3, 13
- 44. Batch DOM read / write separately 1 2 3 4 5 Wednesday, April 3, 13
- 45. 1 2 3 4 translate inner composite 5 Wednesday, April 3, 13
- 46. 1 3 2 4 translate inner composite 5 Wednesday, April 3, 13
- 47. 6 7 3 4 translate inner composite 5 render 6, 7 write Wednesday, April 3, 13
- 48. 6 7 3 4 translate inner composite 5 render 6, 7 write read 6, 7 heights read - layout Wednesday, April 3, 13
- 49. 3 4 translate inner composite 5 render 6, 7 write read 6, 7 heights read - layout 6 translate 6, 7 composite 7 Wednesday, April 3, 13
- 50. Wednesday, April 3, 13
- 52. 16.7ms Wednesday, April 3, 13
- 53. Style recalculation Layout Compositing 16.7ms Painting Network requests Image decoding Data processing Wednesday, April 3, 13
- 54. Style recalculation Layout Compositing 100ms Painting Network requests Image decoding Data processing Wednesday, April 3, 13
- 55. 16ms 12ms 13ms Style recalculation 60ms 15ms Layout 13ms Compositing 16ms 40ms Painting 16ms Network requests 17ms 15ms Image decoding 55ms Data processing 14ms 17ms 35ms Wednesday, April 3, 13
- 56. The AnimationQueue 60fps Wednesday, April 3, 13
- 57. The AnimationQueue Animation Touch events 60fps Image loading Data loading Image rendering Wednesday, April 3, 13
- 58. Buffered rendering Progressive Buffered Wednesday, April 3, 13
- 59. Buffered rendering Progressive Buffered Wednesday, April 3, 13
- 60. Delayed image rendering Wednesday, April 3, 13
- 61. Combined techniques Wednesday, April 3, 13
- 62. Demo Wednesday, April 3, 13
- 63. Scalability problem 60fps Wednesday, April 3, 13
- 64. Scalability problem 60fps Wednesday, April 3, 13
- 65. Scalability problem 50fps 50fps Wednesday, April 3, 13
- 66. Scalability problem 40fps 40fps 40fps Wednesday, April 3, 13
- 67. Scalability problem 8ms layout cost Wednesday, April 3, 13
- 68. Scalability problem 40ms layout cost Wednesday, April 3, 13
- 69. By making it fast, I make it slow... Wednesday, April 3, 13
- 74. document IFRAME IFRAME IFRAME 60fps 60fps 60fps Wednesday, April 3, 13
- 75. Demo Wednesday, April 3, 13
- 76. Extreme benefits, frameworks required •Bridge all events, remap coordinates •Copy stylesheets dynamically •Connect layouts •Workaround browser bugs Wednesday, April 3, 13
- 77. 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
- 78. Stop reinventing the wheel https://www.sencha.com/store/sencha-touch-bundle Wednesday, April 3, 13
- 79. Sum it up Wednesday, April 3, 13
- 80. Wednesday, April 3, 13