SlideShare a Scribd company logo
Wednesday, November 2, 2011
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




Wednesday, November 2, 2011
Why Optimize An
                               Application?




Wednesday, November 2, 2011
Better User Experience




Wednesday, November 2, 2011
What Can You
                               Optimize?




Wednesday, November 2, 2011
What Can You Optimize?
       Application loading time
       Application performance
       Memory consumption




Wednesday, November 2, 2011
But, How To Do It?




Wednesday, November 2, 2011
Application Loading
       GZip your content
       Cache your content
       Remove not required files
       Obfuscate any external CSS and Javascript
       Reduce the amount of RPC calls on application startup




Wednesday, November 2, 2011
GZip Your Files
       GWT has a pre defined Linker for this
       Simply inherit the PrecompressLinker module

       By default in gzips your html, js and css files




Wednesday, November 2, 2011
How To Reduce The
                    Amount of RPC Calls?




Wednesday, November 2, 2011
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




Wednesday, November 2, 2011
10 Requests At Page Load

Wednesday, November 2, 2011
10 Requests At Page Load

Wednesday, November 2, 2011
10 Requests At Page Load

Wednesday, November 2, 2011
Extra Data With Each Request

Wednesday, November 2, 2011
Extra Data With Each Request

Wednesday, November 2, 2011
Why Not Sending The
                     Data With the Initial
                          Request?



Wednesday, November 2, 2011
Advantages
       No further roundtrip required
       All data on the client with the first page load
       Less waiting time for the user




Wednesday, November 2, 2011
Extra Data With Each Request

Wednesday, November 2, 2011
Extra Data With Each Request

Wednesday, November 2, 2011
No More Request At Page Load

Wednesday, November 2, 2011
Demonstration




Wednesday, November 2, 2011
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);




Wednesday, November 2, 2011
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>



Wednesday, November 2, 2011
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);
       }




Wednesday, November 2, 2011
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




Wednesday, November 2, 2011
Widgets Are Expensive
       Do not use Widgets for everything
       They are expensive
       Try to use plain HTML where ever possible




Wednesday, November 2, 2011
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




Wednesday, November 2, 2011
Reduce The Widget Count
       Do not nest containers too deeply
       Only use the minimum amount of containers required




Wednesday, November 2, 2011
Too Many Not Required Containers

Wednesday, November 2, 2011
Too Many Not Required Containers

Wednesday, November 2, 2011
Same Looking, Less Containers

Wednesday, November 2, 2011
Same Looking, Less Containers

Wednesday, November 2, 2011
Demonstration




Wednesday, November 2, 2011
And This Has One More
                    Advantage!




Wednesday, November 2, 2011
Reduced Memory
                               Consumption




Wednesday, November 2, 2011
Before

Wednesday, November 2, 2011
Before

Wednesday, November 2, 2011
After, Same Functionality

Wednesday, November 2, 2011
After, Same Functionality

Wednesday, November 2, 2011
Questions




Wednesday, November 2, 2011
Thank You!




Wednesday, November 2, 2011

More Related Content

Similar to Performance Optimization for Ext GWT 3.0

Community Code: The TouchForums App
Community Code: The TouchForums AppCommunity Code: The TouchForums App
Community Code: The TouchForums App
Sencha
 
Community Code: Xero
Community Code: XeroCommunity Code: Xero
Community Code: Xero
Sencha
 
Dollars and Dates are Killing Agile
Dollars and Dates are Killing AgileDollars and Dates are Killing Agile
Dollars and Dates are Killing Agile
Chris Sterling
 
Building Touch Apps with Designer
Building Touch Apps with DesignerBuilding Touch Apps with Designer
Building Touch Apps with Designer
Sencha
 
Caridy patino - node-js
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
StarTech Conference
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
Caridy Patino
 
Introducing Sencha Touch 2
Introducing Sencha Touch 2Introducing Sencha Touch 2
Introducing Sencha Touch 2
Sencha
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
Tim Wright
 
Monitoring is easy, why are we so bad at it presentation
Monitoring is easy, why are we so bad at it  presentationMonitoring is easy, why are we so bad at it  presentation
Monitoring is easy, why are we so bad at it presentation
Theo Schlossnagle
 
MVC In Depth, part 1
MVC In Depth, part 1MVC In Depth, part 1
MVC In Depth, part 1
Sencha
 
Da métrica a diversão - Como as métricas no desenvolvimento de software podem...
Da métrica a diversão - Como as métricas no desenvolvimento de software podem...Da métrica a diversão - Como as métricas no desenvolvimento de software podem...
Da métrica a diversão - Como as métricas no desenvolvimento de software podem...
Daniel Wildt
 
Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...
Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...
Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...
Daniel Wildt
 
Deploying large payloads at scale
Deploying large payloads at scaleDeploying large payloads at scale
Deploying large payloads at scale
ramonvanalteren
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
Nicole Sullivan
 
Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011) Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011)
Leonardo Borges
 
ThingDOC
ThingDOCThingDOC
ThingDOC
Josef Průša
 
international PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHPinternational PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHP
smueller_sandsmedia
 
JavaSE - The road forward
JavaSE - The road forwardJavaSE - The road forward
JavaSE - The road forward
eug3n_cojocaru
 
CENDI Presentation on What's going on with Government Linked Data
CENDI Presentation on What's going on with Government Linked DataCENDI Presentation on What's going on with Government Linked Data
CENDI Presentation on What's going on with Government Linked Data
Bernadette Hyland-Wood
 
Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)
Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)
Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)
jbellis
 

