Secrets of the GWT

Secrets of the GWT
David Chandler
Google Web Toolkit Team
Atlanta, GA USA
drfibonacci@google.com

Monday, March 14, 2011 1

Agenda
Why rich Web apps with GWT?

GWT Quickstart

Developer tools

GWT performance for your users

Building with GWT 2.12


GWT in 10 sec

Asynchronous
JavaScript
And
XML++


GWT in 30 sec


Browser-Proof Your JS Code

IE

Firefo
x

i
Safar e
m
Chro

Opera

5

No plugins required
Silverlight
VML Flash

6

Can you find the bug?

Hint: JavaScript is a dynamic language

7

Catch errors at compile time

Java is a static language

8

Completion, refactoring...

9

Eating our own dogfood

+= AdSense, Maps, Docs, Groups...
10

Rich ecosystem
www.gwtmarketplace.com


More ecosystem
Util: GIN, gwt-dnd, gwt-fx, gwt-comet, ...
Widgets: EXT-GWT, Smart-GWT, ...
Frameworks: Vaadin!


4+ years in review

May 2006 GWT 1.0 Launch at JavaOne

… …

Aug 2008 GWT 1.5 Java 5 language support

Apr 2009 GWT 1.7 Dedicated IE8 support

Fall 2009 GWT 2.0 UIBinder (XML template), runAsync()

Oct 2010 GWT 2.1 MVP, RequestFactory, Spring Roo

13

GWT Quickstart
> svn checkout https://google-web-toolkit.googlecode.com/
svn/trunk/samples/expenses expenses
> cd expenses/src/main/webapp
> mvn -f ../../../pom.xml gwt:run (dev mode)
(note: most projects can use mvn gwt:run in the dir containing pom.xml--this
one is special because it loads test data from a .txt file in src/main/webapp)

1.Browse to http://127.0.0.1:8888/LoadExpensesDB.html?
gwt.codesvr=127.0.0.1:9997
2.Click Generate Data button
3.Browse to Expenses.html to run the app

To create an Eclipse project:
1.Install Sonatype m2eclipse and m2extras
2.File | Import | Existing maven project, select expenses/
pom.xml


GWT delivers...
Productivity for developers

- Language, IDEs, tools,
libraries

- People, ecosystem

Performance for users

- 'Perfect' caching

- Whole program optimization

15

Developing with GWT
Develop

- Google Plugin for Eclipse, GWT Designer, STS / Roo

Debug

- In Eclipse with dev mode browser plugin

Optimize

- SpeedTracer for GWT, App Engine, Spring Insight

Deploy

- Standard WAR or one-button push to App Engine


Google Plugin for Eclipse


Google Plugin for Eclipse
Easiest way to get latest GWT, GAE SDKs

Debug / Run / Optimize / Deploy

Wizards (new module, entry point, ClientBundle,
UiBinder)

Quick fixes (auto-create RPC Async interface)

Run As | GWT JUnit Test

Maven integration via m2eclipse plugin


GWT Designer Java, ui.xml


GWT Designer & UiBinder


GWT Designer CSS Editor


Development cycle

Write Hit
Code Refresh

Quick
Test

22

How dev mode works

A real browser

Web Server Code Server

Java Virtual Machine

Duke, the Java mascot
Copyright © Sun Microsystems Inc., all rights reserved.

23

Debug in dev mode

24

Compile for Production
Source files:

Code, CSS, Images,
Resources, …
GWT
Compiler

Your app running here.
No plugins.

25

Optimize with Speed Tracer


Launch SpeedTracer
From Chrome...

Or from Eclipse...


Server traces GAE, tcServer


One click deploy to GAE


Performance for your users
Latency
• Perfect Caching
Number of
connections
• ClientBundle

Bandwidth
• data: URLs & MHTML
packaging

Browser
Performance
• Developer guided code
splitting

• Compiler optimizations

30

Perfect caching

}
index.html
… ………… ………… ………… … … ………  ……………… … … … … … HTTP
… …… <script src='foo.nocache.js' … > ………… If-Modifed-Since

foo.nocache.js

}
……… … ………… ………  … …… A83B1C.cache.html … …

A83B1C.cache.html
… … ………   ………… … … ……… …………… … ……………
……  … … ……     …  …… … …… … … ……… ………… …… FOREVER
…… ……… … …… …… … … …… … F7312.cache.txt …
… 6C5BA.cache.png …… ……  …… …  ………… … …… Cacheable
… …   ……… ……… ……… … ……… … …… … …………… …………
……… ……… … …………   ………………… …… … … … …… … ……

6C5BA.cache.png F7312.cache.txt

31

Image sprites for free

20,558 bytes

11 separate images

6,824 bytes

1 bundled image

∑ Separate Bundled

