GWT is Smarter Than You

GWT is Smarter Than You Robert Cooper Code Wrangler, REACH Heath CodeMash 2012

Introduction
Who is this guy?

I wrote this...

I work here…

I also do this stuff…

Jurassic Web
I’ve been doing web stuff since the time before time…

Remember DCOM? Yeah.
I have been working mostly in Java since the last millennium…

Then at JavaOne 2k6, I had my “Road to Damascus” experience…

What’s it all about, Alfie?
It is my goal to convince you that
if you aren’t using GWT to build AJAX apps,
you’re doing it wrong.
(Probably)

Speed Advisory…
Hit me up later.
Life moves pretty fast. If you don't stop and look around once in a while, you could miss it.

Who are you?
Taking your temperature…
Who are you?
Orally.

Elevator Pitch
JavaScript mostly sucks

Elevator Pitch
JavaScript mostly sucks
Gets out of hand quickly
Part of a larger ecosystem to which it has no relationships
JavaScript libraries are a pain to use and in too many cases (read: mobile) cause more harm than good.

Why You Care
I stole this next block of stuff…
(Ido Green is awesome)

Mobile is teh hotness
You will lose 13% of your users after 2sec! and 25% of your users after 4sec of load time.
Whatever.
We have all seen versions of
these stats since ’97.

Remember 8 sec rule on 56Kbd?

Speed Matters
http://greenido.wordpress.com/2012/01/01/mobile-web-performance/

I stole this slide, too.

Still stealing slides…

Why are you here?
Get all that for free?

GWT History
Introduced in 2006 (you knew that)
Cross Compiles Java to JavaScript (you probably knew that)
Works in all browsers (duh)
Used for lots of recent Google projects (Flights, Android Market, Wave (rip))
Good bit of third party adoption (Lombardi/IBM, OpenNMS, Seesmic, etc)
)

Stuff you may not know…
On Day 0, GWT had:
Multiple, targeted builds for User-Agent (UA) and i18n and more (including custom divisions)
A great caching strategy to let everything in your app have perma-cache settings
Automagical spritemaps of all the images in your application (read: 1 HTTP request for ImageBundles)
Compiler optimization (not just obfuscation)
Testing, Packaging, Modules
( )

Other pains
Timestamp localization
XSS security issues
Complex X-Browser eventing (Bubble vs Sink)
Server messaging
Referential object serialization
Oh wait. GWT 1.0 took care of all of that too.
(Confidential)

I can do that myself!
Can you really?
( )

Monolithic compilation is an idea whose time has come again.
(Confidential)

More than Cross Compilation
Deferred Binding is the core to how GWT works
Handles DOM and Eventing implementations for the different browsers
Handles i18n issues
Is why building the final deployment version takes FOR-EVER.

Module.gwt.xml
Yeah, I know.
It is Java so there HAS to be an XML file.
( )

And code generation…

Look sir, Buzzwords!
Dependency Injection!
Meta-Programming!

Deployable Compiles Are Slow
Many versions!
Lots of time.
SSDs and Quad i7s recommended.

Caches PERFECTLY
Each build spits out a bunch of MD5 hashed filenames
File names based on the actual source that generated the file (AFTER UA/i18n/your stuff)
All of these files can be cached permanently!
1 “.nocache.js” bootstrap that picks the right version
This file can be in-lined with standard JSP @includes

Optimized!
Unreachable code is pruned
Staticification
Non-polymorphic calls are converted to “static” (global scope functions)
myCircle.computeArea() becomes computeArea(_this)
WAY, WAY faster.
Method inlining
Getters/setters melt away

Progress
1.x line improvements
Multi-threaded compiler
SOYC
New compress-able naming (GZIP-targeted)
Java 1.5 language features (Generics)
JavaScript Overlays (more on this next)
Handlers rather than Listeners
Pluggable dev servers

