Cute and Cuddly UIs with GWT

What is the Google Web Toolkit?

• •

Official Definition:

o

“Google Web Toolkit (GWT) is a development toolkit

o

for building and optimizing complex browser-based applications." boring definition! Real Definition:

o GWT is a compiler, plus a few frameworks  It compiles java into optimized javascript  does quite a bit more too

The Basic GWT app

• Consists of: o An entry HTML page  This is what the browser loads when it first hits the website o o A gwt.xml file, named .gwt.xml

 Contains:  what browsers to compile for   java class containing the entry point what other modules are inherited (e.g. third party toolkits like Gin, or gwttime) Some java source files written using the GWT toolkit

Sample Module.gwt.xml

Major parts of GWT

• • •

UI Framework Remote Procedure Call(RPC) structure the GWT compiler

UI Frameworks

•

GWT's UI toolkit includes:

o o o

Widgets Event system Resource management

GWT Widgets

• Includes widgets for pretty much all the common HTML/Javascript widgets o Button/PushButton o o o TextBox, TextArea Password box etc.

Layout Widgets

• Also includes widgets for doing layouts o Lay out vertically/horizontally in a row  FlowPanel, HorizonalPanel o o o Lay out in the center, with Borders  DockLayoutPanel, DockPanel With a splitter between two widgets  SplitLayoutPanel, SplitPanel With HTML  HTMLPanel

