8/3/2019 GWT Presentation v1
1/23
Google-Web-Toolkit (GWT)
By: Bradford Stimpson
COMP 529
8/3/2019 GWT Presentation v1
2/23
COMP 529 Bradford Stimpson 2
What is GWT?
GWT is: A framework for building AJAX enabled Web
applications using the Java language.
What makes GWT interesting? Absolutely everything is in Java. Write, run, test and
debug your entire Web application (including client and
server side code) all in one language.
Is GWT the same as Java Applets? Not at all. Everything is compiled into pure JavaScript
which means no JVM is required.
8/3/2019 GWT Presentation v1
3/23
COMP 529 Bradford Stimpson 3
GWT Features
A Basic API for creating Graphical User Interfaces (GUI) Similar to Swing and SWT.
API for Manipulating the Web browser's Document Object
Model (DOM).
Java-to-JavaScript Compiler.
Only required to know Java, XML and CSS. No JavaScript.
No HTML. No PHP/ASP/CGI.
An environment for running and debugging GWT
applications called the GWT shell (Hosted Mode).
8/3/2019 GWT Presentation v1
4/23
COMP 529 Bradford Stimpson 4
What is GWT trying toaccomplish?
1) Shield the developer from JavaScript.
2) Shield the developer from browser idiosynchracies.
3) Abstract browser's DOM API into a unified API.
4) Provide a mechanism to manage user's browsing history.
5) Provide common widgets such as textboxes, radio buttons,
etc... to speed up Web development.
6) Provide the ability to implement a stateful Web Client!
8/3/2019 GWT Presentation v1
5/23
COMP 529 Bradford Stimpson 5
Traditional WebappDevelopment
Server Dependent Architecture
Essentially, Web browsers are dumb terminals.
Web Server handles everything.
User Interface is stateless (The HTML protocol has
no concept of state).
Traditional Web applications are synchronous.
8/3/2019 GWT Presentation v1
6/23
COMP 529 Bradford Stimpson 6
Traditional WebappDevelopment (2)
Fig1: Taken from http://www.ibm.com/developerworks/ibm/library/it-booch_web/The Architecture of Web applications (Booch '01).
http://www.ibm.com/developerworks/ibm/library/it-booch_web/http://www.ibm.com/developerworks/ibm/library/it-booch_web/8/3/2019 GWT Presentation v1
7/23
COMP 529 Bradford Stimpson 7
Traditional WebappDevelopment (3)
Fig2: Taken from Essential Software Architecture, Gorton pg.97.
8/3/2019 GWT Presentation v1
8/23
COMP 529 Bradford Stimpson 8
MVC Refresher
Fig3: Taken from http://www.enode.com/x/markup/tutorial/mvc.html
http://www.enode.com/x/markup/tutorial/mvc.htmlhttp://www.enode.com/x/markup/tutorial/mvc.html8/3/2019 GWT Presentation v1
9/23
COMP 529 Bradford Stimpson 9
Traditional WebappDevelopment (4)
ISSUES:
The UI is always stateless Cannot improve 'interactivity' with the user.
The concept of a Session is very complicated in this model. Makes it hard to manage User's history within the Webapp.
Big strain is put on Web servers with increasing demand
(the Utube incident!). Apps are sluggish and extremely bandwidth hungry.
Every page (a.k.a View) is loaded from scratch.
8/3/2019 GWT Presentation v1
10/23
COMP 529 Bradford Stimpson 10
GWT Bandwidth Consumption
Fig4: Taken from http://217.77.36.138/presentations/javazone/2006/slides/4575.pdf
http://217.77.36.138/presentations/javazone/2006/slides/4575.pdfhttp://217.77.36.138/presentations/javazone/2006/slides/4575.pdf8/3/2019 GWT Presentation v1
11/23
COMP 529 Bradford Stimpson 11
Enter Asynchronous Javascript andXML (AJAX)
Fig4: Taken from http://www.adaptivepath.com/ideas/essays/archives/000385.php
http://www.adaptivepath.com/ideas/essays/archives/000385.phphttp://www.adaptivepath.com/ideas/essays/archives/000385.php8/3/2019 GWT Presentation v1
12/23
COMP 529 Bradford Stimpson 12
Cost of AJAX
Finally, we can have some interactivity but at a cost.
Every Web browser is different (IE refuses to adopt the
same models as everyone else). Easy to attack when Webapp has lots of JS. Badly coded AJAX is much worse than badly coded
HTML.
====================================== The application is much prettier! Wow factor. Full application with no installation.
8/3/2019 GWT Presentation v1
13/23
COMP 529 Bradford Stimpson 13
Overall Issues
Developing with AJAX is a drag.
Acronym Soup (and they really don't play nice with one another): HTTPS?, [DX]?HTML (3.2|4.0), CSS[1-3] DOM Level[0-3] (Java|ECMA|J|VB)Script (X|VR?|Math)ML SVG, Canvas, Flash JSON, SOAP, XML-RPC
No Object Orientation (JavaScript prototypes are not pleasent).
No Static type checking.
No design patterns.
No unit testing, and the list goes on...
Surely, there must be a better way.
8/3/2019 GWT Presentation v1
14/23
COMP 529 Bradford Stimpson 14
GWT Widgets & Events
GWT Widgets are UI components like Swing butrendered using HTML, JavaScript and CSS.
Makes creating Rich User Interfaces much easier.
Example Widgets:
8/3/2019 GWT Presentation v1
15/23
COMP 529 Bradford Stimpson 15
GWT Widgets & Events
How do the Widgets and Events work?
public void anonClickListenerExample() {
Button b = new Button("Click Me");
b.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
// handle the click event
}
});
}
Look closely. What design pattern is in action here?
8/3/2019 GWT Presentation v1
16/23
COMP 529 Bradford Stimpson 16
GWT-RPC
There are many available solutions to perform RemoteProcedure Calls (RPC) (e.g. JSON, XML-RPC).
GWT uses a pure Java implementation (simply define 2
interfaces)
interface SpellService extends RemoteService {public String[] suggest(String word)
}
interface SpellServiceAsync{
public void suggest(String word, AsyncCallback callback);
} Essentially, the client and server speak the same language. Inner Classes make it easy to deal with Asynchronous RPCs.
8/3/2019 GWT Presentation v1
17/23
COMP 529 Bradford Stimpson 17
GWT-RPC (2)
8/3/2019 GWT Presentation v1
18/23
COMP 529 Bradford Stimpson 18
GWT Hosted Mode & GWTWeb Mode
GWT uses two different development modes.
Hosted Mode is a 'simulated' mode which can be run
entirely from Eclipse using the GWT Shell.
Consists of a customized Tomcat Web container.
Java is run as-is which can take advantage of Eclipse debugging
capabilities.
Web Mode is the deployment mode.
All Java is compiled to JavaScript plus associated artifacts
(HTML, CSS) and can be deployed to a true Web container.
8/3/2019 GWT Presentation v1
19/23
COMP 529 Bradford Stimpson 19
gwt-user.jar
Hosted Shell/Browser
Hosted Mode
MyApp.html:
2
3
4
5
7
6
gwt.js
IDE1
MyApp.gwt.xml
MyApp.java
8/3/2019 GWT Presentation v1
20/23
COMP 529 Bradford Stimpson 20
Architectural Implications
Traditional Web application architecture is no more.
Instead it may be more appropriate to develop using:
Model-State-Controller (MSC) pattern.
Model-Controller-State-Controller (MCSC) pattern.
8/3/2019 GWT Presentation v1
21/23
COMP 529 Bradford Stimpson 21
GWT Advantages Clients are now stateful (no more sessions!).
UI Event handling only client's responsibility.
Easy deployment (just JavaScript).
Leverage the power of the Java language.
No more needle in the haystack bugs (thank you static checking).
Unit testing (somewhat).
Applications are now Cross-Browser capable (don't need to speak browser).
Improved Scalability (less load on the server).
Rich remote procedure call (RPC) semantics.
Improved code reuse.
8/3/2019 GWT Presentation v1
22/23
COMP 529 Bradford Stimpson 22
Drawbacks of GWT
GWT is not the silver bullet; it is the best available.
GWT only supports Java 1.4.2 with minimal amounts of the
java.lang.* and java.util.* libraries.
Large JavaScript applications can sometimes be unpredictableand sluggish.
Only JavaScript enabled browser's can run the application.
Older browsers and handheld devices are not supported.
Can take a long time to load and heavily uses the client's
resources.
8/3/2019 GWT Presentation v1
23/23
COMP 529 Bradford Stimpson 23
Thank You
OR
you be the judge!