32

Without ClientBundle

33

Deferred binding

Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms

Improvement 14% 29% 32% 39%

34

GWT compiler optimization

“The fastest code is that which does not run.”

Joel Webber

GWT co-creator


GWT compiler optimization
Does all the stuff you’d do by hand in a tight JS app

- Shrinking (obfuscation)

- Modularization (pay only for what you use)

- Dead code removal

- Method inlining

…but automated and even tighter

Developer-guided code splitting (runAsync)


What’s new in 2.2?
Integration with Spring / Roo

SafeHTML wrappers

GPE: Maven support, integration GWT Designer

Application framework

- RequestFactory

- Activities and Places

Cell Widgets and Editor framework


Four flavors of RPC
1. RequestBuilder + JSONParser (see RESTY-GWT)

2. RequestBuilder + XMLParser

3. GWT-RPC (easiest)

4. RequestFactory (new in 2.1)


GWT-RPC
@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {
String greetServer(String name) throws IllegalArgumentException;
}

public interface GreetingServiceAsync {
void greetServer(String input, AsyncCallback<String> callback)
throws IllegalArgumentException;
}

public class GreetingServiceImpl extends RemoteServiceServlet implements
GreetingService
{
public String greetServer(String input) throws IllegalArgumentException {
...
}
}


Simple, powerful GWT-RPC
Send / receive Plain Old Java Objects (POJO)

- Easy: interface, async, & implementation

- Versioned to help keep client & server in sync

- Even smaller than JSON

- Supports polymorphism

- No JavaScript hijacking risk (JSON attack)

- Easy to find all calls to given service in IDE


GWT 2.1 RequestFactory
Newer alternative to GWT-RPC

Designed for data-oriented services

- Higher level of abstraction than GWT-RPC

- Foundation for future caching / batching

Even faster than GWT-RPC

- JSON-based == very fast (no serialization /
deserialization required)

- Tracks changes on the client and sends only diffs


RequestFactory
The entity / DTO problem

EntityProxy / ValueProxy

Service stub interfaces extend RequestContext

AppRequestFactory extends RequestFactory

GWT.create(MyAppRequestFactory.class)


EntityProxy
@Entity
public class ItemList extends DatastoreObject
{
private String name;
private Key<AppUser> owner;
private ListType listType;
@Embedded
private List<ListItem> items; // value type
...
}

@ProxyFor(ItemList.class)
public interface ItemListProxy extends DatastoreObjectProxy
{
// TODO enums work!
public enum ListType {NOTES, TODO}
String getName();
void setName(String name);
List<ListItemProxy> getItems();
AppUserProxy getOwner(); // NOT Key
...
}


DatastoreObject
package com.listwidget.domain;
public class DatastoreObject
{
@Id
private Long id;
private Integer version = 0;

@PrePersist
void onPersist()
{
this.version++;
}
...
}

package com.listwidget.shared.proxy;
public interface DatastoreObjectProxy extends EntityProxy
{
Long getId();
Integer getVersion();
}


ValueProxy
public class ListItem // POJO
{
private String itemText;
private Date dateCreated;

public Date getDateCreated()
{
return dateCreated;
}
}

@ProxyFor(value = ListItem.class)
public interface ListItemProxy extends ValueProxy
{
String getItemText();
void setItemText(String itemText);
Date getDateCreated();
}


Making a RequestFactory
public interface ListwidgetRequestFactory extends RequestFactory
{
@Service(value = ItemListDao.class, locator = DaoServiceLocator.class)
interface ItemListRequestContext extends RequestContext
{
Request<List<ItemListProxy>> listAll();
Request<Void> save(ItemListProxy list);
Request<ItemListProxy> saveAndReturn(ItemListProxy newList);
}
ItemListRequestContext itemListRequest();
}

private final ListwidgetRequestFactory rf =
GWT.create(ListwidgetRequestFactory.class);


Using RequestFactory
@Override
public void persistList(String listName)
{
final ListwidgetRequestFactory rf = this.clientFactory
.getRequestFactory();
ItemListRequestContext reqCtx = rf.itemListRequest();
final ItemListProxy newList = reqCtx.create(ItemListProxy.class);
newList.setName(listName);
newList.setListType(ListType.TODO);
reqCtx.saveAndReturn(newList).fire(new Receiver<ItemListProxy>()
{
@Override
public void onSuccess(final ItemListProxy savedList)
{
// Refresh table
listDataProvider.getData();
}
});
}


@Override
public void update(int index, ItemListProxy obj, final String newName)
{
ItemListRequestContext reqCtx = clientFactory.getRequestFactory()
.itemListRequest();
ItemListProxy editable = reqCtx.edit(obj);
editable.setName(newName);
reqCtx.save(editable).fire(new Receiver<Void>()
{
@Override
public void onSuccess(Void response)
{
eventBus.fireEvent(new MessageEvent(newName + " updated",
MessageType.INFO));
}
});
}


