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
