Google-Web-Toolkit (GWT)

Arya MirInternet και Εφαρμογές Web

6 Νοε 2011 (πριν από 5 χρόνια και 7 μήνες)

934 εμφανίσεις


Google-Web-Toolkit (GWT)
By: Bradford Stimpson
COMP 529
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.
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).
COMP 529
Bradford Stimpson
4
What is GWT trying to
accomplish?
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! 
COMP 529
Bradford Stimpson
5
Traditional Webapp
Development

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.
COMP 529
Bradford Stimpson
6
Traditional Webapp
Development (2)
Fig1: Taken from 
http://www.ibm.com/developerworks/ibm/library/it­booch_web/
 The Architecture of Web applications (Booch '01).
COMP 529
Bradford Stimpson
7
Traditional Webapp
Development (3)
Fig2:  Taken from Essential Software Architecture, Gorton pg.97.
COMP 529
Bradford Stimpson
8
MVC Refresher
Fig3: Taken from 
http://www.enode.com/x/markup/tutorial/mvc.html
COMP 529
Bradford Stimpson
9
Traditional Webapp
Development (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.
COMP 529
Bradford Stimpson
10
GWT Bandwidth Consumption
Fig4: Taken from 
http://217.77.36.138/presentations/javazone/2006/slides/4575.pdf
COMP 529
Bradford Stimpson
11
Enter Asynchronous Javascript and
XML (AJAX)
Fig4: Taken from 
http://www.adaptivepath.com/ideas/essays/archives/000385.php
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.
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.
COMP 529
Bradford Stimpson
14
GWT Widgets & Events

GWT Widgets are UI components like Swing but 
rendered using HTML, JavaScript and CSS.

Makes creating Rich User Interfaces much easier.

Example Widgets:
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?
COMP 529
Bradford Stimpson
16
GWT-RPC

There are many available solutions to perform Remote 
Procedure 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.
COMP 529
Bradford Stimpson
17
GWT-RPC (2)
COMP 529
Bradford Stimpson
18
GWT Hosted Mode & GWT
Web 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.
COMP 529
Bradford Stimpson
19
gwt­user.jar
Hosted Shell/Browser
Hosted Mode
MyApp.html:
<meta name=“gwt:module”
    
content=“com.xyz.MyApp”>

<script src=“gwt.js”>

<td id=“slot1”>       </td>
 
2
3
4
5
7
6
 
gwt.js
IDE
1
MyApp.gwt.xml
MyApp.java
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.
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.
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 unpredictable 
and 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.
COMP 529
Bradford Stimpson
23
Thank You
OR
you be the judge!