performance optimization for ext gwt 3.0

Wednesday, November 2, 2011

Sven Brunken

[email protected] @svenbrunken


mailto:[email protected]

mailto:[email protected]

OverviewWhy 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 timeApplication performanceMemory consumption


But, How To Do It?


Application LoadingGZip your contentCache your contentRemove not required filesObfuscate any external CSS and JavascriptReduce the amount of RPC calls on application startup


GZip Your FilesGWT has a pre defined Linker for thisSimply inherit the PrecompressLinker module

By default in gzips your html, js and css files


How To Reduce The Amount of RPC Calls?


How To Reduce It?Applications require to load multiple initial dataEach load makes a new round trip to the serverEach request contains a huge amount of dataAnd 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?


AdvantagesNo further roundtrip requiredAll data on the client with the first page loadLess waiting time for the user


Extra Data With Each Request


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 PageWe 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 ItTaking advantage of the SerializationStreamFactoy classUsing 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 PerformanceDo not try to solve everything with WidgetsDo not run complicated logic on the clientDo not use more Widgets than requiredDo not create Widgets until needed


Widgets Are ExpensiveDo not use Widgets for everythingThey are expensiveTry to use plain HTML where ever possible


Only Simple LogicDo not try to solve complicated logic on the clientMake a server round tripDo not run code that is not requiredAnalyze your code to see if really only the required runs


Reduce The Widget CountDo not nest containers too deeplyOnly use the minimum amount of containers required


Too Many Not Required Containers


Same Looking, Less Containers


Demonstration


And This Has One More Advantage!


Reduced Memory Consumption


Before


After, Same Functionality


Questions


Thank You!


performance optimization for ext gwt 3.0

Technology

extra data

page loadwednesday

multiple initial data

application startupwednesday

required runswednesday

application loading

main page

expensive try