Similar to Performance Optimization for Ext GWT 3.0 (20)

Community Code: The TouchForums App
Community Code: The TouchForums AppCommunity Code: The TouchForums App
Community Code: The TouchForums App
 
Community Code: Xero
Community Code: XeroCommunity Code: Xero
Community Code: Xero
 
Dollars and Dates are Killing Agile
Dollars and Dates are Killing AgileDollars and Dates are Killing Agile
Dollars and Dates are Killing Agile
 
Building Touch Apps with Designer
Building Touch Apps with DesignerBuilding Touch Apps with Designer
Building Touch Apps with Designer
 
Caridy patino - node-js
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
 
Introducing Sencha Touch 2
Introducing Sencha Touch 2Introducing Sencha Touch 2
Introducing Sencha Touch 2
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Monitoring is easy, why are we so bad at it presentation
Monitoring is easy, why are we so bad at it  presentationMonitoring is easy, why are we so bad at it  presentation
Monitoring is easy, why are we so bad at it presentation
 
MVC In Depth, part 1
MVC In Depth, part 1MVC In Depth, part 1
MVC In Depth, part 1
 
Da métrica a diversão - Como as métricas no desenvolvimento de software podem...
Da métrica a diversão - Como as métricas no desenvolvimento de software podem...Da métrica a diversão - Como as métricas no desenvolvimento de software podem...
Da métrica a diversão - Como as métricas no desenvolvimento de software podem...
 
Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...
Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...
Da métrica a diversão! Como as métricas no desenvolvimento de software podem ...
 
Deploying large payloads at scale
Deploying large payloads at scaleDeploying large payloads at scale
Deploying large payloads at scale
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011) Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011)
 
ThingDOC
ThingDOCThingDOC
ThingDOC
 
international PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHPinternational PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHP
 
JavaSE - The road forward
JavaSE - The road forwardJavaSE - The road forward
JavaSE - The road forward
 
CENDI Presentation on What's going on with Government Linked Data
CENDI Presentation on What's going on with Government Linked DataCENDI Presentation on What's going on with Government Linked Data
CENDI Presentation on What's going on with Government Linked Data
 
Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)
Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)
Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)
 

More from Sencha

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
Sencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
Sencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
Sencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Sencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
Sencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Sencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
Sencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
Sencha
 

More from Sencha (20)

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
 

Recently uploaded

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 

Recently uploaded (20)

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 

Performance Optimization for Ext GWT 3.0

  • 2. PERFORMANCE Sven Brunken sven@sencha.com @svenbrunken Wednesday, November 2, 2011
  • 3. Overview Why optimize an application? What can you optimize? How to optimize it? Questions Wednesday, November 2, 2011
  • 4. Why Optimize An Application? Wednesday, November 2, 2011
  • 6. What Can You Optimize? Wednesday, November 2, 2011
  • 7. What Can You Optimize? Application loading time Application performance Memory consumption Wednesday, November 2, 2011
  • 8. But, How To Do It? Wednesday, November 2, 2011
  • 9. Application Loading GZip your content Cache your content Remove not required files Obfuscate any external CSS and Javascript Reduce the amount of RPC calls on application startup Wednesday, November 2, 2011
  • 10. GZip Your Files GWT has a pre defined Linker for this Simply inherit the PrecompressLinker module By default in gzips your html, js and css files Wednesday, November 2, 2011
  • 11. How To Reduce The Amount of RPC Calls? Wednesday, November 2, 2011
  • 12. 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 Wednesday, November 2, 2011
  • 13. 10 Requests At Page Load Wednesday, November 2, 2011
  • 14. 10 Requests At Page Load Wednesday, November 2, 2011
  • 15. 10 Requests At Page Load Wednesday, November 2, 2011
  • 16. Extra Data With Each Request Wednesday, November 2, 2011
  • 17. Extra Data With Each Request Wednesday, November 2, 2011
  • 18. Why Not Sending The Data With the Initial Request? Wednesday, November 2, 2011
  • 19. Advantages No further roundtrip required All data on the client with the first page load Less waiting time for the user Wednesday, November 2, 2011
  • 20. Extra Data With Each Request Wednesday, November 2, 2011
  • 21. Extra Data With Each Request Wednesday, November 2, 2011
  • 22. No More Request At Page Load Wednesday, November 2, 2011
  • 24. 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); Wednesday, November 2, 2011
  • 25. 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> Wednesday, November 2, 2011
  • 26. 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); } Wednesday, November 2, 2011
  • 27. 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 Wednesday, November 2, 2011
  • 28. Widgets Are Expensive Do not use Widgets for everything They are expensive Try to use plain HTML where ever possible Wednesday, November 2, 2011
  • 29. 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 Wednesday, November 2, 2011
  • 30. Reduce The Widget Count Do not nest containers too deeply Only use the minimum amount of containers required Wednesday, November 2, 2011
  • 31. Too Many Not Required Containers Wednesday, November 2, 2011
  • 32. Too Many Not Required Containers Wednesday, November 2, 2011
  • 33. Same Looking, Less Containers Wednesday, November 2, 2011
  • 34. Same Looking, Less Containers Wednesday, November 2, 2011
  • 36. And This Has One More Advantage! Wednesday, November 2, 2011
  • 37. Reduced Memory Consumption Wednesday, November 2, 2011