This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk
2. Google Web Toolkit: A technical overview
Chris Schalk
Con: Gabriel Praino
DevFest 2009
November 17th, 2009
3. Agenda
• AJAX: what it is and why it's important
• Introducing GWT
• GWT advantages
• GWT 2.0 features
• Who’s using GWT
• Q&A
3
4. AJAX... uh... what?
• Also known as Asynchronous JavaScript And XML
• JavaScript can issue asynchronous server requests
• JavaScript can manipulate the user interface
4
6. The AJAX slippery slope
• Experiment with “a bit of script”
• Everybody loves it! More!
• When did we became an AJAX shop?
• Attempt to port to something other than Internet Explorer
• Wait... this is hard!
• Result: “A tangled mess!”
6
7. GWT’s Mission
"GWT's mission is to radically improve
the web experience for users by
enabling developers to use existing
Java tools to build no-compromise
AJAX for any modern browser."
7
8. Google Web Toolkit at a glance
• Write code in the JavaTM language using your favorite Java
IDE
• Debug as bytecode against a special browser (hosted mode)
• Cross-compile into standalone optimized JavaScript (web
mode)
• No browser plugins / no obligatory server-side machinery
• Includes extensive cross-browser libraries
• User interface (DOM, widgets, ...)
• Client/server communication (XHR, RPC, JSON, ...)
• App infrastructure (history, timers, unit testing, i18n, a11y, ...)
• External services (Gadgets, Gears, Google Maps, ...)
• JavaScript integration
• JavaScript Native Interface (JSNI)
• Fully open source under Apache 2.0
8
10. How it works
Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200
Code against Java UI libraries
10
11. How it works
Code against Java UI libraries
The compiler translates Java source to highly-optimized JS
11
12. How it works
Generates browser-compliant JS + HTML files
Code against Java UI libraries
The compiler translates Java source to highly-optimized JS
12
17. GWT Advantages – Faster Ajax applications
Faster-than-you-would-write-by-hand code
• The efficient code you wish you could write, but will get
slammed by cross-browser issues for trying to run it
E.g.
public static void onModuleLoad(){
Button b = (new Button()).Button();
b.setText("Click me!");
}
– a variation for IE6 would be:
public static final void onModuleLoad(){
final Button b = Button.$Button(new Button());
DOMImplIE6.$setInnerText(b.element, ”Click me!");
}
17
18. GWT Advantages – Faster Ajax applications
Faster-than-you-would-write-by-hand code
– Another variation:
function onModuleLoad(){
var b;
b = $Button(new Button());
$setInnerText(b.element, 'Click me!');
}
18
19. GWT Advantages – Faster Ajax applications
Faster-than-you-would-write-by-hand code
– Another variation
function onModuleLoad(){
var b;
b = $Button(new Button());
$setInnerText(b.element, ’Click me!');
}
• You could have written this by hand, but:
– You would have to change it for every other browser
19
20. GWT Advantages – Faster Ajax applications
Deferred binding
• Why give the user more than they asked for?
• Users only download what they need to run your
application
• Made possible through the technique of deferred
binding
20
21. GWT Advantages – Faster Ajax applications
Deferred binding
• A technique that lets the compiler make different
bindings for your application at compile-time and choose
the right one later
• The application bootstrap process selects the correct
binding when loading your application
21
23. GWT Advantages – No more memory leaks
Preventing memory leaks
• Provided you only code in GWT
• Chances are, you may need to write a small bit of
JavaScript Native Interface (JSNI) or interoperate
with JavaScript code
• In those cases, you can prevent memory
leaks by being careful
– See Joel Webber’s
article on “DOM events, memory leaks, and you”
– http://code.google.com/p/google-web-toolkit/wiki/DomEventsAndMemoryLeaks
• In every other case, GWT has got your back
23
24. GWT Advantages – History support
History support for your GWT applications
• GWT offers History support (RSH implementation)
E.g.
tabPanel.add(new HTML("<h1>Page 1 Content</h1>"), " Page 1 ");
tabPanel.add(new HTML("<h1>Page 2 Content</h1>"), " Page 2 ");
tabPanel.addTabListener(new TabListener() {
@Override
public void onTabSelected(SourcesTabEvents sender, int tabIndex) {
// Push an item onto the history stack
History.newItem("page" + tabIndex);
}
History.addHistoryListener(new HistoryListener() {
public void onHistoryChanged(String historyToken) {
if(tokenIsValid(historyToken)) {
tabPanel.selectTab(getTabIndex(historyToken));
}
}
};
24
25. GWT Advantages – Faster development
Faster development with IDEs and code support
• Code refactoring with IDE tools greatly improve
developer speed!
Google Plugin for Eclipse – Support both GWT and
App Engine
25
26. GWT Advantages – Faster development
Faster development with IDEs and code support
• You can also thoroughly test your Ajax application using
a combination of:
– Standard JUnit TestCase
– GWTTestCase
– HTMLUnit tests
– Selenium tests
26
27. GWT Advantages – Debugging in bytecode
Debugging with hosted mode
• Debugging in hosted mode allows for rapid testing
• Running against JS bytecode in memory
27
28. Summary of development advantages
• Optimized, high performance Ajax applications
• As a developer, you don’t have to worry about:
– Browser quirk headaches
– Memory leaks
– History support
• Code reuse through design patterns
• Faster development using IDEs and other Java tools
• Debugging in bytecode
28
33. GWT 2.0: More advantages
• Hosted mode becomes “development mode”
• Code splitting
• Client bundle
• Declarative UI in XML (UiBinder)
• … and much more
33
34. Code Splitting: Big scripts, big problems
• Problem: Initial download can be slooooow
– Some apps becomes bigger over time
– Parsing through initial script can cause UI to hang
– Current day browsers have a two connection limit
• Solution: Split up the script!
34
35. Developer-guided code splitting with runAsync
public void onMySettingsLinkClicked() {
Split point GWT.runAsync(new RunAsyncCallback() {
Runs after a short
(but improbable) delay public void onSuccess() {
new MySettingsDialog().show();
}
Runs if required script public void onFailure(Throwable ohNo) {
cannot be downloaded // indicate that something went wrong,
// usually a connectivity or server problem
}
35
36. runAsync() Helps Apps Startup More
Quickly
1500
1400 KB
Size of Initial JavaScript Download (KB)
1125
1125
750
7x Decrease In
Initial Download Size
with runAsync()
375
200 KB
0
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar
37. ImageBundle revisited
• Each <img> tag is one HTTP roundtrip
• Bundle them up!
• 11 HTTP roundtrips become 1
37
38. Declarative UIs with UiBinder
• Build your UI in declarative XML
<!-- UserDashboard.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:com.my.app.widgets' >
<g:HTMLPanel>
<my:WeatherReport ui:field='weather'/>
<my:Stocks ui:field='stocks'/>
<my:CricketScores ui:field='scores' />
</g:HTMLPanel>
</ui:UiBinder>
38