private void getData()
{
// To retrieve relations and value types, use .with()
Request<List<ItemListProxy>> findAllReq = rf.itemListRequest()
.listAll().with("owner");
// Receiver specifies return type
findAllReq.fire(new Receiver<List<ItemListProxy>>()
{

@Override
Text
public void onSuccess(List<ItemListProxy> response)
{
updateRowData(0, response);
}
});
}


editList = reqCtx.edit(editList);
List<ListItemProxy> items = editList.getItems();
// must initialize collections
if (items == null)
{
editList.setItems(new ArrayList<ListItemProxy>());
}
editList.getItems().add(newItem);
reqCtx.save(editList).with("items").to(new Receiver<Void>()
{
@Override
{
itemsProvider.setList(editList.getItems());
itemsProvider.refresh();
}
}).fire();


GWT MVP - Concepts
View

- Interface + implementation

- Interface enables testing without GWTTestCase

- Typically expensive to construct so make reusable

Presenter

- No Widgets, just business logic

- Middle man between service layer and views


GWT MVP - Concepts
Place

- Place represents bookmarkable state of an activity

- PlaceController makes back button / bookmarks
work like users expect

- PlaceTokenizers map to / from String tokens on URL


Demo
third_party/java_src/gwt/svn/trunk/samples/
expenses


Place
public class EditListPlace extends Place
{
private String token;
public EditListPlace(String token)
{
this.token = token;
}
public String getToken()
{
return token;
}
public static class Tokenizer implements PlaceTokenizer<EditListPlace>
{
public EditListPlace getPlace(String token)
{
return new EditListPlace(token);
}
public String getToken(EditListPlace place)
{
return place.getToken();
}
}
}


PlaceHistoryMapper
/**
* PlaceHistoryMapper interface is used to attach all places which the
* PlaceHistoryHandler should be aware of. This is done via the @WithTokenizers
* annotation or by extending PlaceHistoryMapperWithFactory and creating a
* separate TokenizerFactory.
*/
@WithTokenizers({ ListsPlace.Tokenizer.class, EditListPlace.Tokenizer.class })
public interface AppPlaceHistoryMapper extends PlaceHistoryMapper
{
}


Hello Places
// Start PlaceHistoryHandler with our PlaceHistoryMapper
PlaceHistoryMapper historyMapper = clientFactory.getHistoryMapper();
PlaceHistoryHandler historyHandler = new PlaceHistoryHandler(hisoryMapper);
historyHandler.register(placeController, eventBus, defaultPlace);
// Goes to place represented on URL or default place
historyHandler.handleCurrentHistory();


Places: Moving parts


Places: Go to


Places: Back and forth


Activities
Activity, ActivityManager are not required!

ActivityManager

- Owns a region of the window

- Choose what to do with it on place change

Activity (“wake up, set up, show up”)

- Started by ActivityManager

- Provides a widget to display, asynchronously

- Can refuse to relinquish screen


Activity
public class EditListActivity extends AbstractActivity implements Presenter
{
private ClientFactory clientFactory;
private EventBus eventBus;

public EditListActivity(ClientFactory cf, EditListPlace editListPlace)
{
this.clientFactory = cf;
this.itemListToken = editListPlace.getToken();
}

@Override
public void start(final AcceptsOneWidget panel, EventBus eventBus)
{
this.eventBus = eventBus;
...
panel.setWidget(clientFactory.getEditListView());
}
...
}


ActivityMapper
public class AppActivityMapper implements ActivityMapper {

private ClientFactory clientFactory;

public AppActivityMapper(ClientFactory clientFactory) {
super();
this.clientFactory = clientFactory;
}

@Override
public Activity getActivity(Place place) {
if (place instanceof EditListPlace) {
return new EditListActivity(clientFactory, (EditListPlace) place);
}
if (place instanceof ListsPlace)
{
return new ListsActivity(clientFactory);
}
return null;
}
}


ActivityMapper Idioms
Disposable Activities, shared views:

if (place instanceof FooPlace) {
return new FooActivity(theOnlyFooView);
}

Singleton:

if (place instanceof FooPlace) {
theOnlyFooActivity.update((FooPlace) place);
return theOnlyFooActivity;
}


Get activated


Strategies


Activities and Places wiring
// Start ActivityManager for the nav (west) panel with our WestActivityMapper
ActivityMapper westActivityMapper = new WestActivityMapper(clientFactory);
ActivityManager westActivityManager =
new ActivityManager(westActivityMapper, eventBus);
westActivityManager.setDisplay(westPanel);

