GWT 2 Is Smarter Than You

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

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

GWT 2 Is Smarter Than You

by Robert Cooper

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 148

Statistics

GWT 2 Is Smarter Than You Presentation Transcript