JavaScriptOverlays
Allows you to extend JavaScriptObject to work JS/JSON-P data
Code like this:
Becomes:
It HAS to be final because of the staticification logic.
That means no interface implementation for JSOs!

Could be better…
Lots of things still sucked in 1.x
SWT based “Development Shell” Limited you to 1 browser on a platform
No salvation from CSS Hell (nee, MSIE6)
Hard to fit into the established dev process, assuming you have a real graphic design staff
The whole block of code for an app came down at once (made doing #! type code hard)

Listeners Improved
addXHandler() returns a HandlerRegistration addValueChangeHandler( ValueChangeHanlder<String>)
HandlerRegistration has .removeHandler()
This is a lot easier to clean up than a bunch of add/removeListener() calls
Store all your HandlerRegistrations for a state in a collection
Iterate and .removeHandler() on each of them
No need to maintain target/listener mappings

Core API Improved
Core widgets got a cleanup:
CheckBox implements HasValue<Boolean>
TextBox implements HasValue<String>
etc
IsWidget interface
More flexible that extending widget
Makes using non-GWT UI easier
XXLayoutPanel
Improved, and CSS-accelerated layouts

Heads up
If you haven’t played with GWT in a while, now is the time to start paying attention.

GWT 2.x features
OOPHM (or OOMPH, or DevMode, not GWTShell)
Image in-lining (NOT spritesheets)
Compiled CSS (yes, better than LESS-CSS or SASS)
Developer guided point cuts
UIBinder
“ MVP - Framework”

OOPHM
Out of Process Hosted Mode (or DevMode)

One ring to rule them all
I’m not a Windows fan, but...
Safari, FF, Chrome, MSIE(x), Opera

“ Super Draft Mode is Coming…”

I like the DevMode tooling I fear change.

CSS Best Practices

Images
You think getting your designers to make spritesheets makes you tough.

Your designer went to art school

How many do image in-lining in their CSS?
Bring down all your incidental images in the same HTTP Request as your CSS!

GWT 2.x CssResource and ImageResource
Becomes:
(New name matches GZIP optimized naming)

Next, You need a ClientBundle…
And a CssResource…
And to inject it…

Wait, what just happened?
Now, your optimized CSS and all your incidental art assets are compiled into the JavaScript, GZIPped, and downloaded in the single, initial HTTP Request for your app…
One (1) Request, and your app is done loading .

How much would you pay for all this?
But wait, there’s more!

@def – Define those repeated bits
Now include these in your styles…

@if/@elif/@else – Do conditional CSS based on the compile time options
Works for user.agent, language, even your own custom compile options

@url – Lets you embed arbitrary data for all kinds of stuff
ClientBundle:
CSS File:
Great for Fonts, Cursors, etc…

@noflip – Surpresses flipping on CSS directions for automagic Right-Left i18n flipping (did I mention automagic RTL/LTR language support?)

Maybe that is all too much to download…
Did you try runAsync()?

You want to be a good web citizen.
You want your app to support deep links
(without hash-bangs, plzkthxbai)
but you don’t need the whole app to render, say, one “product page” or “blog post”.

GWT.runAsync() allows for “developer guided point-cuts” in your compiled output.

Eliminate initial code download
All the code *only* reachable from inside the RunAsyncCallback.onSuccess() method is compiled into another set of script files
This can include CSS/Image/DataResources
It is only loaded *once* and cached properly
Shared code between any two callbacks OR code reachable from onModuleLoad() still makes it into the base script (core CSS, java.util.ArrayList, GWT’s UIObject, etc)

Pay attention
Not a silver-bullet, BUT…
Way better than JavaScript library dependency semantics
Still includes the UA/i18n/Custom compile optimizations
For big* code bases, truly a must-have
Look at SOYC to see what you can tweak
*for EXTREMELY large values of “big”

99 problems, but process ain’t 1
OK, but what about all that SWING widgeting? I gotta work with “HTML+ designers”?
Use UIBinder.

UIBinder
Lets you use XHTML files for widget templates (OR do declarative mixing with GWT widgets)
Toss whatever HTML you need to in there.

Two ways to do it…
Work with the DOM directly (sucks)

Two ways to do it…
Create GWT Widgets (rules)

Moar speed!
Using GWT widgets lets you work with the new CSS-engine accelerated LayoutPanel stuff, and that is awesomesauce.

Framework
GWT 1.x was decidedly “non-frameworky”
It was a UITK at best
It was a fancy compiler/DI/MP system at worst (not that that was a bad thing)
GIN/Guice did a lot to improve this
GWT 2.x is slightly more opinionated
Model – View – Presenter framework
(NOT MVC)
Not a fan

Places
GWT 1.x included a “History” system
This lets you deal with anchor slugs (“#somethings”) in the URL to allow the back button to work
GWT 2.x encourages you to use these as “Places” (standard slugs rather than roll-your-own)

Boilerplate… Ugh…
The “Places” System is made up of four main components
The PlaceHistoryMapper This is pretty much just a config file
The ActivityMapper This returns an Activity for a Place
Activities Mini-Apps that are mapped to a render area
HistoryObserver A Place-aware HistoryTokenListener replacement

PlaceHistoryMapper (gets generated)
The tokenizers just turn an anchor slug to a string.

ActivityMapper return an activity for a Place
.getActivity(Place,Place) here is just a big if structure, but you can do better.

Activities have a .start() method that takes the UI parent and a reference to the app-global EventBus.

Using HistoryObserver to do transitions:

These examples from m-gwt:
http://www.m-gwt.com/
You should use this, and maybe GWT-PhoneGap:
http://code.google.com/p/gwt-phonegap/

M-GWT on Phones

Android Tablet

My United States of Whatever

Enterprise-y!
Spring Roo integration gives you Rails-like autogen of basic app scaffolding
Geordi not included.

MOAR SPEED
SpeedTracer
(Even if you don’t use GWT, you should use this)

… and Enterprise-y!
If you are using
Spring Server Tools/Roo or Google App Engine,
you can drill from the browser
into the the calls on the server
and see why your server is slow, too!

Eat it, FireBug
SpeedTracer
+
WebKit tools
=
Best Dev Tools Available

Drawbacks
SpeedTracer only works in Chrome.
Finding exactly what is slow in Brand X browser?
YMMV.

Coming Soon
SourceMaps
Developed by Google and Mozilla
Maps compiled JavaScript to original source files
CoffeeScript, Dart, GWT, Closure
Makes “Super Draft Mode” less WTF
Unified Compiler Infrastructure
Google is getting Dart, GWT, and Closure on the same toolchain
Future Dart backends for GWT code
I study nuclear science. I love my classes.

Still more to explore
Google Tools for Eclipse
Instantiations purchase brought in all kinds of awesome
I still hate the plugin
New Widgets
Better Browser Support
HTML5 Stuff
PlayN (formerly ForPlay) (This is totally awesome, build games for HTML5, Flash, Java, and Android with 1 codebase)
Third Party stuff (SmartGWT, EXT-GWT)

Summary
GWT at launch was technically impressive, but still seemed small.
GWT is not small anymore.
GWT is filled with Google institutional knowledge.
GWT does all best practices.
GWT can build better JavaScript than you.
GWT future-proofs your application.

Links
http://code.google.com/webtoolkit/
http://greenido.wordpress.com/2012/01/01/mobile-web-performance/
http://m-gwt.com/
http://code.google.com/p/gwt-phonegap/
http://code.google.com/p/playn/
http://www.sencha.com/products/extgwt
http://code.google.com/p/smartgwt/
http://profiles.google.com/kebernet
http://www.slideshare.net/kebernet/gwt-is-smarter-than-you

GWT is Smarter Than You

by Robert Cooper on Jan 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

GWT is Smarter Than You Presentation Transcript