Google Web Toolkit

Matthew Keeney Google Web Toolkit

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(){varO=K.slice();for(var Q=0,P=arguments.length;Q<P;++Q){O.push(arguments[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/Showcase/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.

Google Web Toolkit