Ajax and GWT

Ajax and GWT Niraj Juneja Blog : http://www.gandalf-lab.com

Your speaker
{
Niraj Juneja
Principal – Webscale Solutions
Focus on :
- Cloud Computing (Amazon EC2 , AppEngine , Project Caroline)
- Webscale (Big Table , Hadoop , Hbase)
- Collective Intelligence
Tools of the Trade :
- GWT , Spring , Hibernate , Map Reduce , python
}

What is AJAX
Asynchronous JavaScript + XML
XMLHttpRequest Object
Rich Internet Applications with JavaScript
Is it new?
Not Really
Hidden Frames
IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+
Examples of AJAX
GMail
Google Maps
Most new Web2.0 applications

What is AJAX
Why is it popular?
Google helped popularize, and legitimize it in GMail
Increase Usability of Web Applications
Rich Internet Applications without Flash
Save Bandwidth
Download only data you need
Faster interfaces (sometimes)
Why is it bad?
Breaks back button support
URL's don't change as state changes
Cross Browser Issues can be a pain
JavaScript may tax older machines CPU
Can't access domains other than the calling domain
May be disabled (for security reasons) or not availiable on some

So what is XMLHttpRequest ?
XMLHttpRequest
A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript
Make an HTTP request from a JavaScript event
A call back JavaScript function is invoked at each state of the HTTP request and response
XMLHttpRequest Properties
onreadystatechange - call back function for state changes
readyState - the current state of the HTTP call
responseText - the text result of the request
responseXML - DOM xml object from the request
status - HTTP status code of the response
statusText - HTTP status text

Comparing Ajax and Non-Ajax
Web1.0 UI
AJAX UI
The shift above has a big impact on the style of application development
In and 100% Ajax driven application you will end up implementing MVC but the Controller will be on the client and in Javascript
This has implications to the choice of Web Framework you use (Struts , JSF etc)

AJAX Marketplace
Javascript based libraries
Prototype
YUI
A whole lot of others
IDE’s with end to end solutions
Adobe
Tibco
GWT – googles web toolkit

Ajax Decisions
Usage Scenarios
Ground Up – The Entire Applications driven by Ajax
Incremental
Usage scenarios will drive the choice of Web-Ajax Framework to use
Please don’t build your own Ajax Framework

Things to be aware of
Browser has a max on the number of threads(3 ??)
You are shifting your processing and potentially a lot of logic to the client (Browser)
Don’t use the traditional web1.0 paradigms while designing applications (Actionforms , MVC type 2 , Use if httpsession)

Now the cool part - GWT
What is GWT?
GWT is Java Web development, literally.
...
helloButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
label1.setText("Hello World!");
}
});
...
Your Java code is compiled into AJAX (HTML and JavaScript) Web
Using well designed AJAX application is a pleasure but coding and maintaining large projects in JavaScript isn’t
GWT helps to relief some pain out of AJAX application development.

GWT makes AJAX development simpler
Develop with java which is compiled to JavaScript
Use Rich Java Tool set – Eclipse , Netbeans , Junit , ant , maven
The Server Side is Servlet technology based – Embedded tomcat in the install
Easy to Test
Cross Browser issues are mostly resolved
You can still use your existing JavaScript codes – JSNI
Developer momentum – GXT , GWT EXT
IE / FireFox / Mozilla / Safari / Opera

GWT Programming Model
Exposes several Java packages including
java.util.*
Java.lang.*
Use MVC design pattern at the client side
Swing Like Programming Model
Ability to have listeners and Observer / Observables
Generally no html ( just 1 html page)

Javascript to Java compiler
GWT compiler converts Java code into JavaScript code, in much the same way the Java compiler compiles Java code into bytecode.
Compilation is done by running the Java program com.google.gwt.dev.GWTCompiler , passing it the location of the module definition file along with some other parameters.
GWT obfuscates the compiled output so that everything is compressed and impossible to decipher. Other (‘pretty/detailed’) options are also available for development purpose.
Java code which has to be > JDK1.4
JDK 1.5 features (Generics etc) currently not supported on the client side , but will shortly be supported

Getting Started with GWT
Where do we start?
1) Install the Java SDK
2) Download GWT
http://code.google.com/webtoolkit/download.html
3) Unzip the Package
4) Create Your Application

Lets Write Some Code
Coding By Convention
Your Package Structure
com/mysite/myapp/
Project root containing module XML files.
com/mysite/myapp/client/
Client-side source files and sub-packages. Compiled into JavaScript.
com/mysite/myapp/server/
Server-side code and sub-packages. Compiled to Java. (Servlets, Data Access Objects)
com/mysite/myapp/public/
Static resources that can be served publicly. (HTML, CSS, Images)

Package Structure

Lets Write Some Code
1) projectCreator
Used to make an Eclipse project for one of the samples that comes with GWT
projectCreator
[-ant projectName] – Ant build file to compile source.
[-eclipse projectName] – Generate an Eclipse project.
[-out dir] – Directory to write output files.
[-overwrite] – Overwrite any existing files.
[-ignore] – Ignore existing files, do not overwrite.
2) applicationCreator
Generates a starter application and scripts for launching hosted mode and
compiling to JavaScript
applicationCreator
[-eclipse projectName] – Debug launch configurations for Eclipse project.
[-out dir] – Directory to write output files.
[-overwrite] – Overwrite any existing files.
[-ignore] – Ignore existing files, do not overwrite.
className – Fully-qualified name of the application class to write.

The User Interface Think HTML in terms of Swing and SWT... ...this is where GWT uses Widgets and Panels to dynamically create HTML... ...Widgets and Panels can be found in the GWT user-interface library...more information can be found on the GWT site...these images are there too!

GWT events and Listeners

GWT Events and Listeners

Running your Application

GWT – RPC

GWT - RPC

http://www.slideshare.net	25
http://www.gandalf-lab.com	18

Ajax and GWT

by niraj j

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 43

Statistics

Ajax and GWT Presentation Transcript

Ajax and GWT

by niraj j

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 43

Statistics

Ajax and GWT Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare