YaJUG: What's new in GWT2

GWT 2 = Easier AJAX
YaJUG
11/5/2010

Who am I?
Olivier Gérardin
Technical Director, Sfeir Benelux (groupe Sfeir)
Java / Web architect
13+ years Java
3 years GWT

Agenda
GWT reminders
New in GWT 2.0
SpeedTracer
In-browser development mode
Code splitting & compile report
UiBinder
Client bundle
Layout panels
Misc.
Pointers, Conclusion, Q&A

Reminders

GWT solves all your problems
GWT gives you AJAX without the pain of JavaScript development
Takes care of cross-browser issues
Allows full debugging (breakpoints, step by step, inspecting/watching variables)
Strong static typing early error detection
Full refactoring options
No browser plugin or mandatory IDE
Short learning curve
Simple RPC mechanism built in
But can communicate with any server technology

Program in Java…
GWT allows developing client-side web apps in full Java (with only a few restrictions)
Leverage existing Java tools and skills
Use any IDE (Eclipse, NetBeans, IntelliJ, …)
Program like a traditional graphical client (Swing, SWT, …)
Widgets, containers, listeners, etc.
Use OO patterns (MVC, MVP, observer, composite, etc.)
Test like any Java app
Use standard Java debuggers
Test with JUnit

… deploy in JavaScript
JavaScript is only generated:
For deployment
To test in actual web mode
GWT guarantees that the generated JavaScript app behaves exactly like the Java app
And it does (most of the time)

4 easy pieces
Java-to-JavaScript compiler
Generates JS code from Java source
Performs many optimization
JRE emulation library
GWT compatible version of most used Java core classes (java.lan, java.util)
Java libraries
Utility classes (JSON, I18N, …)
Widget library
Hosted Development mode
Run/debug the app as Java bytecode

Key benefits

Easy development
During development, you are writing and running a classic Java app
Use your favorite IDE
All IDE features available (code completion, code analysis, refactoring, links, Javadoc, …)
Plugins help GWT-specific tasks
launching development mode
compiling
refactoring
creating projects, modules, RPC services, …
even design GUI (GWT Designer from Instantiations)

More benefits
Easy RPC implementation / consumption / deployment
Easy JSON / XML parsing
Easy UI building / widget reuse
Easy history support
Easy i18n
Easy debugging
Easy testing

Any room for improvement???
Of course…

New in GWT 2.0

Speed tracer
Performance analysis tool
Visualize where your app spends time:
JS execution
Browser rendering
CSS handling (style selection/calculation)
DOM handling / event processing
Resource loading

Speed Tracer: example

Before 2.0: hosted mode uses customized browser engine
Heavily customized
Only one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)
Difficult to keep up-to-date
Includes platform-specific code (SWT)
Browser and hosted application share the same process
Most plugins don’t work (including Google Gears…)

now:
Hosted mode shell runs outside browser
Communicates with browser using plugin through TCP

Benefits
Use any (supported) browser/version on any platform
Currently Safari, Firefox, IE, Chrome (not on OS X!)
Behavior closer to web mode
No interference with browser plugins
No more platform-specific stuff in GWT (one jar for all!)
Network protocol between shell and browser  cross-platform dev possible
Dev mode shell on machine X, slave browser on machine Y
E.g. dev on Linux, test in IE on Windows…

Initiating dev mode

Plugin installation

Code splitting
Before: monolithic download can become very big
Slow startup times
After:
Programmer can insert “split points” in code
Hints for the compiler to place everything not required up to split point in separate download
Compiler divides code in several “chunks”, which are loaded on-demand
Benefits:
Initial loading time reduced 50% on average with a single split point
Allows on-demand module loading (provider pattern)

Specifying a split point
GWT.runAsync(newRunAsyncCallback() {
publicvoidonFailure(Throwable reason) {
// …
}
public void onSuccess() {
// ..
}
});

Pattern: AsyncProvider
publicinterfaceAsyncClient<P> {
voidonUnavailable(Throwable reason);
void onAvailable(P instance);
}

