1

GWTRelief from ajax pain

About me

2

Prayag Upd Sr JVM Platform Programmer Zazzercode Inc

Agenda

3

1. invention of ajax /ˈeɪdʒæks/2. pain in ajax3. GWT to the rescue4. GWT dev tools5. GWT app architecture6. Who is using GWT7. QA

1. invention of ajax

4

2004 - Gmail first most interactive web based email client to use XMLHttpRequest

1. invention of ajax

5

XMLHttpRequest a JavaScript object easy way to retrieve data from a URL without having to do a full page refresh.

XMLHttpRequest URL

1. invention of ajax

6

XMLHttpRequest

var xhr = new XMLHttpRequest();xhr.open('GET', 'http://api.twitter.com/', false); xhr.onreadystatechange = function (aEvt) { if (xhr.readyState == 4) { if(xhr.status == 200) dump(xhr.responseText); else dump("Error loading page\n"); }};xhr.send(null);

1. invention of ajax

7

2004 - Rediffmail announced the use of XMLHttpRequest.

1. invention of ajax

8

Google Suggest

May 2005 - Google Personlize(iGoogle) drag and drop aspect of JavaScript and a seamless integration with the async behavior of XMLHttpRequest.

1. invention of ajax

9

Google’s orkut feature like star rating

2005 - Google mapallowing users to locate and view places on any point across the world all in the same browser

1. invention of ajax

10

Google’s stand with XMLHttpRequest has truly laid out the foundation for how AJAX is being used today.

1. invention of ajax

11

2005, Jesse James Garrett coined a term AJAX

1. invention of ajax

12

HTML/CSSPresentation

AJAX incorporates

1. invention of ajax

13

HTML/CSSPresentation

DOMdynamic display

AJAX incorporates

1. invention of ajax

14

HTML/CSSPresentation

DOMdynamic display

XML/JSON

AJAX incorporates

1. invention of ajax

15

HTML/CSSPresentation

DOMdynamic display

XML/JSON

XMLHttpRequest

AJAX incorporates

1. invention of ajax

16

DOMdynamic display

XML/JSON

XMLHttpRequest

Server

AJAX incorporates

HTML/CSSPresentation

JS

1. invention of ajax

17

1. invention of ajax

18

2. Pain in AJAX

19

Programming time

2. Pain in AJAX

20

Programming time

JS cross-browser quirks

HTML CSSXML

2. Pain in AJAX

21

Programming time

JS cross-browser quirks

HTML CSSXML

के मा स नु

?

2. Pain in AJAX

22

debugging is not easier

2. Pain in AJAX

23

debugging is not easier अ घ मा च लरा कोड का ो लेम ्आयो फेर ?

2. Pain in AJAX

24

RPC Overhead

a connection needs to be established and HTTP headers (cookies etc.) are passed with every request.

3. GWT to the rescue

25

3. GWT to the rescue

26

GWT

/ˈɡwɪt/

3. GWT to the rescue

27

program and debug AJAX-based apps in Java

common Java dev tools

using

3. GWT to the rescue

28

deploy the same apps as client-side HTML and JS, and server-side Java.

tomcat

deploy

3. GWT to the rescue

29

provides JRE emulation library (a subset of the java.lang and java.util packages)

3. GWT to the rescue

30

Java2JavaScript compiler

3. GWT to the rescue

31

Java2JavaScript compiler

zazzercode.js

Zazzercode.java

AddUserView.java

AddUserPresenter.java

User.java

GWT compiler

3. GWT to the rescue

32

Hosted Web browser

3. GWT to the rescue

33

Hosted Web browser

JVM

Zazzercode.java

AddUserView.java

AddUserPresenter.java

User.java

runs as Java bytecode

3. GWT to the rescue

34

Web UI class library

3. GWT to the rescue

35

Web UI class library

3. GWT to the rescue

36

Web UI class library - DatePicker exampleimport com.google.gwt.user.datepicker.client.DatePicker;

DatePicker datePicker = new DatePicker();

3. GWT to the rescue

37

Web UI class library - DatePicker exampleimport com.google.gwt.user.datepicker.client.DatePicker;

DatePicker datePicker = new DatePicker();// Set the default valuedatePicker.setValue(new Date(), true);

VerticalPanel panel = new VerticalPanel();panel.add(datePicker);

RootPanel.get("gwtContainer").add(panel);

3. GWT to the rescue

38

GWT simplifies typical AJAX-style RPC conversations between client-side(JavaScript) and server-side (Java).

3. GWT to the rescue

39

4. GWT dev tools

40

1. GWT SDK,http://www.gwtproject.org/download.html

2. Eclipse for JavaEE developers,http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/indigosr2

3. Google Plugin for Eclipse, https://developers.google.com/eclipse/docs/install-from-zip

5. GWT app architecture

41

5. GWT app architecture

42

server layer

shared layer

client layer

5. GWT app architecture

43

server layer -Spring,JDBC, Hibernate

shared layer-common shared objects

client layer -GWT views

5. GWT app architecture

44

GWT

RPC server layer -Spring,JDBC, Hibernate

shared layer-common shared objects

client layer -GWT views

5. GWT app architecture

45

5. GWT app architecture

46

Screencast available at gwt rpc using eclipse plugin, http://www.youtube.com/watch?v=-rDe0PiUkaI

6. Who is using GWT

47

google adwords

6. Who is using GWT

48

orkut

6. Who is using GWT

49

evernote

6. Who is using GWT

50

chrome.angrybirds.com/

7. QA

51

?

Thank You

References

[1] The birth of AJAX – an amazing story, http://techtracer.com/2007/03/12/the-birth-of-ajax-an-amazing-story/

[2] Ajax: A New Approach to Web Applications,http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

References

[3] GWT relief from ajax pain, https://docs.google.com/presentation/d/1jtH27L_tkf7CKWz8h8lPnQKMTdvvixqBoALvbaxQwNk/edit

[4] Ease AJAX development with the Google Web Toolkit, http://www.javaworld.com/javaworld/jw-12-2006/jw-1213-gwt.html

References

[5] AJAX: JQuery, Google Web ToolKit or RichFaces, http://germanescobar.net/2009/10/ajax-jquery-google-web-toolkit-or.html/

[6] What are the downsides of AJAX apps hosted in a single HTML page?, http://www.quora.com/AJAX-1/What-are-the-downsides-of-AJAX-apps-hosted-in-a-single-HTML-page

References

[7] Be aware of AJAX's drawbacks, http://www.techrepublic.com/blog/software-engineer/be-aware-of-ajaxs-drawbacks/

[8] What is the disadvantage of using websocket/socket.io where ajax will do?, http://stackoverflow.com/a/6829575/432903

References

[9] What is the disadvantage of DWR?, http://stackoverflow.com/a/1006625/432903

[10] Is GWT's RPC different from AJAX?, http://stackoverflow.com/a/13736656/432903

References

[11] GWT - Showcase of Features, http://ongwt.googlecode.com/svn/trunk/com.google.gwt.sample.showcase.Showcase/Showcase.html

[12] Is GWT's RPC different from AJAX?, http://stackoverflow.com/a/13736656/432903

References

[13] Using XMLHttpRequest, https://developer.mozilla.org/es/docs/XMLHttpRequest/Usar_XMLHttpRequest

[14] Is GWT's RPC different from AJAX?, http://stackoverflow.com/a/13736656/432903