// Start ActivityManager for the main (center) panel with our CenterActivityMapper
ActivityMapper centerActivityMapper = new CenterActivityMapper(clientFactory);
ActivityManager centerActivityManager =
new ActivityManager(centerActivityMapper, eventBus);
centerActivityManager.setDisplay(centerPanel);

// Start PlaceHistoryHandler with our PlaceHistoryMapper
PlaceHistoryMapper historyMapper = GWT.create(AppPlaceHistoryMapper.class);
PlaceHistoryHandler historyHandler = new PlaceHistoryHandler(historyMapper);
historyHandler.register(placeController, eventBus, defaultPlace);

RootPanel.get().add(dockLayoutPanel);
// Goes to place represented on URL or default place
historyHandler.handleCurrentHistory();


Cell Widgets
Fast, lightweight table rendering

Data binding with
DataProviders, ValueUpdaters

Scrolling and paging controls

Sortable columns, adjustable width

TextBox, IntegerBox, ValueBox<T>


Cell Widgets


Editable Column
// Editable column for list name
nameColumn = new Column<ItemListProxy,String>(new EditTextCell())
{
@Override
public String getValue(ItemListProxy list)
{
return list.getName();
}
};


Custom Column type
// Note Flyweight pattern: only one instance of HyperlinkCell passed to the Column
Column<ItemListProxy, Hyperlink> linkColumn =
new Column<ItemListProxy, Hyperlink>(new HyperlinkCell())
{
@Override
public Hyperlink getValue(ItemListProxy list)
{
String proxyToken =
clientFactory.getRequestFactory().getHistoryToken(list.stableId());
String historyToken =
clientFactory.getHistoryMapper().getToken(new EditListPlace(proxyToken));
Hyperlink h = new Hyperlink(list.getName(),historyToken);
return h;
}
};


Populating a CellTable
public static class MyDataProvider extends
AsyncDataProvider<ItemListProxy>
{
@Override
protected void onRangeChanged(HasData<ItemListProxy> display)
{
// To retrieve relations and value types, use .with()
Request<List<ItemListProxy>> findAllReq = rf.itemListRequest()
.listAll().with("owner");
// Receiver specifies return type
findAllReq.fire(new Receiver<List<ItemListProxy>>()
{
@Override
public void onSuccess(List<ItemListProxy> response)
{
updateRowData(0, response);
}
});
}
}

this.myDataProvider = new MyDataProvider(requestFactory);


Updating with a CellTable
public class NameFieldUpdater implements FieldUpdater<ItemListProxy, String>
{
@Override
public void update(int index, ItemListProxy obj, final String newName)
{
ItemListRequestContext reqCtx = clientFactory.getRequestFactory()
.itemListRequest();
ItemListProxy editable = reqCtx.edit(obj);
editable.setName(newName);
reqCtx.save(editable).fire(new Receiver<Void>()
{
@Override
{
eventBus.fireEvent(new MessageEvent(newName + " updated",
MessageType.INFO));
}
});
}
};

// Make list name field editable
display.getNameColumn().setFieldUpdater(new NameFieldUpdater());


GWT Logging
GWT now has java.util.Logging emulation

Configure in your .gwt.xml

Easily enable remote logging, too


GWT secrets
-compileReport


GWT secrets: faster compile
- -draftCompile skips optimizations

- Set only one user-agent in gwt.xml for dev

- Careful with RPC polymorphism


GWT secrets: shrink JS
- -XdisableClassMetadata: Disables some
java.lang.Class methods (e.g. getName())

- <set-property name="compiler.stackMode"
value="strip"/>
Removes client-side stack trace info (can
reduce code size up to 15%)

- <set-configuration-property
name="CssResource.obfuscationPrefix"
value="empty"/>


GWT secrets: shrink JS
- <set-property
name="compiler.enum.name.obfuscation"
value="true"/>
(only if you’re not using enums as String values)

- -XdisableCastChecking: Disables run-time
checking of cast operations
(use with caution)

- See GWT FAQ, CompilerParameters.gwt.xml


GWT speak
“Very productive environment for Java
developers, but there is a learning curve”

“UI layout and styling is a challenge”

“GWT has enabled our team to run much faster
than we could otherwise”

“Would be impossible to write our app without
GWT”


New GWT book
http://code.google.com/webtoolkit/books.html


Thank you!
Where to get it:
http://code.google.com/webtoolkit/

Wiki, issue tracker, source:
http://code.google.com/p/google-web-toolkit/

Official GWT blog:
http://google-web-toolkit.blogspot.com/

Twitter:
@googledevtools

81

Secrets of the GWT

More Related Content

Similar to Secrets of the GWT (20)

More from David Chandler (11)

Recently uploaded (20)

Secrets of the GWT

Editor's Notes