Performance Optimization for Ext GWT 3.0

•

0 j'aime•2,059 vues

Application performance is an important part of an application’s usability. This session will provide detailed information and tips to keep your applications running fast.

Technologie

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 ﬁles
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 deﬁned Linker for this
Simply inherit the PrecompressLinker module

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

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

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 ﬁrst page load
Less waiting time for the user

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

Same Looking, Less Containers

Wednesday, November 2, 2011

And This Has One More
Advantage!

Wednesday, November 2, 2011

Reduced Memory
Consumption

Wednesday, November 2, 2011

After, Same Functionality

Wednesday, November 2, 2011

Contenu connexe

Similaire à Performance Optimization for Ext GWT 3.0

This session will discuss the “TouchForums” mobile app, which is built with SenchaTouch and currently in development. The app combines features available in the Sencha forums and the support portal. In its current state, the app runs on Sencha Touch 1.1.1, but will be migrated to Sencha Touch 2.0 in the near future. From an architectural level the app is built using MVC, and incorporates history support and unit tests run via Jasmine/JsTestRunner.

Community Code: The TouchForums App

Sencha

Craig Walker is Chief Technology Officer and co-founder of small business accounting software provider Xero. Xero has over 50,000 customers in over 100 countries and Craig has recently relocated to San Francisco to start the US based office. Craig currently leads Xero’s software development technology strategy. He has a morbid obsession with JavaScript and not having to use any other language for development (much to the amusement of his colleagues). Craig and Xero have been keen evangelists of Sencha products having utilized Sencha JavaScript libraries across Xero’s entire product line. Craig’s most recent fun project was building Xero Touch, a Sencha Touch-based mobile version of Xero released for the web and into the Apple App Store (and soon to be launched for Android).

Community Code: Xero

Sencha

Dollars and Dates are Killing Agile

Chris Sterling

Building Touch Apps with Designer

Sencha

Caridy patino - node-js

StarTech Conference

Conquistando el Servidor con Node.JS

Caridy Patino

Sencha Touch is the industry’s first HTML5 mobile framework, and in v2 we’ve reworked the platform to make it faster to build apps, faster to get to market, and faster on all devices. Come and join Sencha in this session to learn about what’s changed, and how much more effective you can be using Sencha Touch 2. You’ll learn about the framework’s new native packaging capabilities, lighting fast Android performance, and host of other ways that Touch makes developing mobile apps easier than ever.

Introducing Sencha Touch 2

Sencha

A Look at the Future of HTML5

Tim Wright

Monitoring is easy, why are we so bad at it presentation

Theo Schlossnagle

A two-part journey through the recommended patterns for building complex, Model-View-Controller-centric applications with both Ext JS 4 and Sencha Touch. Ed Spencer leads the development of Ext JS and supporting projects. An expert with Ext JS and JavaScript in general and with several years experience with traditional server side frameworks, he has broad experience in API design and delivery. His passion is in crafting beautiful code that supports the world-class Sencha product line.

MVC In Depth, part 1

Sencha

E diz aí como você vai me medir que eu te digo como vou me comportar! Se isto é verdade, e sabendo que somos profissionais responsáveis e que gostamos do nosso trabalho, quem deveria definir como um time deve ser medido é o próprio time! Melhor ainda se as métricas aparecem dentro do time durante o dia a dia de trabalho e podem ser melhoradas conforme as semanas passam! Neste papo vamos falar sobre automação de testes, refactoring, integração contínua, entrega contínua e outras práticas legais. A inspiração vem do eXtreme Programming e do Getting Real. Let's Code!

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 ajudar times a se divertirem! por Daniel Wildt (http://danielwildt.com @dwildt) E diz aí como você vai me medir que eu te digo como vou me comportar! Se isto é verdade, e sabendo que somos profissionais responsáveis e que gostamos do nosso trabalho, quem deveria definir como um time deve ser medido é o próprio time! Melhor ainda se as métricas aparecem dentro do time durante o dia a dia de trabalho e podem ser melhoradas conforme as semanas passam! Neste papo vamos falar sobre automação de testes, refactoring, integração contínua, entrega contínua e outras práticas legais. A inspiração vem do eXtreme Programming e do Getting Real. E ah, ainda vai dar tempo de fazer um "mini Coding Dojo" na palestra! Let's Code!

Da métrica a diversão - Como as métricas no desenvolvimento de software podem...

Daniel Wildt

Deploying large payloads at scale

ramonvanalteren

Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum! In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here. What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include: * Validators * Preprocessors * Finding dead rules * Linting * CSS3 gradient tools * Performance measurement tools * Unit testing

CSS Power Tools

Nicole Sullivan

Clouds against the Floods (RubyConfBR2011)

Leonardo Borges

ThingDOC

Josef Průša

international PHP2011_ilia alshanetsky_Hidden Features of PHP

smueller_sandsmedia

JavaSE - The road forward

eug3n_cojocaru

Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)

jbellis

잘 알려지지 않은 Php 코드 활용하기

형우 안

Similaire à Performance Optimization for Ext GWT 3.0 (20)

Community Code: The TouchForums App

Community Code: Xero

Dollars and Dates are Killing Agile

Building Touch Apps with Designer

Caridy patino - node-js

Conquistando el Servidor con Node.JS

Introducing Sencha Touch 2

A Look at the Future of HTML5

Monitoring is easy, why are we so bad at it presentation

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

Deploying large payloads at scale

CSS Power Tools

Clouds against the Floods (RubyConfBR2011)

ThingDOC

international PHP2011_ilia alshanetsky_Hidden Features of PHP

JavaSE - The road forward

Cassandra 1.0 and the future of big data (Cassandra Tokyo 2011)

잘 알려지지 않은 Php 코드 활용하기

Plus de Sencha

You probably have an existing JavaScript application using components that you love, maybe a grid, some graphs, etc. Perhaps today you use Angular and your company is thinking about moving to React, or Vue, and with new frameworks appearing every week, who knows what is next. How do you bring along those great components you have been using? That is where Web Components fits in! In this session we will look at some popular enterprise components and their usage in Angular and React. Then we will look at the Web Components spec to use those existing components you know and love in any framework - including no framework at all!

Breathe New Life into Your Existing JavaScript Applications with Web Components

Sencha

Our latest release, Sencha Ext JS 6.6, includes several major enhancements as well as support for npm packaging and open tooling for exceptionally easy workflows that every JavaScript developer is familiar with. With open tooling, Ext JS developers now have powerful tooling to rapidly generate, build and update Ext JS applications. Read the blog post to learn more: https://www.sencha.com/blog/announcing-sencha-ext-js-6-6-with-open-tooling-ga/

Ext JS 6.6 Highlights

Sencha

Die Sicht auf große Datenmengen läßt sich in ExtJS auf zwei Wege darstellen – entweder durch Paging oder durch scrollen. Während beide Konzepte das selbe Ziel verfolgen, bringt die Implementierung eines Buffered Stores in ExtJS einige Hürden mit sich, die UI-Konzepte wie dynamisches Löschen oder Hinzufügen von Datensätzen verhindern. Diese Session gibt einen Einblick in den Aufbau eines BufferedStores und zeigt Ansätze, wie man mehr Dynamik in Grids bringen kann, die diesen Store verwenden.

Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...

Sencha

Learn how to use Ext JS and Cmd to deliver Progressive Web Applications to deliver the best of both web and mobile app experiences. Web apps can be found easily on the internet and every user is guaranteed access to the same and latest version of the application. Plus, mobile app capabilities, such as offline support and optimizing access to the underlying network using service workers, take the user experience to a whole new level.

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

Sencha Roadshow 2017: What's New in Sencha Test

Sencha

Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...

Sencha

JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. In this session, you'll see how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.

Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling

Sencha

Sencha Roadshow 2017: Sencha Best Practices: Coworkee App

Sencha

Sencha Roadshow 2017: Mobile First or Desktop First

Sencha

Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond

Sencha

User interfaces often utilize components such as grids and tables to help users browse and understand data. Today’s large data sets require sophisticated capabilities to ensure users can effectively comprehend data while remaining flexible and responsive. Building this functionality is time consuming, has integration and maintenance risks, and worst of all, distracts developers from the task at hand -- actually building the app. View the slides from our latest webinar to learn how the web’s most powerful data grid and GraphQL can help you deliver advanced functionality with minimal effort. View the recording here: https://www.brighttalk.com/webcast/11505/276417

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Sencha

In a recent study by Dimensional Research of 1,011 development and QA professionals, almost every survey respondent cited that application quality is important, with 84% believing it is very or critically important. Despite this, findings revealed that 94% of teams still face challenges when it comes to conducting adequate QA. View the presentation to learn why organizations must prioritize automated testing and QA practices to deliver high-quality applications and increase customer satisfaction.

Learn Key Insights from The State of Web Application Testing Research Report

Sencha

Learn about Sencha’s newest release, ExtReact: the most comprehensive set of components for React apps. Now you can quickly and easily add any of our 115+ professionally tested and supported components including grid, tree grid, pivot grid, charts, D3 visualizations, trees, calendar, buttons, menus and more to your React applications. With ExtReact, all of the components are designed to work together seamlessly which eliminates time-consuming integration work and reduces ongoing maintenance burdens. View this presentation to learn how to: - Build data-intensive, cross-platform web apps leveraging Sencha components and React. - Build immersive user engagement using layouts and adaptive design features. - Leverage material design and other themes to save time and effort. Modify or extend themes without writing a single line of code.

Introducing ExtReact: Adding Powerful Sencha Components to React Apps

Sencha

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Sencha

Ext JS provides easy-to-use charting components that satisfy common needs, but sometimes you want to deliver an exceptional, unique user experience. This presentation will discuss how Ext JS leverages the popular and extremely powerful D3 library to create sophisticated, data-driven visualizations. This functionality helps your users understand the story behind their data, so they can make informed decisions.

SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...

Sencha

LinkRest is an active project commissioned and open sourced by NHL under Apache 2.0 license. It was conceived specifically as the server-side counterpart to Ext JS, so it natively supports Ext JS rest proxy, including CRUD, grouping, sorting, filtering, and more. In this session, we'll review Ext JS protocol support. You'll also see extensions that allow the client to safely query the server for specific data and shape the response. We'll cover advanced features, including security, constraints, idempotent methods, and metadata service. We'll show demos and try to allow time for Q&A.

SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...

Sencha

SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps

Sencha

Ext JS Architecture Best Practices - Mitchell Simeons

Sencha

Developers are building mobile first, and then making progressive enhancements so the app is available on desktop. Should you be taking either a mobile or desktop first approach, or thinking about Universal Apps to deliver the right user experiences. This approach maximizes the shareability of code across these experiences. In this presentation, we’ll explore case studies that show the benefits of each approach.

SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...

Sencha

Plus de Sencha (20)

Breathe New Life into Your Existing JavaScript Applications with Web Components

Ext JS 6.6 Highlights

Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...

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: What's New in Sencha Test

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: Sencha Best Practices: Coworkee App

Sencha Roadshow 2017: Mobile First or Desktop First

Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Learn Key Insights from The State of Web Application Testing Research Report

Introducing ExtReact: Adding Powerful Sencha Components to React Apps

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: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...

SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps

Ext JS Architecture Best Practices - Mitchell Simeons

SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...

Dernier

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

MINDCTI Revenue Release Quarter One 2024

MIND CTI

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

Top 10 Most Downloaded Games on Play Store in 2024

SynarionITSolutions

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Rafal Los

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

Dernier (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Boost PC performance: How more available memory can improve productivity

Tata AIG General Insurance Company - Insurer Innovation Award 2024

MINDCTI Revenue Release Quarter One 2024

Data Cloud, More than a CDP by Matt Robison

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Strategies for Landing an Oracle DBA Job as a Fresher

Automating Google Workspace (GWS) & more with Apps Script

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Partners Life - Insurer Innovation Award 2024

presentation ICT roal in 21st century education

AWS Community Day CPH - Three problems of Terraform

Apidays New York 2024 - The value of a flexible API Management solution for O...

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Top 10 Most Downloaded Games on Play Store in 2024

How to Troubleshoot Apps for the Modern Connected Worker

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

Performance Optimization for Ext GWT 3.0

1. Wednesday, November 2, 2011

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

5. Better User Experience 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 ﬁles 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 deﬁned Linker for this Simply inherit the PrecompressLinker module By default in gzips your html, js and css ﬁles 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 ﬁrst 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

23. Demonstration 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

35. Demonstration Wednesday, November 2, 2011

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

37. Reduced Memory Consumption Wednesday, November 2, 2011

38. Before Wednesday, November 2, 2011

39. Before Wednesday, November 2, 2011

40. After, Same Functionality Wednesday, November 2, 2011

41. After, Same Functionality Wednesday, November 2, 2011