Your SlideShare is downloading. ×
  • Like
Extreme Mobile App Performance: Native to Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Extreme Mobile App Performance: Native to Web

  • 145 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
145
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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