Performance Optimization for Ext GWT 3.0

3,535 views
3,374 views

Published on

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.

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
3,535
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
102
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Performance Optimization for Ext GWT 3.0

  1. 1. Wednesday, November 2, 2011
  2. 2. PERFORMANCE Sven Brunken sven@sencha.com @svenbrunkenWednesday, November 2, 2011
  3. 3. Overview Why optimize an application? What can you optimize? How to optimize it? QuestionsWednesday, November 2, 2011
  4. 4. Why Optimize An Application?Wednesday, November 2, 2011
  5. 5. Better User ExperienceWednesday, November 2, 2011
  6. 6. What Can You Optimize?Wednesday, November 2, 2011
  7. 7. What Can You Optimize? Application loading time Application performance Memory consumptionWednesday, November 2, 2011
  8. 8. But, How To Do It?Wednesday, November 2, 2011
  9. 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 startupWednesday, November 2, 2011
  10. 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 filesWednesday, November 2, 2011
  11. 11. How To Reduce The Amount of RPC Calls?Wednesday, November 2, 2011
  12. 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 overheadWednesday, November 2, 2011
  13. 13. 10 Requests At Page LoadWednesday, November 2, 2011
  14. 14. 10 Requests At Page LoadWednesday, November 2, 2011
  15. 15. 10 Requests At Page LoadWednesday, November 2, 2011
  16. 16. Extra Data With Each RequestWednesday, November 2, 2011
  17. 17. Extra Data With Each RequestWednesday, November 2, 2011
  18. 18. Why Not Sending The Data With the Initial Request?Wednesday, November 2, 2011
  19. 19. Advantages No further roundtrip required All data on the client with the first page load Less waiting time for the userWednesday, November 2, 2011
  20. 20. Extra Data With Each RequestWednesday, November 2, 2011
  21. 21. Extra Data With Each RequestWednesday, November 2, 2011
  22. 22. No More Request At Page LoadWednesday, November 2, 2011
  23. 23. DemonstrationWednesday, November 2, 2011
  24. 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. 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. 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. 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 neededWednesday, November 2, 2011
  28. 28. Widgets Are Expensive Do not use Widgets for everything They are expensive Try to use plain HTML where ever possibleWednesday, November 2, 2011
  29. 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 runsWednesday, November 2, 2011
  30. 30. Reduce The Widget Count Do not nest containers too deeply Only use the minimum amount of containers requiredWednesday, November 2, 2011
  31. 31. Too Many Not Required ContainersWednesday, November 2, 2011
  32. 32. Too Many Not Required ContainersWednesday, November 2, 2011
  33. 33. Same Looking, Less ContainersWednesday, November 2, 2011
  34. 34. Same Looking, Less ContainersWednesday, November 2, 2011
  35. 35. DemonstrationWednesday, November 2, 2011
  36. 36. And This Has One More Advantage!Wednesday, November 2, 2011
  37. 37. Reduced Memory ConsumptionWednesday, November 2, 2011
  38. 38. BeforeWednesday, November 2, 2011
  39. 39. BeforeWednesday, November 2, 2011
  40. 40. After, Same FunctionalityWednesday, November 2, 2011
  41. 41. After, Same FunctionalityWednesday, November 2, 2011
  42. 42. QuestionsWednesday, November 2, 2011
  43. 43. Thank You!Wednesday, November 2, 2011

×