DockLayoutPanel p = new DockLayoutPanel(Unit.EM); p.addNorth(new HTML("north"), 2); p.addSouth(new Button("Hello", 2); p.addEast(new TextArea("Some text!"), 2); p.addWest(new HTML("west"), 2); p.add(buildMyBigWidgetList()); //add it to the HTML document RootLayoutPanel rp = RootLayoutPanel.get(); rp.add(p);

Laying out content

Diversion about Standards Mode

• • Standards Mode o put on top of your html page to be in standards mode Some layout widgets in GWT only work in Standards Mode o FlowLayout o o DockLayoutPanel SplitLayoutPanel

GWT Events

• • Events handle most all user-level interactions in GWT o Mouse clicks o Key presses Events also can be used to send information from one widget to another o o much like PropertyChangeListener in Swing Instead of a PropertyChangeListener, use subclass of ValueChangedEvent

Button myButton = new Button("Do stuff"); myButton.addClickHandler(new ClickHandler(){ @Override public void onClick(ClickEvent ce){ //react to button } }); ValueChangeEvent.fire(this, new MyValueChangeEvent());

Add an event listener

UiBinder

• • • In GWT, you can layout your pages programatically o new FlowLayout().add(MyWidget), etc.

Can also lay out pages using html, css, and xml The UiBinder is a way of doing layouts with xml, html, and css, instead of java.

o This is actually doing layouts with html/css, instead of javascript

"http://dl.google.com/gwt/DTD/xhtml.ent"> .important { font-weight: bold;}

Sample UiBinder

UiBinder(Continued)

• Why use UiBinder instead of programmatic layouts?

o Separates layout and aesthetic logic from functional logic  easier to change layout without affecting functionality o  easier to apply CSS styles (especially with ClientBundle) Faster  programmatic logic is compiled to more javascript than html  UiBinder is compiled to more html than javascript

ClientBundle

• • ClientBundle is a way of optimizing how the browser gets static resources o Images (ImageResource) o o o CSS (CssResource) Text (TextResource) Groups together resources to make better use of the browser cache moves resources from "never cache" category to the "cache forever" category

Without a ClientBundle...

• • Make a change to an image, or css do your users see it right away?

o o maybe depends on their browser cache

With a Client Bundle...

• • • You add an ImageResource GWT compiler gives the image a unique hash you change the image later..

o GWT compiler assigns new image a new hash o o browsers now looking for a different image changes show up right away

More ClientBundle

• • Not just for Images o also for Css, static Text TextResource o o o compiles in static text as a cached resource compiler can also easily internationalize the text from properties files can be configured to download large text resources from the server as needed  allows rapid updates without a recompile/redeploy of the website

Server Stuff

• Question: How do you make server calls in javascript land?

Don't

• Don't ever, ever, ever use the internet. It's just a fad, it'll pass.

Refresh the entire page

• It seems awfully lonely in here, without any users...

Use AJAX!

GWT RPC

• GWT defines an AJAX-based Remote Procedure Call mechanism o Define your Service interface o o o Define your Service's Asynchronous companion interface Implement your Service interface server side call your Asynchronous interface client side

GWT RPC(Continued)

• • The GWT compiler will automatically generate implementations of your Asynchronous interface that uses AJAX to make the calls.

No Such Thing as a synchronous server call o GWT team decided that synchronous server calls are A Bad Idea(TM), and so they aren't available  They were right

public interface BeanServiceAsync{ void countBeans(String beanCounter, AsyncCallback beanCallback); public interface BeanService{ int countBeans(String beanCounter); public static class App { private static final BeanServiceAsync ourInstance; //some static initialization stuff here } } public static BillingDataServiceAsync getInstance() { return ourInstance; }

void countMyBeans(){ AsyncCallbackcallback = newAsyncCallback(){ void onFailure(Throwable t){ handleFailure(t); } void onSuccess(Integer beanCount){ dealWithBeanCount(beanCount) } } BeanService.App.getInstance().countBeans("myName",callback); }

Using BeanServiceAsync

GWT RPC(continued)

• It is very easy to make an asynchronous server call in GWT o Good:  your UIs are more responsive than with synchronous calls o  less effort necessary Bad:  It's easy to just make a server call whenever you want  Sometimes you may bring back more data than you expect

Make too many RPC calls...

o o o o Browser limits how many run concurrently the rest wait the page becomes unresponsive Users hate you

Ask for too much data...

• • • Browser locks your page while processing the javascript page becomes unresponsive Users hate you

GWT Compiler

• GWT is a compiler, plus frameworks(Already mentioned this, right?) o ......and??

o ....So what does the compiler do for me?

GWT Compiler(Continued)

• Does all kinds of things o optimizes your java source code o o converts java source to javascript optimizes javascript  including ClientBundles, UiBinder, embedded css, etc.

 optimizes javascript for different browsers

Permutations

• • • Compiler compiles for each browser independently o called Permutations of the compile If IE does a certain task in one way, and Chrome does it another...

o o IE permutation is compiled to use IE way, and never use Chrome's way Chrome permutation always uses Chrome's way, and never IE's Can even replace entire implementations specific to each Browser

Steps in the GWT compile

• Steps in the GWT compile: o optimize java source o o o translate to javascript specific for each browser optimize resulting javascript perform code splitting(we'll get there)

Java optimization stage

• Optimizes Java source o Dead code elimination  removed unused code blocks o o  replaces if(somethingTrue()&&anotherTrue()) with if(true) staticifies non-overridden methods  If method A is never overridden, then method A becomes static inlines method calls  not as aggressive here as the HotSpot compiler  get too aggressive, it makes javascript bigger

Javascript stage

• Javascript optimizations o Basically the same to the interpreted javascript as what happens to the java o o o o o static evaluation (same as Dead code elimination, but cooler sounding) method inlining  much more aggressive here since it only makes code smaller global namespace mangling  turns "Foo.bar()" into "f.b()"--if you're lucky global css namespace mangling code splitting

Codesplitting

• • If you have a very big application...

o downloading app to webpage takes a long time o o javascript evaluation takes a long time your users get bored and leave before your site loads a solution..

o o don't bring every piece of javascript down initially bring down only what you need, as you need it

Codesplitting(Continued)

• • • • The compiler will separate out the javascript for you o IF you tell it to Surround blocks of code which don't need to be downloaded initially with GWT.runAsync() Compiler will recognize this o moves everything which is connected to that point into a different .js file which is downloaded later only stuff which is directly connected to the entry point (no GWT.runAsync()) will be downloaded initially o sometimes this can be surprising

public void runSomeCodeAsync(){ GWT.runAsync(new RunAsyncCallback(){ void onFailure(Throwable t){ //your javascript failed to load!

} } } } void onSuccess(){ runMyAppCode();

Codesplit

Story of your Compile

• It's often confusing to determine what pieces of code are brought down in what split o GWT compiler can generate a summary  called the Story of Your Compile(SOYC)     Tells you where code has been split what code is included in that split what code is in the initial download what code is "left over"  code is left over if it fits in no split entirely  this is downloaded initially.

Caveats about GWT Compiler

• • GWT compiler is slooooow o Each permutation takes time  the compiler does a lot, and it does it repetitively o o permutations are easy to add  add a new browser  add a new language to compile for Codesplitting is nontrivial  tends to add quite a bit of build time Not unusual to see full builds take 30 minutes, 1 hour, or more

Caveats(Continued)

• You can speed up the compile o Compile fewer permutations o o use the -draftCompile command line argument Distributed Compiler  not really all the way there--you have to write some glue code

Development mode

• • • Obviously can't develop very effectively like that GWT team introduced Development Mode to make up for this Development Mode skips the compile stage and goes straight to the browser

Development mode(Continued)

• • • • Includes an embedded jetty server to run server code puts wrappers into javascript instead of actual code o when you interact with the page...

 each action you take is sent to the embedded server  that server compiles enough javascript to perform that action, and sends it back Can use debuggers with development mode for client side javascript debugging to make a UI change take effect, only need to refresh, not rebuild.

Development Mode(Continued)

• However...

o Development mode is not exactly the same as production mode  some bugs exist only in development   some bugs exist only in production development mode is much slower than production

Best practices

• • • • • • • Use UiBinder Use ClientBundle Use codesplitting o you would be amazed how much faster your app feels avoid excessive javascript o javascript is usually slower than HTML Don't make too many server calls Remember your Java Best practices Be kind to your users

Third party tools

• • • Gin(http://code.google.com/p/google-gin/) o like guice, but for GWT  no interceptors though gwttime(http://code.google.com/p/gwt-time o port of joda-time to GWT  not perfect (kinda big) gwt-log(http://code.google.com/p/gwt-log/) o o   better than nothing needs to be revamped log4j-style client side logging can be sent to the server!

Questions?

Contact

Twitter: @scottfines Email: [email protected]

LinkedIn