GWT is Smarter Than You

Robert CooperCode Wrangler, REACH Heath

CodeMash 2012

Introduction

Who is this guy?

2

I wrote this...

3

I work here…

4

I also do this stuff…

5

Jurassic Web

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

6

Remember DCOM? Yeah.

I have been working mostly in Java since the last millennium…

7

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

8

What’s it all about, Alfie?

It is my goal to convince you thatif you aren’t using GWT to build AJAX apps,

you’re doing it wrong.

(Probably) 9

10

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. 11

Who are you?

Taking your temperature…

Who are you?

Orally. 12

Elevator Pitch

• JavaScript mostly sucks

13

Elevator Pitch

• JavaScript mostly sucks

14

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.

15

Why You Care

I stole this next block of stuff…

(Ido Green is awesome)

16

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.

17

Remember 8 sec rule on 56Kbd?

18

Speed Matters

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

19

I stole this slide, too.

20

Still stealing slides…

21

Why are you here?

Get all that for free?

22

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)

) 23

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

( ) 24

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) 25

I can do that myself!

Can you really?

( ) 26

Monolithic compilation is an idea whose time has come again.

(Confidential) 27

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.

28

Module.gwt.xml

Yeah, I know. It is Java so there HAS to be an XML file.

( ) 29

And code generation…

30

Look sir, Buzzwords!

Dependency Injection!Meta-Programming!

31

Deployable Compiles Are Slow

Many versions!

Lots of time.

SSDs and Quad i7s recommended. 32

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

33

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

34

35

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

36

JavaScriptOverlays

Allows you to extend JavaScriptObject to work JS/JSON-P dataCode like this:

Becomes:

It HAS to be final because of the staticification logic. That means no interface implementation for JSOs!

37

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)

38

Listeners Improved

• addXHandler() returns a HandlerRegistrationaddValueChangeHandler( 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

39

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

40

Heads up

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

41

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”

42

OOPHM

Out of Process Hosted Mode (or DevMode)

43

One ring to rule them all

I’m not a Windows fan, but...

Safari, FF, Chrome, MSIE(x), Opera

44

“Super Draft Mode is Coming…”

45

I like the DevMode tooling

I fear change. 46

CSS Best Practices

47

Images

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

48

Your designer went to art school

49

How many do image in-lining in their CSS?

Bring down all your incidental images in the same HTTP Request as your CSS!

50

GWT 2.x CssResource and ImageResource

Becomes:

(New name matches GZIP optimized naming)

51

Next, You need a ClientBundle…

And a CssResource…

And to inject it…

52

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.

53

How much would you pay for all this?

But wait, there’s more!

54

@def – Define those repeated bits

Now include these in your styles…

55

@if/@elif/@else – Do conditional CSS based on the compile time options

Works for user.agent, language, even your own custom compile options

56

@url – Lets you embed arbitrary data for all kinds of stuff

ClientBundle:

CSS File:

Great for Fonts, Cursors, etc…

57

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

58

59

Maybe that is all too much to download…

Did you try runAsync()?

60

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”.

61

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

62

63

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)

64

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

65

*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.

66

UIBinder

• Lets you use XHTML files for widget templates (OR do declarative mixing with GWT widgets)

• Toss whatever HTML you need to in there.

67

Two ways to do it…

• Work with the DOM directly (sucks)

68

Two ways to do it…

• Create GWT Widgets (rules)

69

Moar speed!

Using GWT widgets lets you work with the new CSS-engine accelerated LayoutPanel stuff, and

that is awesomesauce.

70

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

71

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)

72

Boilerplate… Ugh…

The “Places” System is made up of four main components

• The PlaceHistoryMapperThis is pretty much just a config file

• The ActivityMapperThis returns an Activity for a Place

• ActivitiesMini-Apps that are mapped to a render area

• HistoryObserverA Place-aware HistoryTokenListener replacement

73

PlaceHistoryMapper (gets generated)

The tokenizers just turn an anchor slug to a string.

74

ActivityMapper return an activity for a Place

.getActivity(Place,Place) here is just a big if structure, but you can do better.

75

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

76

Using HistoryObserver to do transitions:

77

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/

78

M-GWT on Phones

79

Android Tablet

80

iPad

81

My United States of Whatever

82

Enterprise-y!

Spring Roo integration gives you Rails-like autogen of basic app scaffolding

Geordi not included. 83

MOAR SPEED

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

84

…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!

85

Eat it, FireBug

SpeedTracer +

WebKit tools=

Best Dev Tools Available

86

Drawbacks

SpeedTracer only works in Chrome.

Finding exactly what is slow in Brand X browser?

YMMV.

87

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. 88

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)

89

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.

90

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

91