Advanced Performance Tuning in Ext GWT

Ext GWT
Performance Tuning

DARRELL MEYER, SENCHA

Monday, November 29, 2010

Overview
What to Tune?
Logging
Firebug
SpeedTracer
Example
Questions


Conference App


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.zip


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/


What To Tune?


What to Tune?
Rendering
Ext GWT Layouts
Slow Java / JavaScript code
Memory consumption
HTTP Requests
Data size
Server-side performance


Slow Layouts
Too many Layouts and nested Layouts
Replaces layouts with templates and HtmlContainer


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 assume


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.aspx


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 SpeedTracer


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 graph


Logging


Logging
Emulates java.util.logging
Share server and client code

Many logging handlers
SystemLogHandler
DevelopmentModeLogHandler
ConsoleLogHandler
FirebugLogHandler
SimpleRemoteLogHandler


Logging Conﬁguration
Inherit logging module
<inherits name='com.google.gwt.logging.Logging' />

Conﬁgure 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 Usage
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
// 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 Example


Firebug for Firefox


Firebug for Firefox

The must have tool for all GWT developers
DOM inspection and manipulation
Proﬁles JavaScript code helping you ﬁnd hotspots in your code
Network monitor
Compile in the “pretty” style so JavaScript is readable


Firebug Proﬁler
Monitor method calls and execution times
Step into problematic code


Firebug Network Panel
Monitor all server side requests
Pinpoint bottlenecks


SpeedTracer


SpeedTracer for Chrome
Identify and ﬁx speed problems
Both server and client side support
Chrome Extension
Network Usage


SpeedTracer Example


Questions?


Thanks!
Twitter @darrellmeyer

Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License


Advanced Performance Tuning in Ext GWT

More Related Content

What's hot

Similar to Advanced Performance Tuning in Ext GWT

More from Sencha

Recently uploaded

Advanced Performance Tuning in Ext GWT