GWT is Smarter Than You
-
Upload
robert-cooper -
Category
Technology
-
view
5.057 -
download
0
description
Transcript of GWT is Smarter Than You
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