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.

2. Performance Optimization
for Sencha Touch
by Tommy Maintz
@tommymaintz

3. Problems
DOM
Events
Drawing
Animations
Code execution

4. Device specific issues
Limited hardware acceleration
Translate3d

5. DOM: Memory
(Size matters)

6. One small advantage
Phones have a limited amount of screen estate

7. Solution
Destroy components that are not visible on the screen anymore

8. Cards

9. Modal Components

10. Events: Memory

11. Solution
Use our Event Manager
Automatic removal of listeners
Delegation for Touch events
Use event delegation when possible

12. Elements

13. Components

14. Drawing: GPU

15. No small advantage
Devices will get faster
Better hardware acceleration

16. Solution
Keep your DOM structures “light”

17. Light?
Limited amount of advanced CSS3
opacity & rgba
border-radius
gradients
text-shadow & box-shadows
Limit the amount and depth of DOM elements

18. Don’t go too deep
Prevent unnecessary layouts

21. Animations: GPU

22. Good Getting Little
enough There behind
Most Android
iPhone 3GS+ RIM
2.2 devices

23. Solution
Only animate “light” DOM structures

24. Slide to List

26. Code Execution: Compiler

27. Not the usual suspects
CPU’s are actually fast enough
Javascript engines are powerful

28. So what is the problem?

29. JIT Compiler
Compilation time is related to size of file that the method
exists in

30. Complexity not relevant
Extensive comments and documentation are

31. Solution
Write complicated undocumented code

32. Actual solution
Test performance using minified and compressed code

33. JSBuilder 3
Cross-OS packaging, concatenation & minification

34. Example .jsb3

35. Questions?