Ext GWT                            Performance Tuning                             DARRELL MEYER, SENCHAMonday, November 29...
Overview                            What to Tune?                               Logging                               Fire...
Conference AppMonday, November 29, 2010
Technology Stack       Ext GWT 2.2.1       GWT 2.1       Java Persistence API (JPA)       Google App Engine (GAE)       Re...
IDE & Plugins       Eclipse IDE for Java EE Developers (Helios 3.6.1)       http://www.eclipse.org/downloads/       Plugin...
What To Tune?Monday, November 29, 2010
What to Tune?       Rendering       Ext GWT Layouts       Slow Java / JavaScript code       Memory consumption       HTTP ...
Slow Layouts       Too many Layouts and nested Layouts       Replaces layouts with templates and HtmlContainerMonday, Nove...
Slow Java / JavaScript       Must understand what your code is doing an when it is being executed       Step through your ...
Memory Consumption       Must be careful of objects being kept in memory       Monitor memory usage throughout the applica...
Too Many HTTP Requests       Too many requests = bottlenecks       Many browsers only allow 2 concurrent HTTP requests    ...
Too Much Data       Monitor the data being transferred to and from the server       Send the smallest amount of data possi...
LoggingMonday, November 29, 2010
Logging      Emulates java.util.logging      Share server and client code      Many logging handlers      SystemLogHandler...
Logging Configuration       Inherit logging module          <inherits name=com.google.gwt.logging.Logging />       Configure...
Logging Usage       Create loggers                private static Logger childLogger = Logger.getLogger("ParentLogger.Child...
Logging Usage                 // Change the level of the logger             @UiHandler("levelTextBox")             void ha...
Logging ExampleMonday, November 29, 2010
Firebug for FirefoxMonday, November 29, 2010
Firebug for Firefox       The must have tool for all GWT developers       DOM inspection and manipulation       Profiles Ja...
Firebug Profiler       Monitor method calls and execution times       Step into problematic codeMonday, November 29, 2010
Firebug Network Panel       Monitor all server side requests       Pinpoint bottlenecksMonday, November 29, 2010
SpeedTracerMonday, November 29, 2010
SpeedTracer for Chrome       Identify and fix speed problems       Both server and client side support       Chrome Extensi...
SpeedTracer ExampleMonday, November 29, 2010
Questions?Monday, November 29, 2010
Thanks!                            Twitter @darrellmeyer        Portions of this presentation from the GWT documentation l...
Upcoming SlideShare
Loading in...5
×

Advanced Performance Tuning in Ext GWT

3,164

Published on

Application performance is critical to a usable user interface. Learn about the tools and techniques that Ext GWT developers can use to tune client-side code. Get detailed instructions on how to use the available performance profiling tools including Speed Tracer, Firebug, and Visual Studio.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,164
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
73
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Advanced Performance Tuning in Ext GWT

  1. 1. Ext GWT Performance Tuning DARRELL MEYER, SENCHAMonday, November 29, 2010
  2. 2. Overview What to Tune? Logging Firebug SpeedTracer Example QuestionsMonday, November 29, 2010
  3. 3. Conference AppMonday, November 29, 2010
  4. 4. Technology Stack Ext GWT 2.2.1 GWT 2.1 Java Persistence API (JPA) Google App Engine (GAE) RequestFactory GWT MVP Dependency Injection with Gin Download at http://dev.sencha.com/playpen/gxt/conference-app.zipMonday, November 29, 2010
  5. 5. IDE & Plugins Eclipse IDE for Java EE Developers (Helios 3.6.1) http://www.eclipse.org/downloads/ Plugins Maven Integration for Eclipse http://m2eclipse.sonatype.org/sites/m2e Maven Integration for Eclipse WTP Integration http://m2eclipse.sonatype.org/sites/m2e-extras Google Eclipse http://code.google.com/eclipse/Monday, November 29, 2010
  6. 6. What To Tune?Monday, November 29, 2010
  7. 7. What to Tune? Rendering Ext GWT Layouts Slow Java / JavaScript code Memory consumption HTTP Requests Data size Server-side performanceMonday, November 29, 2010
  8. 8. Slow Layouts Too many Layouts and nested Layouts Replaces layouts with templates and HtmlContainerMonday, November 29, 2010
  9. 9. Slow Java / JavaScript Must understand what your code is doing an when it is being executed Step through your code to trace executions paths, do not assumeMonday, November 29, 2010
  10. 10. Memory Consumption Must be careful of objects being kept in memory Monitor memory usage throughout the application dev lifecycle Process Explorer on Windows http://technet.microsoft.com/en-us/sysinternals/bb896653.aspxMonday, November 29, 2010
  11. 11. Too Many HTTP Requests Too many requests = bottlenecks Many browsers only allow 2 concurrent HTTP requests Analyze the requests your application is making Use GWT ClientBundle and ImageResource where ever possible Use Firebug with Firefox and SpeedTracerMonday, November 29, 2010
  12. 12. Too Much Data Monitor the data being transferred to and from the server Send the smallest amount of data possible Do not sending an entire object graphMonday, November 29, 2010
  13. 13. LoggingMonday, November 29, 2010
  14. 14. Logging Emulates java.util.logging Share server and client code Many logging handlers SystemLogHandler DevelopmentModeLogHandler ConsoleLogHandler FirebugLogHandler SimpleRemoteLogHandlerMonday, November 29, 2010
  15. 15. Logging Configuration Inherit logging module <inherits name=com.google.gwt.logging.Logging /> Configure Settings <set-property name="gwt.logging.logLevel" value="SEVERE" /> <set-property name="gwt.logging.enabled" value="FALSE" /> <set-property name="gwt.logging.consoleHandler" value="DISABLED" />Monday, November 29, 2010
  16. 16. Logging Usage Create loggers private static Logger childLogger = Logger.getLogger("ParentLogger.Child"); private static Logger parentLogger = Logger.getLogger("ParentLogger"); private static Logger rootLogger = Logger.getLogger("");Monday, November 29, 2010
  17. 17. Logging Usage // Change the level of the logger @UiHandler("levelTextBox") void handleLevelClick(ChangeEvent e) { Level level = Level.parse(levelTextBox.getItemText( levelTextBox.getSelectedIndex())); logger.log(Level.SEVERE, "Setting level to: " + level.getName()); logger.setLevel(level); } // Log a message to the logger @UiHandler("logButton") void handleLogClick(ClickEvent e) { Level level = Level.parse(logTextBox.getItemText( logTextBox.getSelectedIndex())); logger.log(level, "This is a client log message"); } // Trigger an exception and log it to the logger @UiHandler("exceptionButton") void handleExceptionClick(ClickEvent e) { try { Level n = null; n.getName(); } catch (NullPointerException ex) { logger.log(Level.SEVERE, "Null Exception Hit", ex); } }Monday, November 29, 2010
  18. 18. Logging ExampleMonday, November 29, 2010
  19. 19. Firebug for FirefoxMonday, November 29, 2010
  20. 20. Firebug for Firefox The must have tool for all GWT developers DOM inspection and manipulation Profiles JavaScript code helping you find hotspots in your code Network monitor Compile in the “pretty” style so JavaScript is readableMonday, November 29, 2010
  21. 21. Firebug Profiler Monitor method calls and execution times Step into problematic codeMonday, November 29, 2010
  22. 22. Firebug Network Panel Monitor all server side requests Pinpoint bottlenecksMonday, November 29, 2010
  23. 23. SpeedTracerMonday, November 29, 2010
  24. 24. SpeedTracer for Chrome Identify and fix speed problems Both server and client side support Chrome Extension Network UsageMonday, November 29, 2010
  25. 25. SpeedTracer ExampleMonday, November 29, 2010
  26. 26. Questions?Monday, November 29, 2010
  27. 27. Thanks! Twitter @darrellmeyer Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 LicenseMonday, November 29, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×