GWT 2.

0 is Smarter than You

Robert “kebernet” Cooper

Internap Network Services Inc.
GWT in Practice (http://manning.com/cooper)
GWT 1.x

 Desktop Style UI APIs

 Smart Java → JavaScript compilation

• Deferred Binding
• Code pruning/staticification/inlining/etc
 Google Institutional Knowledge
• Cache Strategy (Out of the Box)
• I18n Strategy (Out of the Box)
• Image DL optimization (Out of the Box)
• Two iterations of compression optimization
 Testing, Packaging, Client/Server modules
GWT 1.x: Progress

 Compiler, Compiler, Compiler

• Multi-threaded
• SOYC
• New Compression Naming (15% better!)
 Java 1.5 Language Features (Generics)
 JavaScriptObject Overlays

• OMGWTFBBQ awesome sauce

 Handler rather than Listener (Easy Cleanup)
 Jetty/Pluggable servers

• Only really used for GAE right now

GWT 2.0

 Out of Process Hosted Mode

(OOPHM/DevMode)
• No more platform browser!
• XB testing on one device
• Yay Swing! (No more SWT nightmare)
 Compiled Stylesheets
• Takes ImageBundle to the next level
• Browser-specific CSS options
• Templates for Sprites, etc.
GWT 2.0

 UIBinder
• Declarative UI support
• Integrates better with standard methodology
• Can make UI binding easier
 Developer Guided Code Pointcuts
• runAsync allows for jit code loading inside an
application
 LayoutPanel
• Absolutely positioned with CSS-driven size
hinting (awesome sauce)
OOPHM

 No more SWT Browser

 Driven by NPAPI plugin for all browsers
Demo


Compiled Styesheets

 ImageResource replaces ImageBundle

• Inlining as data:// URLs, rather than windowed
images
• One HTTP Request!
 Reusable constant values
• Fix your colors once!
 CSS ClassName compilation
• Make your stuff smaller!
 Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)

MyModule.css:

@def smallText 10px;

@def baseText #00CCCC;

.myLabelText {
font-size: smallText;
Color: baseText;
}

.myUnderline {
Border-bottom: 1px solid baseText;
}
Compiled Stylesheets (Examples)

interface MyModuleCss extends CssResource {

String myLabelText;

@ClassName(“myUnderline”) //Optional (name)

String myUnderlineClass;

}
Compiled Stylesheets (Examples)

/* @if (compile property) (match value)... */

@if user.agent msie msie8 {
.halfOpaque {
filter: alpha(opacity = 50);
}

} @ else {
.halfOpaque {
opacity: 0.5;
}
}
Compiled Stylesheets (Examples)

@sprite .myEditButton {
border: 1px outset silver;
background: silver;
Gwt-image: “edit-icon”;
}
Compiled Resource

 Easy inclusion of CSS/Images/Etc into module

 I18n of all resources based on naming
 One-line compile-time optioning off all
resources
Compiled Resources (Examples)

interface MyResources extends ClientBundle {

@Source(“MyModule.css”)
@Strict
Css myCss; // Depends on below!

@Source(“MyEditIcon.png”)
ImageResource editIcon;

@Source(“SomeTextFile.txt”) //LOAD FROM WEB!

ExternalTextResource configFile;

}
Compiled Resources

 I18n select order:

• @Source() +”.[ln]_[cc]” (EN_us, EN_au, FR_ca)
• @Source() +”.[ln]” (EN, FR)
• @Source()
UIBinder

 Declarative UIs
• Work from XHTML source
• Easy process integration with designers
 New HTML DOM classes
• Easier to work with native DOM without user.ui.*
classes
 Namespacing in XML allows for easy use of
GWT widgets
 (Better than Android :/)
 Cleaner than using Widgets everywhere
UIBinder (Examples)

MyWidget.xml:
<!DOCTYPE ui:UiBinder SYSTEM
"http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel>
<span ui:field=”label”/> <g:ListBox
ui:field='listBox' visibleItemCount='1'/>.
</g:HTMLPanel>
</ui:UiBinder>
UIBinder (Examples)

