gwt is smarter than you

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

2. Introduction

Who is this guy?

3.

I wrote this...

4.

I work here

5.

I also do this stuff

6. Jurassic Web

Ive been doing web stuff since the time before time

7. Remember DCOM? Yeah.

I have been working mostly in Java since the last millennium

8.

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

9. Whats it all about, Alfie?

It is my goal to convince you that

if you arent using GWT to build AJAX apps,

youre doing it wrong.

(Probably)

11.

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.

12. Who are you?

Taking your temperature

Who are you?

Orally.

13. Elevator Pitch

JavaScript mostly sucks

14. Elevator Pitch


15. Elevator Pitch


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.

16. Why You Care

I stole this next block of stuff

(Ido Green is awesome)

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

18. Remember 8 sec rule on 56Kbd?

19. Speed Matters

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

20. I stole this slide, too.

21. Still stealing slides

22. Why are you here?

Get all that for free?

23. 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)

)

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

( )

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

26.

I can do that myself!

Can you really?

( )

27.

Monolithic compilation is an idea whose time has come again.

(Confidential)

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

29. Module.gwt.xml

Yeah, I know.

It is Java so there HAS to be an XML file.

( )

30.

And code generation

31. Look sir, Buzzwords!

Dependency Injection!

Meta-Programming!

32. Deployable Compiles Are Slow

Many versions!

Lots of time.

SSDs and Quad i7s recommended.

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

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

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

37. 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!

38. 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)

39. Listeners Improved

addXHandler() returns a HandlerRegistration addValueChangeHandler( ValueChangeHanlder)

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

40. Core API Improved

Core widgets got a cleanup:

CheckBox implements HasValue

TextBox implements HasValue

etc

IsWidget interface

More flexible that extending widget

Makes using non-GWT UI easier

XXLayoutPanel

Improved, and CSS-accelerated layouts

41. Heads up

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

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

43. OOPHM

Out of Process Hosted Mode (or DevMode)

44. One ring to rule them all

Im not a Windows fan, but...

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

45.

Super Draft Mode is Coming

46. I like the DevMode tooling I fear change.

47.

CSS Best Practices

48. Images

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

49. Your designer went to art school

50.

How many do image in-lining in their CSS?

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

51.

GWT 2.x CssResource and ImageResource

Becomes:

(New name matches GZIP optimized naming)

52.

Next, You need a ClientBundle

And a CssResource

And to inject it

53.

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 .

54.

How much would you pay for all this?

But wait, theres more!

55.

@def Define those repeated bits

Now include these in your styles

56.

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

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

57.

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

ClientBundle:

CSS File:

Great for Fonts, Cursors, etc

58.

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

60.

Maybe that is all too much to download

Did you try runAsync()?

61.

You want to be a good web citizen.

You want your app to support deep links

(without hash-bangs, plzkthxbai)

but you dont need the whole app to render, say, one product page or blog post.

62.

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

64. 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, GWTs UIObject, etc)

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

66. 99 problems, but process aint 1

OK, but what about all that SWING widgeting? I gotta work with HTML+ designers?

Use UIBinder.

67. UIBinder

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

Toss whatever HTML you need to in there.

68. Two ways to do it

Work with the DOM directly (sucks)

69. Two ways to do it

Create GWT Widgets (rules)

70. Moar speed!

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

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

72. 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)

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

74.

PlaceHistoryMapper (gets generated)

The tokenizers just turn an anchor slug to a string.

75.

ActivityMapper return an activity for a Place

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

76.

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

77.

Using HistoryObserver to do transitions:

78.

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/

79. M-GWT on Phones

80. Android Tablet

81. iPad

82. My United States of Whatever

83. Enterprise-y!

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

Geordi not included.

84. MOAR SPEED

SpeedTracer

(Even if you dont use GWT, you should use this)

85. 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!

86. Eat it, FireBug

SpeedTracer

+

WebKit tools

=

Best Dev Tools Available

87. Drawbacks

SpeedTracer only works in Chrome.

Finding exactly what is slow in Brand X browser?

YMMV.

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

89. 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)

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

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