Download - Devfest09 Cschalk Gwt
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
4
AJAX... uh... what?
• Also known as Asynchronous JavaScript And XML • JavaScript can issue asynchronous server requests • JavaScript can manipulate the user interface
5
The AJAX architectural shift
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!”
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."
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
9
What is GWT?
10
How it works
Code against Java UI libraries
Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200 Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200
11
How it works
Code against Java UI libraries
The compiler translates Java source to highly-optimized JS
12
How it works
Code against Java UI libraries
The compiler translates Java source to highly-optimized JS
Generates browser-compliant JS + HTML files
Key concepts
Productivity for you
Performance for your users
Custom JavaScript per browser
Demo: Getting started building GWT apps
GWT Advantages
17
GWT Advantages – Faster Ajax applications
• The efficient code you wish you could write, but will get slammed by cross-browser issues for trying to run it
Faster-than-you-would-write-by-hand code
public static void onModuleLoad(){ Button b = (new Button()).Button(); b.setText("Click me!"); }
public static final void onModuleLoad(){ final Button b = Button.$Button(new Button()); DOMImplIE6.$setInnerText(b.element, ”Click me!"); }
E.g.
– a variation for IE6 would be:
18
GWT Advantages – Faster Ajax applications
– Another variation: Faster-than-you-would-write-by-hand code
function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, 'Click me!'); }
19
GWT Advantages – Faster Ajax applications
– Another variation Faster-than-you-would-write-by-hand code
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
20
GWT Advantages – Faster Ajax applications
• 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
Deferred binding
21
GWT Advantages – Faster Ajax applications
• 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
Deferred binding
22
GWT Advantages – Faster Ajax applications
Deferred binding illustrated
23
GWT Advantages – No more 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
Preventing memory leaks
24
GWT Advantages – History support
• GWT offers History support (RSH implementation) History support for your GWT applications
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)); } } };
E.g.
25
GWT Advantages – Faster development
• Code refactoring with IDE tools greatly improve developer speed!
Faster development with IDEs and code support
Google Plugin for Eclipse – Support both GWT and App Engine
26
GWT Advantages – Faster development
• You can also thoroughly test your Ajax application using a combination of: – Standard JUnit TestCase – GWTTestCase
– HTMLUnit tests – Selenium tests
Faster development with IDEs and code support
27
GWT Advantages – Debugging in bytecode
• Debugging in hosted mode allows for rapid testing • Running against JS bytecode in memory
Debugging with hosted mode
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
GWT Tools and Widgets
Google Plugin for Eclipse
http://code.google.com/eclipse/
Widget libraries
• GWT (http://code.google.com/webtoolkit/)
• Incubator (http://code.google.com/p/google-web-toolkit-incubator/)
• Smart GWT (http://code.google.com/p/smartgwt/)
• GWT-Ext (http://code.google.com/p/gwt-ext/)
• IT Mill Toolkit (http://www.itmill.com/)
• GWT mosaic (http://code.google.com/p/gwt-mosaic/)
• Ext GWT (http://extjs.com/products/gxt/)
• Advanced GWT Components (http://advanced-gwt.sourceforge.net/)
New features coming in GWT 2.0
33
GWT 2.0: More advantages
• Hosted mode becomes “development mode” • Code splitting • Client bundle • Declarative UI in XML (UiBinder) • … and much more
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!
35
Developer-guided code splitting with runAsync
public void onMySettingsLinkClicked() {
GWT.runAsync(new RunAsyncCallback() {
public void onSuccess() { new MySettingsDialog().show(); }
public void onFailure(Throwable ohNo) { // indicate that something went wrong, // usually a connectivity or server problem }
Split point
Runs after a short (but improbable) delay
Runs if required script cannot be downloaded
runAsync() Helps Apps Startup More Quickly
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar
Siz
e of
Initi
al J
avaS
crip
t Dow
nloa
d (K
B)
375
750
1125
1500
0
7x Decrease In Initial Download Size with runAsync()
1400 KB
200 KB
1125
37
ImageBundle revisited
• Each <img> tag is one HTTP roundtrip • Bundle them up!
• 11 HTTP roundtrips become 1
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>
Who's using GWT?
Google Wave
Google Health
Mobile
Google Web Toolkit
Large GWT Apps - Lombardi Blueprint
Google Web Toolkit
Large GWT Apps – ContactOffice
Google Web Toolkit
Large GWT Apps - scenechronize
46 Google Web Toolkit
Many more in the GWT App Gallery http://gwtgallery.appspot.com/
Learn more
code.google.com/webtoolkit
Q&A
Muchas Gracias!