Google Web Toolkit and client-side optimization
the slower loading and running a web application, the less users will want to use it. Google understands this like no other, so they created Web Toolkit focuses on the speed obtained with its help in a web application.
The article talks about what techniques the client optimization used in GWT.
Each browser has its own peculiarities, which in a known manner complicates the life of the developer. So, for example, to obtain the XMLHttpRequest object (which is required for performing asynchronous requests to the server from JavaScript) in IE6, have to use ActiveXObject:
All other (non-IE) browsers to provide native support for the XMLHttpRequest object:
Usually (the way the majority of JavaScript libraries) in these situations, the web application include all any browser on dependent implementation, and each browser will use only one of them, choosing her progress, that is, after you have downloaded and disassembled including not need implementation.
Google Web Toolkit is used a great (in all senses) solution: for each browser is going to have a separate version of a web application called permutative. Each permutate contains everything you need to work only in one browser, so, for example, "fire Fox" will never have to download and parse the JavaScript or CSS is specific to IE.
To expedite the download of web applications, JavaScript, and CSS usually minimize, for example, using YUI Compressor, which is due to the removal of whitespace and other optional structures, as well as the result of obfuscation, greatly reduces their size.
Google Web Toolkit also performs minimization and obfuscation, but to the input of the minimizer comes JavaScript, not written by man, and the result of Java-to-JavaScript compiler. The compiler safely removes unused code, methods, optimizes polymorphic relationships, evaluates constant expressions, and makes much more, resulting in optimized (size and speed) of JavaScript.
A small (primitive) example:
At compile time CircleMath be deleted, its static methods will be replaced by inline inserts, and mathematical expressions are optimized. The result will be like this JavaScript:
All modern browsers support compression, which (when properly configured web server) allows to significantly reduce the size of transmitted data. Particularly well-compressed HTML, CSS and JavaScript, decreasing on average 75%.
These largely depend on the data, the results seemed unsatisfactory engineers at Google, so they modified the obfuscator included with the Google Web Toolkit so that the resulting output obfuscated code always compressed with Gzip as much as possible.
To understand how this works, let's compress using the GNU Gzip two lines:
You can see that both strings consist of the same number of matching symbols and only differ in the order of some of them, thus after compression of the first line is not reduced either in bytes, while the second will be 3 bytes shorter. Similarly, if you change the Declaration order of functions in JavaScript, so that duplicate code was in one "sliding window", the script will shrink stronger than with a random order function declarations.
CSS sprites and embedded images help reduce the number of server requests needed to load the interface graphics of a web application. In most cases, could be limited some embedded images, but since they are not supported by some of the still widely-used versions of IE, it is necessary to apply both techniques.
To build the user interface Google Web Toolkit allows you to use familiar technologies like HTML, CSS and some extended syntax which helps without any extra efforts and knowledge to solve the problem of providing cross-browser optimization upload images:
During Assembly of the web application, including such UI template 1.png and 2.png will be merged into a single image that will be used in permutation for IE6 and IE7 via CSS Sprites. For all the rest of permutatio the original image will be embedded in data URLS. In both cases all the necessary properties are added to CSS classes image1 and image2 automatically.
With the increase of the functionality of a web application inevitably grows, the size of permutate, and accordingly increases the time required to download each of them. There may come a time when the "cold start" (browser cache empty), even with all possible optimizations will take unacceptably long time.
In this case the Google Web Toolkit provides the ability to split a web application into several separately loadable modules. Thus the main functions of a large application can be made available to the user immediately after loading a small start-up module, and the other that provides additional functionality to load modules as needed. The modules are created and loaded automatically, the developer need only specify the split point.
Using modules, developers of Google Wave could bring the average loading time of his creation to a few seconds, although the full size of this "monster" is equal to about 3 MB.
Article based on information from habrahabr.ru
The article talks about what techniques the client optimization used in GWT.
Separate app version for each browser
Each browser has its own peculiarities, which in a known manner complicates the life of the developer. So, for example, to obtain the XMLHttpRequest object (which is required for performing asynchronous requests to the server from JavaScript) in IE6, have to use ActiveXObject:
var xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
All other (non-IE) browsers to provide native support for the XMLHttpRequest object:
var xhr = new window.XMLHttpRequest();
Usually (the way the majority of JavaScript libraries) in these situations, the web application include all any browser on dependent implementation, and each browser will use only one of them, choosing her progress, that is, after you have downloaded and disassembled including not need implementation.
Google Web Toolkit is used a great (in all senses) solution: for each browser is going to have a separate version of a web application called permutative. Each permutate contains everything you need to work only in one browser, so, for example, "fire Fox" will never have to download and parse the JavaScript or CSS is specific to IE.
Optimization, minimization and obfuscation
To expedite the download of web applications, JavaScript, and CSS usually minimize, for example, using YUI Compressor, which is due to the removal of whitespace and other optional structures, as well as the result of obfuscation, greatly reduces their size.
Google Web Toolkit also performs minimization and obfuscation, but to the input of the minimizer comes JavaScript, not written by man, and the result of Java-to-JavaScript compiler. The compiler safely removes unused code, methods, optimizes polymorphic relationships, evaluates constant expressions, and makes much more, resulting in optimized (size and speed) of JavaScript.
A small (primitive) example:
public class CircleMath {
public static double getArea(double radius) {
return Math.PI * radius * radius;
}
public static double getCircumference(double radius) {
return Math.PI * radius * 2;
}
}
...
double a = CircleMath.getArea(7.5);
double c = CircleMath.getCircumference(radius);
At compile time CircleMath be deleted, its static methods will be replaced by inline inserts, and mathematical expressions are optimized. The result will be like this JavaScript:
var a = 176.714586788, c = 6.283185308 * radius;
All modern browsers support compression, which (when properly configured web server) allows to significantly reduce the size of transmitted data. Particularly well-compressed HTML, CSS and JavaScript, decreasing on average 75%.
These largely depend on the data, the results seemed unsatisfactory engineers at Google, so they modified the obfuscator included with the Google Web Toolkit so that the resulting output obfuscated code always compressed with Gzip as much as possible.
To understand how this works, let's compress using the GNU Gzip two lines:
a b c a b c a b c a b c a b c a b c
a a a a a a b b b b b b c c c c c c
You can see that both strings consist of the same number of matching symbols and only differ in the order of some of them, thus after compression of the first line is not reduced either in bytes, while the second will be 3 bytes shorter. Similarly, if you change the Declaration order of functions in JavaScript, so that duplicate code was in one "sliding window", the script will shrink stronger than with a random order function declarations.
CSS sprites and inline images (data:URL)
CSS sprites and embedded images help reduce the number of server requests needed to load the interface graphics of a web application. In most cases, could be limited some embedded images, but since they are not supported by some of the still widely-used versions of IE, it is necessary to apply both techniques.
To build the user interface Google Web Toolkit allows you to use familiar technologies like HTML, CSS and some extended syntax which helps without any extra efforts and knowledge to solve the problem of providing cross-browser optimization upload images:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<ui:image field="image1" src="1.png"/>
<ui:image field="image2" src="2.png"/>
<ui:style>
@sprite .image1 {
gwt-image: "image1";
/* ... CSS properties ... */
}
@sprite .image2 {
gwt-image: "image2";
/* ... CSS properties ... */
}
</ui:style>
<div>
<div class="{style.image1}"></div>
<div class="{style.image2}"></div>
</div>
</ui:UiBinder>
During Assembly of the web application, including such UI template 1.png and 2.png will be merged into a single image that will be used in permutation for IE6 and IE7 via CSS Sprites. For all the rest of permutatio the original image will be embedded in data URLS. In both cases all the necessary properties are added to CSS classes image1 and image2 automatically.
Division of application
With the increase of the functionality of a web application inevitably grows, the size of permutate, and accordingly increases the time required to download each of them. There may come a time when the "cold start" (browser cache empty), even with all possible optimizations will take unacceptably long time.
In this case the Google Web Toolkit provides the ability to split a web application into several separately loadable modules. Thus the main functions of a large application can be made available to the user immediately after loading a small start-up module, and the other that provides additional functionality to load modules as needed. The modules are created and loaded automatically, the developer need only specify the split point.
Using modules, developers of Google Wave could bring the average loading time of his creation to a few seconds, although the full size of this "monster" is equal to about 3 MB.
