Application performance is an important part of an application’s usability. This session will provide detailed information and tips to keep your applications running fast.

1. Wednesday, November 2, 2011

2. PERFORMANCE
Sven Brunken
sven@sencha.com @svenbrunken
Wednesday, November 2, 2011

3. Overview
Why optimize an application?
What can you optimize?
How to optimize it?
Questions
Wednesday, November 2, 2011

4. Why Optimize An
Application?
Wednesday, November 2, 2011

5. Better User Experience
Wednesday, November 2, 2011

6. What Can You
Optimize?
Wednesday, November 2, 2011

7. What Can You Optimize?
Application loading time
Application performance
Memory consumption
Wednesday, November 2, 2011

8. But, How To Do It?
Wednesday, November 2, 2011

9. Application Loading
GZip your content
Cache your content
Remove not required files
Obfuscate any external CSS and Javascript
Reduce the amount of RPC calls on application startup
Wednesday, November 2, 2011

10. GZip Your Files
GWT has a pre defined Linker for this
Simply inherit the PrecompressLinker module
By default in gzips your html, js and css files
Wednesday, November 2, 2011

11. How To Reduce The
Amount of RPC Calls?
Wednesday, November 2, 2011

12. How To Reduce It?
Applications require to load multiple initial data
Each load makes a new round trip to the server
Each request contains a huge amount of data
And there is the HTTP protocol overhead
Wednesday, November 2, 2011

13. 10 Requests At Page Load
Wednesday, November 2, 2011

14. 10 Requests At Page Load
Wednesday, November 2, 2011

15. 10 Requests At Page Load
Wednesday, November 2, 2011

16. Extra Data With Each Request
Wednesday, November 2, 2011

17. Extra Data With Each Request
Wednesday, November 2, 2011

18. Why Not Sending The
Data With the Initial
Request?
Wednesday, November 2, 2011

19. Advantages
No further roundtrip required
All data on the client with the first page load
Less waiting time for the user
Wednesday, November 2, 2011

20. Extra Data With Each Request
Wednesday, November 2, 2011

21. Extra Data With Each Request
Wednesday, November 2, 2011

22. No More Request At Page Load
Wednesday, November 2, 2011

23. Demonstration
Wednesday, November 2, 2011

24. How To Do It?
Serialize the data manually
String value = "Lorem ipsum dolor sit amet, consectetur ...";
ServerSerializationStreamWriter writer = new ServerSerializationStreamWriter
(RPC.getDefaultSerializationPolicy());
writer.prepareToWrite();
writer.serializeValue(value, String.class);
Wednesday, November 2, 2011

25. Put It Into The Main Page
We put the Data for all our calls into a Javascript Object
<script>
var dictionary = {
<%
String value = "Lorem ipsum dolor sit amet, consectetur ...";
String[] methods = {"A","B","C","D","E","F","G","H","I","J"};
for (int i = 0; i < methods.length; i++) {
ServerSerializationStreamWriter writer = ...
out.print(""call"+methods[i]+"": ""+writer.toString().replaceAll("","
" ).replaceAll(""",""" )+""");
if(i<methods.length-1) {
out.print(",");
}
}
%>
};
</script>
Wednesday, November 2, 2011

26. Client Side Is Reading It
Taking advantage of the SerializationStreamFactoy class
Using the Dictionary to access our Javascript Object
SerializationStreamFactory factory = GWT
.create(PerformanceService.class);
Dictionary d = Dictionary.getDictionary("dictionary");
try {
SerializationStreamReader r = null;
r = factory.createStreamReader(d.get("callA"));
String v1 = r.readString();
...
} catch (SerializationException e) {
throw new RuntimeException(e);
}
Wednesday, November 2, 2011

27. Application Performance
Do not try to solve everything with Widgets
Do not run complicated logic on the client
Do not use more Widgets than required
Do not create Widgets until needed
Wednesday, November 2, 2011

28. Widgets Are Expensive
Do not use Widgets for everything
They are expensive
Try to use plain HTML where ever possible
Wednesday, November 2, 2011

29. Only Simple Logic
Do not try to solve complicated logic on the client
Make a server round trip
Do not run code that is not required
Analyze your code to see if really only the required runs
Wednesday, November 2, 2011

30. Reduce The Widget Count
Do not nest containers too deeply
Only use the minimum amount of containers required
Wednesday, November 2, 2011

31. Too Many Not Required Containers
Wednesday, November 2, 2011

32. Too Many Not Required Containers
Wednesday, November 2, 2011

33. Same Looking, Less Containers
Wednesday, November 2, 2011

34. Same Looking, Less Containers
Wednesday, November 2, 2011

35. Demonstration
Wednesday, November 2, 2011

36. And This Has One More
Advantage!
Wednesday, November 2, 2011

37. Reduced Memory
Consumption
Wednesday, November 2, 2011

38. Before
Wednesday, November 2, 2011

39. Before
Wednesday, November 2, 2011

40. After, Same Functionality
Wednesday, November 2, 2011

41. After, Same Functionality
Wednesday, November 2, 2011

42. Questions
Wednesday, November 2, 2011

43. Thank You!
Wednesday, November 2, 2011