Async provider: Implementing the provider
publicclass Provider {
privatestatic Provider instance = null;
public static void getAsync(finalAsyncClient<Provider> client) {
GWT.runAsync(newRunAsyncCallback() {
public void onFailure(Throwable reason) {
client.onUnavailable(reason);
}
public void onSuccess() {
if (instance == null) {
instance = new Provider();
}
client.onAvailable(instance);
}
});
}

Async provider: Loading the provider
privatevoidloadProvider() {
Provider.getAsync(newAsyncClient<Provider>() {
publicvoidonAvailable(Provider provider) {
provider.doSomething();
}
publicvoidonUnavailable(Throwable reason) {
Window.alert(”Failed: " + reason);
}
});
}

Compile Report (formerly: SOYC)
Better understanding of the compilation process
Helps tuning code splitting
Simple compiler flag
Produces HTML report
Shows:
Permutations
Sizes per chunk, package, etc.
Dependencies
Compiler flag: -compileReport

Compile Report: output

Declarative UI: UiBinder
Declarative construction of GUI using XML grammar
Mix HTML and widgets
Benefits:
Clearly separate responsibilities  better collaboration
Static UI construction (XML)
Dynamic UI behavior (Java)
More efficient
HTML vs DOM API calls
Easy to transition from static HTML to dynamic

UiBinder: define layout
XML file (xx.ui.xml)
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:gwt='urn:import:com.google.gwt.user.client.ui'>
<gwt:HorizontalPanel>
<gwt:Labeltext="Sexe :" />
<gwt:VerticalPanel>
<gwt:RadioButtonname='sexeradio' text='M’ />
<gwt:RadioButtonname='sexeradio' text='F’ />
</gwt:VerticalPanel>
</gwt:HorizontalPanel>
</ui:UiBinder>

UiBinder: instantiate
publicclass SexeRadio2 extends Composite {
@UiTemplate("SexeRadio2.ui.xml")
interfaceMyUiBinder
extendsUiBinder<Panel, SexeRadio2> {}
privatestaticfinalMyUiBinderbinder = GWT.create(MyUiBinder.class);
public SexeRadio2() {
finalPanel panel =binder.createAndBindUi(this);
initWidget(panel);
}

UiBinder: bind fields
Automatically assign references to dynamically created widgets to designated Java fields (@UiField)
XML :
<gwt:RadioButtonname='sexeradio' text='M’ ui:field='maleRadio' />
<gwt:RadioButtonname='sexeradio' text='F’ ui:field='femaleRadio'/>
Code:
@UiField
RadioButtonmaleRadio;
@UiField
RadioButtonfemaleRadio;

UiBinder: bind handlers
Automatically attach event handlers (@UiHandler)
Widgets only (not DOM elements)
Handler type inferred from parameter type
Code:
@UiHandler("maleRadio")
voidmaleClicked(ClickEvent event) {
GWT.log("C'est un garçon!", null);
}

More UiBinder goodness
Mix HTML and widgets in same XML file
Define CSS styles with <ui:style>
Inline / external
Apply to widgets with attributes styleNames / addStyleNames
Programmatic access to styles (works with CssResource)
Use external resources (images, CSS stylesheets, …) declared as client bundles with <ui:with>
Instantiate widgets that don’t have zero-arg constructor with @UiFactory

Resource bundles
Download multiple heterogeneous resources from server in a single request
Images (similar to ImageBundle in 1.x)
CSS
Text
Any other resource
Benefits:
Fewer round trips to the server
Less overhead
More responsive interface

Resource bundles: general mechanism
Familiar mechanism
Coding time: define interface
Method type constrains resource type
Method name (accessor) designates resource
Annotation @source specifies resource content
If unspecified, source is derived from accessor
I18N aware (append _fr, _fr_FR)
Runtime: access resource
Obtain instance via GWT.create(interface.class) and call accessor directly
Reference accessor through other mechanism (CSS injection @sprite, etc.)

Resource bundles: DataResource
Works with any kind of source
Make the resource available through a URL
Rename file to make resulting URL strongly-cacheable if appropriate
XXX.pdf AAA12345.cache.pdf
Webserver should be configured accordingly

Resource bundles: TextResource
Access to static text content
TextResource is inlined into JavaScript
ExternalTextResource is fetched asynchronously
interface Resources extendsClientBundle {
Resources INSTANCE = GWT.create(Resources.class);
@Source(“text1.txt")
TextResource text1();
@Source(“text2.txt")
ExternalTextResource text2();
}

Accessing TextResouce
// TextResource
myTextArea.setInnerText(
Resources.INSTANCE.text1().getText());
//ExternalTextResource
Resources.INSTANCE.text2().getText(
newResourceCallback<TextResource>() {
publicvoidonError(ResourceExceptione) { ... }
publicvoidonSuccess(TextResourcer) {
myTextArea.setInnerText(r.getText());
}
});

Resource bundles: ImageResource
Optimize runtime access to image data
Transparently group /split images
Uses ImageIO library
Use in injected CSS with @sprite directive
Supports most image formats
Including animated GIF
Not an image-processing library!

Resource bundles: CssResource
Define an extension of CSS
Syntax validations / compile-time optimizations
Injected at runtime
Usage:
Write CSS stylesheet
Extend CssResource
interfaceMyCssextendsCssResource {
}
Include in ClientBundle
interfaceMyResourcesextendsClientBundle {
@Source("my.css")
MyCsscss();
}
Use GWT.create(MyResources.class) to obtain instance of bundle
Call CssResource.ensureInjected() to inject stylesheet in page

CSS extensions
Sprites with @sprite
Bundle:
classMyResourcesextendsClientBundle {
@Source("my.css")
MyCssResourcecss();
@Source("some.png")
ImageResourceimageAccessor();
}
my.css:
@sprite .mySpriteClass{
gwt-image: "imageAccessor”
}

CSS extensions
Constants with @def
Runtime evaluation with @eval and value()
Conditional CSS with @if/@elif/@else

Layout panels
Layout panels
Predictable, consistent layout
Constraint based system built on top of CSS
Plays nice with custom CSS styles
Each child must have 0 or 2 constraints per axis
Horizontal: none, left/width, right/width, left/right
Vertical: none, top/height, bottom/height, top/bottom
no constraint = fill parent
Any unit (%, px, …)
Must be added to an instance of ProvidesResize
typically RootLayoutPanel

Layout Panels
Easily usable with UiBinder
<g:layer left=‘25% right=‘25%’ top=‘10px’ bottom=‘0’>
<g:Label>Label</g:Label>
</g:layer>
Bunch of specialized panels implemented as LayoutPanels:
DockLayoutPanel, SplitLayoutPanel, StackLayoutPanel, TabLayoutPanel

And also…
Compiler optimizations
Most notably reduces generated JS size (expect 3-20 %)
Draft compile mode: flag -drafCompile
No optimizations / Faster builds
Not for deployment!
GWTTestCase
No more dependency on SWT
No native code / browser required
HtmlUnit: GUI-less browser written in Java

Pointers, Conclusion, etc.

Pointers
GWT home (downloads, docs, FAQs, guides, etc.)
http://code.google.com/toolkit
Google groups “GWT” group
http://groups.google.com/group/Google-Web-Toolkit
onGWT: fresh news about GWT
http://www.ongwt.com
LinkedIn “GWT Users” group
http://www.linkedin.com/groups?gid=129889

Shameless self-promotion

Thank you
Questions?
gerardin.o@sfeir.lu
blog.gerardin.info
twitter: @ogerardin

http://blog.gerardin.info	1939
http://www.slideshare.net	38
http://static.slidesharecdn.com	10
http://translate.googleusercontent.com	9
http://webcache.googleusercontent.com	2
http://theoldreader.com	2

YaJUG: What's new in GWT2

by Olivier Gérardin

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 2,000

Statistics

YaJUG: What’s new in GWT2 Presentation Transcript