Performance Optimization for Ext GWT 3.0

PERFORMANCE
Sven Brunken

sven@sencha.com @svenbrunken

Wednesday, November 2, 2011

Overview
Why optimize an application?
What can you optimize?
How to optimize it?
Questions


Why Optimize An
Application?


Better User Experience


What Can You
Optimize?


What Can You Optimize?
Application loading time
Application performance
Memory consumption


But, How To Do It?


Application Loading
GZip your content
Cache your content
Remove not required ﬁles
Obfuscate any external CSS and Javascript
Reduce the amount of RPC calls on application startup


GZip Your Files
GWT has a pre deﬁned Linker for this
Simply inherit the PrecompressLinker module

By default in gzips your html, js and css ﬁles


How To Reduce The
Amount of RPC Calls?


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


10 Requests At Page Load


Extra Data With Each Request


Why Not Sending The
Data With the Initial
Request?


Advantages
No further roundtrip required
All data on the client with the ﬁrst page load
Less waiting time for the user


No More Request At Page Load


Demonstration


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);


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>


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);
}


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


Widgets Are Expensive
Do not use Widgets for everything
They are expensive
Try to use plain HTML where ever possible


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


Reduce The Widget Count
Do not nest containers too deeply
Only use the minimum amount of containers required


Too Many Not Required Containers


Same Looking, Less Containers


And This Has One More
Advantage!


Reduced Memory
Consumption


Before


After, Same Functionality


Questions


Thank You!


Performance Optimization for Ext GWT 3.0

More Related Content

Similar to Performance Optimization for Ext GWT 3.0

More from Sencha

Recently uploaded

Performance Optimization for Ext GWT 3.0