Scribd
Upload
76 views

GWT 2.0 Is Smarter Than You: Robert "Kebernet" Cooper

GWT 2.0 introduces several new features including out of process hosted mode, compiled stylesheets, UiBinder for declarative UI creation, developer guided code pointcuts for just-in-time loading of code, and a new LayoutPanel for CSS-driven layouts. It also includes improvements to the compiler and new developer tools like SpeedTracer for profiling performance.

Uploaded by

Andres Felipe Castaño
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
76 views

GWT 2.0 Is Smarter Than You: Robert "Kebernet" Cooper

GWT 2.0 introduces several new features including out of process hosted mode, compiled stylesheets, UiBinder for declarative UI creation, developer guided code pointcuts for just-in-time loading of code, and a new LayoutPanel for CSS-driven layouts. It also includes improvements to the compiler and new developer tools like SpeedTracer for profiling performance.

Uploaded by

Andres Felipe Castaño
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 29

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy