advanced performance tuning in ext gwt
DESCRIPTION
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.TRANSCRIPT
Ext GWTPerformance Tuning
DARRELL MEYER, SENCHA
Monday, November 29, 2010
OverviewWhat to Tune?
LoggingFirebug
SpeedTracerExample
Questions
Monday, November 29, 2010
Conference App
Monday, November 29, 2010
Ext GWT 2.2.1GWT 2.1
Java Persistence API (JPA)Google App Engine (GAE)
RequestFactoryGWT MVPDependency Injection with Gin
Download at http://dev.sencha.com/playpen/gxt/conference-app.zip
Technology Stack
Monday, November 29, 2010
Eclipse IDE for Java EE Developers (Helios 3.6.1)http://www.eclipse.org/downloads/
PluginsMaven Integration for Eclipsehttp://m2eclipse.sonatype.org/sites/m2e
Maven Integration for Eclipse WTP Integrationhttp://m2eclipse.sonatype.org/sites/m2e-extras
Google Eclipsehttp://code.google.com/eclipse/
IDE & Plugins
Monday, November 29, 2010
What To Tune?
Monday, November 29, 2010
RenderingExt GWT LayoutsSlow Java / JavaScript codeMemory consumptionHTTP RequestsData sizeServer-side performance
What to Tune?
Monday, November 29, 2010
Too many Layouts and nested LayoutsReplaces layouts with templates and HtmlContainer
Slow Layouts
Monday, November 29, 2010
Must understand what your code is doing an when it is being executedStep through your code to trace executions paths, do not assume
Slow Java / JavaScript
Monday, November 29, 2010
Must be careful of objects being kept in memoryMonitor memory usage throughout the application dev lifecycleProcess Explorer on Windows http://technet.microsoft.com/en-us/sysinternals/bb896653.aspx
Memory Consumption
Monday, November 29, 2010
Too many requests = bottlenecksMany browsers only allow 2 concurrent HTTP requestsAnalyze the requests your application is makingUse GWT ClientBundle and ImageResource where ever possibleUse Firebug with Firefox and SpeedTracer
Too Many HTTP Requests
Monday, November 29, 2010
Monitor the data being transferred to and from the serverSend the smallest amount of data possibleDo not sending an entire object graph
Too Much Data
Monday, November 29, 2010
Logging
Monday, November 29, 2010
LoggingEmulates java.util.loggingShare server and client code
Many logging handlersSystemLogHandlerDevelopmentModeLogHandlerConsoleLogHandlerFirebugLogHandlerSimpleRemoteLogHandler
Monday, November 29, 2010
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" />
Logging Configuration
Monday, November 29, 2010
Create loggers
private static Logger childLogger = Logger.getLogger("ParentLogger.Child"); private static Logger parentLogger = Logger.getLogger("ParentLogger"); private static Logger rootLogger = Logger.getLogger("");
Logging Usage
Monday, November 29, 2010
// 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); } }
Logging Usage
Monday, November 29, 2010
Logging Example
Monday, November 29, 2010
Firebug for Firefox
Monday, November 29, 2010
Firebug for Firefox
The must have tool for all GWT developersDOM inspection and manipulationProfiles JavaScript code helping you find hotspots in your codeNetwork monitorCompile in the “pretty” style so JavaScript is readable
Monday, November 29, 2010
Firebug ProfilerMonitor method calls and execution timesStep into problematic code
Monday, November 29, 2010
Firebug Network PanelMonitor all server side requestsPinpoint bottlenecks
Monday, November 29, 2010
SpeedTracer
Monday, November 29, 2010
Identify and fix speed problemsBoth server and client side supportChrome ExtensionNetwork Usage
SpeedTracer for Chrome
Monday, November 29, 2010
SpeedTracer Example
Monday, November 29, 2010
Questions?
Monday, November 29, 2010
Thanks!Twitter @darrellmeyer
Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License
Monday, November 29, 2010