MyWidget.java:
class MyWidget extends Widget { //Or UIObject
interface Binder extends UIBinder<Widget,
MyWidget>{} // forces compile generation;
private static final Binder BINDER =
GWT.create(Binder.class);

@UiField
SpanElement label;
@UiField
ListBox listBox;
UIBinder (Examples)

MyWidget.java (cont):

public MyWidget(String label,String... options){

setElement(BINDER.createAndBindUI(this));
for(String option : options){
this.listBox.addItem(option);
}
this.label.setInnerText(label);
}
}
Developer Guided Pointcuts

 GWT 2.0 is the first compiler I have ever seen

that does this!
 Super Simple Syntax
 All Memory References Remain in Place
 Some Dev Planning Needed for Optimal Use
How Compiled GWT Works

 Standard Linker compiles into iframe with

parent Window and Document objects
injected
 Anonymous classes follow Java spec of
custom <init> based on final availability as
constructor args and Pass-By-(Pointer-)Value
states
 Statics held on Prototypes : no global
JavaScript context
How GWT 2.0 Pointcuts Work

 A call is made to GWT.runAsync(Runnable r)

 GWT proxies the current pointer references
into a callback JavaScript method
 A separate JavaScript file is loaded into the
current runtime
 The callback method is invoked with the
current pointer set
 Subsequent calls simply invoke the callback
method directly once the code is loaded.
GWT 2.0 Pointcuts Caveats

 Shared code compiles to the root project

• If PC(a) and PC(b) share core, it goes to root
unless you package a PC(c) with shared code for
a and b
• Try and break code as cleanly as possible
• Core libs still go to the root if where needed
(doesn't save you core collections, etc)
 Can be slower if abused!
• Still better to get as much as possible on the first
request
• Caching strategies don't span pointcuts
GWT 2.0 Layout Panel

 Problem: To many layouts with GWT Panels

don't work the way you want them to.
• Desktop GUI panels default to 100% fill
• Math between fixed pixel size panels and “rest”
isn't cleanly supported by CSS and requires
.reflow() handlers
• Doesn't work well for DIP displays and new
mobile awesome (Droid)
 Solution: New GWT panels support a “CSS
Accellerated” flow system based on absolutes
GWT 2.0 LayoutPanel

 Classic Example: DockPanel

• Implemented with a 5 cell <table>
• Sizes determined by internal elements, not the
wrapper
• Window resizes require rescaling of defaults
 New version: DockPanel
• Takes a layout unit default
• Provides default fill for unsized elements
• Control is in the panel, not the elements
GWT 2.0 LayoutPanel (Examples)

DockPanel.java:

DockLayoutPanel p = new DockLayoutPanel(Unit.EM);

p.addNorth(new HTML("header"), 2);
p.addSouth(new HTML("footer"), 2);
p.addWest(new HTML("navigation"), 10);
p.add(new HTML(content));
GWT 2.0 LayoutPanel (Examples)

 “Content” is now liquid fill

 Changing EM to PCT doesn't alter the fill for
“Content”
 Internals use CSS to handle fill sizes, so
OpenGL/PDF/Whatever rendering systems
apply and doesn't require a separate eventing
chain
 FAST!

• Compare to Objective-J, etc

GWT 2.0 Summary

 CSS is downloaded in second HTTP call,

compiled to iteration
 Compiled CSS iteration includes all images
Base64, but Gziped if done right
 Pointcuts allow for fractional Code+CSS
downloads as part of sub-apps
 New Layout system is faster and requires less
“onAttach()/onWindowResize()” hackery
 New developer toolchain is easier to use
PostScript SpeedTracer

 SpeedTracer is a new UI to the GWT

performance hooks from 1.7
 Is Chrome specific

• May not reflect real-world timings in

MSIE/FF/Opera because of Chrome's (awesome)
V8 JavaScript engine
 Shouldn't replace DebugPanel from 1.7