Extreme Mobile App Performance: Native to Web

393 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
393
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Extreme Mobile App Performance: Native to Web

  1. 1. Extreme Mobile App Performance: Native to Web Jacky Nguyen Chief Mobile Architect - Sencha Inc. jacky@sencha.com @nktproWednesday, April 3, 13
  2. 2. vs.Wednesday, April 3, 13
  3. 3. “Our biggest mistake was betting too much on HTML5” Mark Zuckerberg - TechCrunch Disrupt 2012Wednesday, April 3, 13
  4. 4. Fear Doubt BashingWednesday, April 3, 13
  5. 5. Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk TalkWednesday, April 3, 13
  6. 6. Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk DO! TalkWednesday, April 3, 13
  7. 7. The challenging partsWednesday, April 3, 13
  8. 8. The challenging parts Constraints •Lots of data •Variety of content •Unknown item sizesWednesday, April 3, 13
  9. 9. The challenging parts Constraints •Lots of data •Variety of content •Unknown item sizes Requirements •60fps scrolling •Fast data loading •Fast renderingWednesday, April 3, 13
  10. 10. Under the hoodWednesday, April 3, 13
  11. 11. Under the hood UIWebView UIWebViewWednesday, April 3, 13
  12. 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. 13. 1 2 3Wednesday, April 3, 13
  14. 14. 1 2 3 4Wednesday, April 3, 13
  15. 15. 2 3 4 5Wednesday, April 3, 13
  16. 16. 2 3 4 5 Web page approachWednesday, April 3, 13
  17. 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 YesWednesday, April 3, 13
  18. 18. Shut up and code!Wednesday, April 3, 13
  19. 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 weeksWednesday, April 3, 13
  20. 20. Shut up and code!Wednesday, April 3, 13
  21. 21. Shut up and code!Wednesday, April 3, 13
  22. 22. Infinite List techniquesWednesday, April 3, 13
  23. 23. Infinite List techniques •Recycling •Prioritizing •SandboxingWednesday, April 3, 13
  24. 24. DOM recyclingWednesday, April 3, 13
  25. 25. Infinite list - unknown item sizes 1 2 3 4Wednesday, April 3, 13
  26. 26. Infinite list - unknown item sizes 1 2 3 4Wednesday, April 3, 13
  27. 27. Infinite list - unknown item sizes 2 3 4 1Wednesday, April 3, 13
  28. 28. Infinite list - unknown item sizes 2 3 4 5Wednesday, April 3, 13
  29. 29. Infinite list - unknown item sizes 2 3 4 5 xWednesday, April 3, 13
  30. 30. Animation 101 A BWednesday, April 3, 13
  31. 31. CSS PositioningWednesday, April 3, 13
  32. 32. CSS PositioningWednesday, April 3, 13
  33. 33. Scroll PositioningWednesday, April 3, 13
  34. 34. Scroll PositioningWednesday, April 3, 13
  35. 35. CompositingWednesday, April 3, 13
  36. 36. CompositingWednesday, April 3, 13
  37. 37. Compositing for Infinite ListWednesday, April 3, 13
  38. 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 cycleWednesday, April 3, 13
  39. 39. CompositingWednesday, April 3, 13
  40. 40. CompositingWednesday, April 3, 13
  41. 41. Compositing 1 2 3 4Wednesday, April 3, 13
  42. 42. 1 2 3 4Wednesday, April 3, 13
  43. 43. 2 3 4 1 5Wednesday, April 3, 13
  44. 44. Batch DOM read / write separately 1 2 3 4 5Wednesday, April 3, 13
  45. 45. 1 2 3 4 translate inner composite 5Wednesday, April 3, 13
  46. 46. 1 3 2 4 translate inner composite 5Wednesday, April 3, 13
  47. 47. 6 7 3 4 translate inner composite 5 render 6, 7 writeWednesday, April 3, 13
  48. 48. 6 7 3 4 translate inner composite 5 render 6, 7 write read 6, 7 heights read - layoutWednesday, April 3, 13
  49. 49. 3 4 translate inner composite 5 render 6, 7 write read 6, 7 heights read - layout 6 translate 6, 7 composite 7Wednesday, April 3, 13
  50. 50. Wednesday, April 3, 13
  51. 51. PrioritizingWednesday, April 3, 13
  52. 52. 16.7msWednesday, April 3, 13
  53. 53. Style recalculation Layout Compositing 16.7ms Painting Network requests Image decoding Data processingWednesday, April 3, 13
  54. 54. Style recalculation Layout Compositing 100ms Painting Network requests Image decoding Data processingWednesday, April 3, 13
  55. 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 35msWednesday, April 3, 13
  56. 56. The AnimationQueue 60fpsWednesday, April 3, 13
  57. 57. The AnimationQueue Animation Touch events 60fps Image loading Data loading Image renderingWednesday, April 3, 13
  58. 58. Buffered rendering Progressive BufferedWednesday, April 3, 13
  59. 59. Buffered rendering Progressive BufferedWednesday, April 3, 13
  60. 60. Delayed image renderingWednesday, April 3, 13
  61. 61. Combined techniquesWednesday, April 3, 13
  62. 62. DemoWednesday, April 3, 13
  63. 63. Scalability problem 60fpsWednesday, April 3, 13
  64. 64. Scalability problem 60fpsWednesday, April 3, 13
  65. 65. Scalability problem 50fps 50fpsWednesday, April 3, 13
  66. 66. Scalability problem 40fps 40fps 40fpsWednesday, April 3, 13
  67. 67. Scalability problem 8ms layout costWednesday, April 3, 13
  68. 68. Scalability problem 40ms layout costWednesday, April 3, 13
  69. 69. By making it fast, I make it slow...Wednesday, April 3, 13
  70. 70. SandboxingWednesday, April 3, 13
  71. 71. SandboxingWednesday, April 3, 13
  72. 72. SandboxingWednesday, April 3, 13
  73. 73. SandboxingWednesday, April 3, 13
  74. 74. document IFRAME IFRAME IFRAME 60fps 60fps 60fpsWednesday, April 3, 13
  75. 75. DemoWednesday, April 3, 13
  76. 76. Extreme benefits, frameworks required •Bridge all events, remap coordinates •Copy stylesheets dynamically •Connect layouts •Workaround browser bugsWednesday, April 3, 13
  77. 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. 78. Stop reinventing the wheel https://www.sencha.com/store/sencha-touch-bundleWednesday, April 3, 13
  79. 79. Sum it upWednesday, April 3, 13
  80. 80. Wednesday, April 3, 13

×