Performance Optimization    for Sencha Touch       by Tommy Maintz        @tommymaintz
Problems    DOM   Events   Drawing AnimationsCode execution
Device specific issues   Limited hardware acceleration            Translate3d
DOM: Memory  (Size matters)
One small advantagePhones have a limited amount of screen estate
SolutionDestroy components that are not visible on the screen anymore
Cards
Modal Components
Events: Memory
SolutionUse our Event ManagerAutomatic removal of listenersDelegation for Touch eventsUse event delegation when possible
Elements
Components
Drawing: GPU
No small advantage     Devices will get faster  Better hardware acceleration
SolutionKeep your DOM structures “light”
Light?Limited amount of advanced CSS3opacity & rgbaborder-radiusgradientstext-shadow & box-shadowsLimit the amount and dep...
Don’t go too deep Prevent unnecessary layouts
Animations: GPU
Good        Getting       Little enough       There        behind            Most AndroidiPhone 3GS+                 RIM  ...
SolutionOnly animate “light” DOM structures
Slide to List
Code Execution: Compiler
Not the usual suspects    CPU’s are actually fast enough   Javascript engines are powerful
So what is the problem?
JIT CompilerCompilation time is related to size of file that the method                         exists in
Complexity not relevantExtensive comments and documentation are
SolutionWrite complicated undocumented code
Actual solutionTest performance using minified and compressed code
JSBuilder 3Cross-OS packaging, concatenation & minification
Example .jsb3
Questions?
Performance Optimization for Sencha Touch
Performance Optimization for Sencha Touch
Performance Optimization for Sencha Touch
Performance Optimization for Sencha Touch
Upcoming SlideShare
Loading in …5
×

Performance Optimization for Sencha Touch

16,418 views

Published on

Mobile devices have very limited processing power compared to modern desktops. It's essential to keep performance optimization in mind when developing Touch applications. Here, we'll discuss how to keep your mobile web app fast and lightweight. We'll learn about such techniques as keeping your DOM slim, managing troublesome CSS3 properties, and other ways to keep your app sleek and responsive.

Published in: Technology

Performance Optimization for Sencha Touch

  1. 1. Performance Optimization for Sencha Touch by Tommy Maintz @tommymaintz
  2. 2. Problems DOM Events Drawing AnimationsCode execution
  3. 3. Device specific issues Limited hardware acceleration Translate3d
  4. 4. DOM: Memory (Size matters)
  5. 5. One small advantagePhones have a limited amount of screen estate
  6. 6. SolutionDestroy components that are not visible on the screen anymore
  7. 7. Cards
  8. 8. Modal Components
  9. 9. Events: Memory
  10. 10. SolutionUse our Event ManagerAutomatic removal of listenersDelegation for Touch eventsUse event delegation when possible
  11. 11. Elements
  12. 12. Components
  13. 13. Drawing: GPU
  14. 14. No small advantage Devices will get faster Better hardware acceleration
  15. 15. SolutionKeep your DOM structures “light”
  16. 16. Light?Limited amount of advanced CSS3opacity & rgbaborder-radiusgradientstext-shadow & box-shadowsLimit the amount and depth of DOM elements
  17. 17. Don’t go too deep Prevent unnecessary layouts
  18. 18. Animations: GPU
  19. 19. Good Getting Little enough There behind Most AndroidiPhone 3GS+ RIM 2.2 devices
  20. 20. SolutionOnly animate “light” DOM structures
  21. 21. Slide to List
  22. 22. Code Execution: Compiler
  23. 23. Not the usual suspects CPU’s are actually fast enough Javascript engines are powerful
  24. 24. So what is the problem?
  25. 25. JIT CompilerCompilation time is related to size of file that the method exists in
  26. 26. Complexity not relevantExtensive comments and documentation are
  27. 27. SolutionWrite complicated undocumented code
  28. 28. Actual solutionTest performance using minified and compressed code
  29. 29. JSBuilder 3Cross-OS packaging, concatenation & minification
  30. 30. Example .jsb3
  31. 31. Questions?

×