Transcript Google Web Toolkit

Matthew Keeney
Overview
Simplifies the App coding process
 Easily manage Large Apps
 Streamlined compiled code
 Easy Debugging in an IDE

Features
Simple server-client communication
 Optimized Javascript
 Reusable UI components
 Mix premade JavaScript libraries and
code with Java.
 Easy History support
 Easy Localization
 JUnit testing

Set-up

GWT Download
 Gwt.google.com
 Windows, OSX,Linux
 Basic command line compiler

GWT Eclipse add-on
 Easy IDE implementation
 Updates automatically
 Allows for debugging
Server-Client Communication

Remote Procedure Calls
 Clients ask for new data instead of new
HTML pages
 Create Client-Server applications instead of
web pages

GWT protocol support
 JSON
 XMP
 GWT RPC
JavaScript Optimization

Browser specific Optimizations






Firefox 1.0, 1.5, 2.0 and 3.0
Internet Explorer 6 and 7
Safari 2 and 3
Opera 9.0
Chrome
Code is deployed separately per user
profile
 For example: separate code is compiled for
“Firefox in English” or “IE in French”

Greatly Reduces client download size
JavaScript Optimization

Universal Optimizations
 Obfuscation
 Inlining
 String Interning
Obfuscation example
function(){var
O=K.slice();for(var
Q=0,P=arguments.length
;Q<P;++Q){O.push(argum
ents[Q])}return
N.apply(L,O)}
Inlining example
Shape s = new Circle(aRadius);
widget.setText(“area: “ + s.getArea());
becomes:
Circle s = new Circle(aRadius);
widget.setText(“area: “ + s.getArea());
then becomes:
Circle s = new Circle(aRadius);
widget.element.textContent = “area: “ + (s.r *
s.r * PI);
String Interning
Java:
void assignStyles() {
Style style = this.getElement().getStyle();
style.setProperty(“color”, “red”);
style.setProperty(“border”, “1px solid black”);
}
JavaScript:
var a = ‘color’, b = ‘red’, c = ‘border’, d = ‘1px
solid black’;
...
function assignStyles() {
var style = this.element.style;
style[a] = b;
style[c] = d;
}
Non-JavaScript Optimizations
Content Bundles
 Code Splitting

Content Bundles
Combine JavaScript, CSS, images and
any other static data into one bundle
 Eliminates http requests

 No need to download each file separately.
Reduces CSS size with the same
techniques as JavaScript
 Allows for Per-Browser CSS

Bundle Example
Code Splitting
Asynchronous Calls for new code
 Send the user only what they are going to
use initially then send further JavaScript
when needed.
 Users never download code they don’t use.

Code Splitting Example
Other Benefits to GWT
Reusable UI components
 History support
 IDE Debugging
 JUnit Testing

UI Components

http://gwt.google.com/samples/Showcas
e/Showcase.html
History support
Reliably control the browser’s history
 Provide feedback to the user
 “Bookmarkable”

 Uses url history tokens to “save” the state of
the application
IDE debug support

Hosted Mode – key to productive
development
 Java debugging
 Fast edit refreshes

Improved for GWT 2.0
 Adds plug-in for all major browsers
 Allows ide debugging on each browser not
just the hosted mode browser.