gwt = easy ajax
TRANSCRIPT
GWT = Easy AJAX
CONFOO.CA11/3 /2010
Who am I?
Olivier GérardinTechnical Director, Sfeir Benelux (groupe
Sfeir)Java / Web architect13+ years Java3 years GWT
Agenda
Little GWT showcaseWhy GWT?How does it work?Key featuresMyths & misconceptionsPointers, Conclusion, Q&A
GWT Showcase
Seesmic webGWT Equation editorGWTUMLPiano EtudesClarity AccountingContactOfficeMyERP, CompiereExt-GWT explorerAnd more: Google Wave, Timetonote CRM…
MANDATORY AND OVERSIMPLIFIED HISTORY OF THE DYNAMIC WEB
Why GWT?
Web 0.0
Or “The Link Era” A web page is just a bunch of images and text with
links Pages are usually stored (not generated) Links take you to a new page
1. Click on link2. HTTP request is built (from static link URL) and sent3. Wait for server to reply4. Server replies with HTML page (usually from file)5. Response received blank screen6. Wait for entire page to load
Web 1.0
Or “The Form Era” In addition to images and text, a web page can contain
fields and other widgets A designated button submits the form Pages are build
1. Fill in form2. Submit3. HTTP request is built (from form parameters and field values)
and sent4. Wait for server to reply5. Server replies with HTML page (usually generated on server)6. Response received blank screen7. Wait for entire page to load
Server side processing
CGI Basic bridge to OS commands Very ineffective (1 request = 1 process)
Web server / application server PHP, JSP, ASP, perl, whatever Performance improvements
On-demand compilation Thread pooling
Page is totally reconstructed for every request
1995: here comes JavaScript
Client-side scriptingFirst usage: client-side form validation
Avoid server round-trip when invalid Instant feedback
With DOM: polymorphic client page (DHTML) Menus, animations, etc.
Cross-browser (almost)No server interaction without submit/reload
2000: XHTTPR and AJAX
MS introduces Outlook Web Access Web “clone” of desktop client (Outlook) Fetches data from server without reloading page!
How is that possible? New class: XmlHttpRequest Allows server interaction without page reload Response received asynchronously Interface updated through DOM
AJAX is born!
The first AJAX app: Outlook Web Access
JavaScript frenzy
JS becomes hype… Cool-looking, nice to use web UIsEveryone wants to do JavaScriptAny serious web site must have dynamic
content, auto-completion or other AJAX goodies
Widget sets / frameworks begin to emerge Scriptaculous, YUI, dojo, jScript, …
Anything seems possible in JavaScript JavaScript OS, AjaxSwing (WebCream), …
JavaScript hangover
Serious JavaScript hurts… Cross-browser compatibility nightmare
Fix in one, break in another JavaScript Guru required!
Developing/Debugging nightmare Weird runtime errors No static typing No refactoring
And.. Memory leaks Heavy pages Security issues
JavaScript confusion
Source: BrowserBook © Visibone
What to do?
Option 1: leave the hard work to others Build the demo with AJAX Win the contract Leave the team…
Option 2: Give up AJAX For what? Flex? Silverlight? JavaFX? Plugin required SEO unfriendly Learning curve AJAX is too cool!
Google is in the same boat
Google is a heavy producer of AJAX appsHad to come up with a solution…
GWT solves all your problems
GWT gives you AJAX without the pain of JavaScript development Takes care of cross-browser issues Allows full debugging (breakpoints, step by step,
inspecting/watching variables) Strong static typing early error detection Full refactoring options No browser plugin or mandatory IDE Short learning curve Simple RPC mechanism built in
But can communicate with any server technology
Program in Java…
GWT allows developing client-side web apps in full Java (with only a few restrictions) Leverage existing Java tools and skills Use any IDE (Eclipse, NetBeans, IntelliJ, …)
Program like a traditional graphical client (Swing, SWT, …) Widgets, containers, listeners, etc. Use OO patterns (MVC, MVP, observer, composite, etc.)
Test like any Java app Use standard Java debuggers Test with JUnit
… deploy in JavaScript
JavaScript is only generated: For deployment To test in actual web mode
GWT guarantees that the generated JavaScript app behaves exactly like the Java app And it does (most of the time)
How does it work?
4 easy pieces
1) Java-to-JavaScript compiler2) JRE emulation library3) Java libraries4) Hosted Development mode
GWT compiler
Generates JS code from Java sourcePerforms numerous optimizations
In most cases better than hand coding Can generate obfuscated (ultra-compact) code
JS plays a role similar to bytecode for compiled Java applications Shocking!
JRE Emulation library
Provides a GWT-compatible version of Java core classes Most of java.lang Most of java.util Some classes of java.io and java.sql
For convenience only! No real I/O or JDBC!
Used when running in web mode Hosted mode runs in a JVM with standard JRE
GWT Java libraries
Utility classes RPC, I18N, …
Widget set Simple widgets (Button, TextField, …)
Base building blocks In most cases map to native HTML object
Composites = widgets built from other widgets Panels = widget containers
Panels enforce a layout (vertical, horizontal, grid, …)
GWT widgets: Simple widgets
GWT widgets: Composites
GWT widgets: Panels
Development mode
Allows running GWT apps without converting them to JavaScript Code runs as Java bytecode in a standard JVM Development mode shell emulates JS runtime
Actual rendering done by real browser Performs extensive checks to make sure the code is
compilable to JavaScriptBottom line: if a GWT application performs as
expected in development mode, it will perform identically in web mode 99,9% of the time…
LUXEMBOURG INTERESTING FACTS
Cultural break
Luxembourg is very small
Fits inside a 82 x 67 km rectanglePopulation < 500k (Montréal: 1.6 m)
Luxembourg City is beautiful
Luxembourg has a lot of castles
Luxembourg Trivia
World’s only Grand-DuchyMore than 150k cross-border workers
50% of the capital city’s population during working hours
3 official languages (fr, de, lu)Highest GDP per capitaImportant financial center (funds)Home of Europe’s largest TV/radio company
(RTL group)2 hours away from Paris by TGV / international
airport
Back to GWT:Key features
Easy development
During development, you are writing and running a classic Java app Use your favorite IDE All IDE features available (code completion, code
analysis, refactoring, links, Javadoc, …) Plugins help GWT-specific tasks
launching development mode compiling refactoring creating projects, modules, RPC services, … even design GUI (GWT Designer from Instantiations)
Easy RPC implementation
RPC mechanism based on Java servletsEasy as:
1. Define service interface
int add (int x, int y);
2. Derive asynchronous interface
void add (int x, int y, AsyncCallback<Integer> callback);
3. Implement service interface
public int add (int x, int y) {return x + y;
}
Easy RPC consumption
Easy as:1. Obtain service proxy
AddServiceAsync addService = GWT.create(AddService.class);
2. Call method
addService.add(x, y, new AsyncCallback<Long>() {public void onFailure(Throwable caught) {
// handle failure}public void onSuccess(Integer result) {
// handle success}
});
Easy RPC deployment
RPC services are actually POJS (plain old Java servlets) Can be deployed without changes in any servlet
engine Integrated test server uses standard web.xml format
for declaring services
Easy JSON generation
Easy as:
JSONObject livre = new JSONObject();
livre.put("Titre", new JSONString("GWT"));livre.put("Pages", new JSONNumber(123));
JSONArray chapitres = new JSONArray();chapitres.set(0, new JSONString("Introduction"));
Easy JSON parsing
Easy as:
JSONObject livre = new JSONObject(json);
String titre = livre.get("Titre").isString().stringValue();double pages = livre.get("Pages").isNumber().doubleValue();
JSONArray chapitres = livre.isArray();String chap0 = chapitres.get(0).isString().stringValue();
Deferred binding
Appropriate code for user environment (browser, locale) is chosen at application startup time ≠ dynamic binding (implementation chosen at runtime) ≠ static binding (implementation chosen at compile time)
Code for every combination is generated at compile time Advantages:
Allows app-wide optimizations Compensates for the lack of dynamic (runtime) loading
Disadvantages: Increases compilation time
Deferred Binding (explicit)
Deferred binding can be called explicitly:
Foo foo = GWT.create(Foo.class);
Implementation is provided by either: Substitution: an existing class is designated Generation: class is generated during compilation
Easy native JavaScript integration
Implement a method directly in JavaScript:
public static native void alert(String msg) /*-{$wnd.alert(msg);
}-*/;
Call back Java methods from JavaScript Pass objects back and forth
Useful to Wrap legacy JavaScript libraries Access browser functionality not exposed by GWT
Dangerous! Easily breaks cross-browser compatibility
Easy Widget reuse
Create your own widgets: Extend existing widget
Works but not the most efficient Might expose unwanted methods from superclass
Extend Composite Recommended method
Use JSNI To wrap existing JavaScript widgets
Easy history support
AJAX app = single page “back” button catastrophe…
GWT solution: Encode app state in URL as “fragment”
E.g. http://myserver/myGwtApp#x=1;y=2
Save state:History.newItem(token);
React to state change (“back” button)History.addValueChangeHandler(…);
I18n: constant substitution
1. Define interfacepublic interface AppConstants extends Constants { String title();}
2. “Implement” interfaceAppConstants.properties: title = Hello, WorldAppConstants_fr_CA.properties: title = Salut, Monde
…
3. UseAppConstants appConstants = GWT.create(AppConstants.class);String title = appConstants.title();
I18n: template substitution
1. Define interfacepublic interface AppMessages extends Messages { String mailStatus(int n, String s);}
2. “Implement” interface (AppMessages.properties)mailStatus = You have {0} messages in folder {1}
3. Use:AppMessages msgs = GWT.create(AppMessages.class);String status = msgs.mailStatus(15, “Inbox”);
Easy debugging
In development mode, application runs as bytecode (just like any old Java app…)
So you can debug it just like any classic Java app: Set breakpoints Step through code Inspect variables Change variables …
Short dev cycle
Change client code: press “Reload”.. Done!
Change server code: Embedded server: press “Restart”.. Done! External server: hotswap /redeploy if needed
Easy client-server testing
Integrated application server for testing RPC services Can be disabled to use external server
JUnit integration to run client-side test cases Hosted mode or web mode Full access to RPC services GWTTestCase, GWTTestSuite for automation
Selenium for automated GUI testing
Easy scaling
All session data resides on client Similar to classic fat client
No session information on server-side Forget session affinity Add/remove servers on the fly Restart server without losing clients
“Easy” styling
Styling relies entirely on CSS Widgets have well-known style names Programmer can add custom styles
No shift from traditional HTML styling HTML/DOM build page “skeleton” Appearance tuned with CSS
Separate UI construction from styling With well thought styles, it’s possible to reskin completely
an application without changing one line of codeGWT styling has all the benefits of CSS with all
problems of CSS Be careful with brower dependencies!
Easy Google AJAX APIs
Project gwt-google-apis http://code.google.com/p/gwt-google-apis Libraries that wrap Google JavaScript APIs
Maps Gears (storage, obsoleted by HTML5) Gadgets (embedable applets) AJAX search (embedded google search) Visualization (charts) Language (translation, language detection)
Standalone libraries (do not require JavaScript libraries)
[new in 2.0] in-browser development mode
Before 2.0: hosted mode uses customized browser engine Heavily customized
Only one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)
Difficult to keep up-to-date Includes platform-specific code (SWT)
Browser and hosted application share the same process
Most plugins don’t work (including Google Gears…)
[new in 2.0] in-browser development mode
now: Hosted mode shell runs outside browser Communicates with browser using plugin through
TCP
[new in 2.0] in-browser development mode
Benefits Use any (supported) browser/version on any platform Behavior closer to web mode No interference with browser plugins No more platform-specific stuff in GWT (one jar for
all!) Network protocol cross-platform possible
Dev mode shell on machine X, slave browser on machine Y
E.g. dev on Linux, test in IE on Windows…
[new in 2.0] speed tracer
Performance analysis toolVisualize where your app spends time:
JS execution Browser rendering CSS handling (style selection/calculation) DOM handling (event processing) Resource loading
[new in 2.0] code splitting
Before: monolithic download can become very big Slow startup times
After: Programmer can insert “split points” in code Hints for the compiler to place everything not required up to
split point in separate download Compiler divides code in several “chunks”, which are loaded
on-demandBenefits:
Initial loading time reduced 50% on average with a single split point
Allows on-demand module loading (provider pattern)
[new in 2.0] declarative UI
Declarative construction of GUI using XML grammar
Allows automatic binding with Java code (through annotations) Automatically assign references to dynamically created
widgets to designated Java fields (@UiField) Automatically attach methods as event handlers
(@UiHandler)Benefits:
Clearly separate: Static UI construction (XML) Dynamic UI behavior (Java)
[new in 2.0] resource bundle
Download multiple heterogeneous resources from server in a single request Images (already possible in pre-2.0) CSS Text Any binary resource
Benefits: Fewer round trips to the server Less overhead More responsive interface
[new in 2.0] and also…
Compiler optimizations Mostly generated JS size
Draft compile mode Faster builds Not for deployment!
Layout panels Predictable, consistent layout Constraint based system built on top of CSS Plays nice with custom CSS styles
HtmlUnit No native code / browser required
Myths & misconceptions
Myth: GWT is a JS library/framework/widget set
GWT is not for JavaScript developersProvides only Java classes
Myth: GWT is a framework
GWT is a toolkit (set of tools)Frameworks may be built on top of it
Myth: GWT is applets
A GWT application is 100% JavaScriptNo runtime/pluginNo JRE required
Myth: GWT is only for Java programmers
Yes, GWT uses Java as programming language…
BUT you can also see it this way:
GWT lets you write/debug/test/refactor AJAX apps with state-of-the-art IDEs and tools using a statically-typed object-oriented language
GWT makes it worth learning Java!
Myth: GWT generates poorly performing JS
The GWT compiler generates highly optimized and compact code
Hand written JavaScript might be marginally faster in some cases, but it’s not worth the trouble
Myth: GWT only works with a Java backend
GWT includes a simple and efficient RPC mechanism that relies on Java servlets
BUT it plays nice with any server-side technology that can handle HTTP requests (even PHP) Includes XML encoding/decoding library Includes JSON encoding/decoding library
Myth: GWT has poor UI components
Yes, GWT’s builtin widgets are minimalistic…
BUT GWT’s point is not to provide a complete and beautiful widget set
GWT provides the basis for rich and good-looking components
Create your own or use 3rd party See Ext-GWT, SmartGWT
Myth: GWT apps have long startup times
Not longer than any JavaScript appObfuscation reduces sizeDeferred binding loads just the necessary
code for the platform/languageGWT 2.0’s code splitting can split code in
several chunks Smaller initial download On-demand downloading
Myth: GWT doesn’t integrate with existing sites
GWT was designed from the beginning with the goal to integrate well into existing sites
GWT can build the UI from a blank HTML page or alter existing elements
Very easy to add GWT to an existing page Only a few lines of HTML to load the module Can “hook up” to any DOM element (through its ID)
Myth: GWT has poor skinning possibilities
GWT uses CSS for stylingCan reskin a whole application without
changing a line of code (done that!)Can split work between developer (behavior)
and designer (appearance)Caution: CSS can introduce browser
dependencies
Conclusion
Is GWT the future of web development?
GWT has passed reality checkGive it a try!
GWT = easy AJAX now !
=
Pointers
GWT home (downloads, docs, FAQs, guides, etc.) http://code.google.com/toolkit
Google groups “GWT” group http://groups.google.com/group/Google-Web-Toolkit
onGWT: fresh news about GWT http://www.ongwt.com
LinkedIn “GWT Users” group http://www.linkedin.com/groups?gid=129889
Shameless self-promotion
