GWT
Relief from ajax pain

1
About me
Prayag Upd
Sr JVM Platform Programmer
Zazzercode Inc

2
Agenda
1. invention of ajax /ˈeɪdʒæks/
2. pain in ajax
3. GWT to the rescue
4. GWT dev tools
5. GWT app architecture
6. Wh...
1. invention of ajax
2004 - Gmail
first most interactive web based email client to use
XMLHttpRequest

4
1. invention of ajax
XMLHttpRequest
a JavaScript object easy way to retrieve data from a URL
without having to do a full p...
1. invention of ajax
XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.twitter.com/',
false);
xhr...
1. invention of ajax
2004 - Rediffmail
announced the use of XMLHttpRequest.

7
1. invention of ajax
Google Suggest

May 2005 - Google Personlize(iGoogle)
drag and drop aspect of JavaScript and a seamle...
1. invention of ajax
Google’s orkut
feature like star rating
2005 - Google map
allowing users to locate and view places on...
1. invention of ajax
Google’s stand with XMLHttpRequest has truly laid out the
foundation for how AJAX is being used today...
1. invention of ajax
2005, Jesse James Garrett coined a term AJAX

11
1. invention of ajax
AJAX incorporates
HTML/CSS
Presentation

12
1. invention of ajax
AJAX incorporates
HTML/CSS
Presentation
DOM
dynamic
display

13
1. invention of ajax
AJAX incorporates
HTML/CSS
Presentation
DOM
dynamic
display

XML/JSON

14
1. invention of ajax
AJAX incorporates
HTML/CSS
XMLHttpRequest
Presentation
XML/JSON
DOM
dynamic
display

15
1. invention of ajax
AJAX incorporates
HTML/CSS
XMLHttpRequest
Presentation
XML/JSON
DOM
dynamic
display

Server

JS

16
1. invention of ajax

17
1. invention of ajax

18
2. Pain in AJAX
Programming time

19
2. Pain in AJAX
Programming time

JS

HTML

crossbrowser
quirks

CSS

XML

20
2. Pain in AJAX
क मा
े
स नु
?

Programming time

JS

HTML

crossbrowser
quirks

CSS

XML

21
2. Pain in AJAX
debugging is not easier

22
2. Pain in AJAX
debugging is not easier

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

23
2. Pain in AJAX
RPC Overhead
a connection needs to be established and HTTP headers
(cookies etc.) are passed with every re...
3. GWT to the rescue

25
3. GWT to the rescue

GWT
/ˈɡwɪt/

26
3. GWT to the rescue
program and debug AJAX-based apps in Java

us

in

g

common
Java dev
tools
27
3. GWT to the rescue
deploy the same apps as client-side HTML and JS, and
server-side Java.

de

pl

oy

tomcat

28
3. GWT to the rescue
provides JRE emulation library (a subset of the java.lang and
java.util packages)

29
3. GWT to the rescue
Java2JavaScript compiler

30
3. GWT to the rescue
Java2JavaScript compiler

Zazzercode.java

AddUserView.java

GWT compiler

zazzercode.js
AddUserPrese...
3. GWT to the rescue
Hosted Web browser

32
3. GWT to the rescue
Hosted Web browser

Zazzercode.java

AddUserView.java

runs as Java
bytecode

JVM
AddUserPresenter.ja...
3. GWT to the rescue
Web UI class library

34
3. GWT to the rescue
Web UI class library

35
3. GWT to the rescue
Web UI class library - DatePicker example
import com.google.gwt.user.datepicker.client.DatePicker;

D...
3. GWT to the rescue
Web UI class library - DatePicker example
import com.google.gwt.user.datepicker.client.DatePicker;

D...
3. GWT to the rescue
GWT simplifies typical AJAX-style RPC
conversations between client-side(JavaScript)
and server-side (...
3. GWT to the rescue

39
4. GWT dev tools
1. GWT SDK,
http://www.gwtproject.org/download.html
2. Eclipse for JavaEE developers,
http://www.eclipse....
5. GWT app architecture

41
5. GWT app architecture

server layer
shared layer
client layer
42
5. GWT app architecture

server layer -Spring,JDBC, Hibernate
shared layer-common shared objects
client layer -GWT views
4...
server layer -Spring,JDBC, Hibernate

GW

T

RP

C

5. GWT app architecture

shared layer-common shared objects
client lay...
5. GWT app architecture

45
5. GWT app architecture
Screencast available at
gwt rpc using eclipse plugin, http://www.youtube.com/watch?
v=-rDe0PiUkaI
...
6. Who is using GWT
google adwords

47
6. Who is using GWT
orkut

48
6. Who is using GWT
evernote

49
6. Who is using GWT
chrome.angrybirds.com/

50
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...
References

[3] GWT relief from ajax pain, https://docs.google.
com/presentation/d/1jtH27L_tkf7CKWz8h8lPnQKMTdvvixqBo
ALvb...
References

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

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

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

[10] Is GWT's RPC different f...
References

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

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

[14] Is ...
Upcoming SlideShare
Loading in …5
×

Gwt - relief from ajax pain

594
-1

Published on

GWT - Relief from AJAX pain

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
594
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gwt - relief from ajax pain

  1. 1. GWT Relief from ajax pain 1
  2. 2. About me Prayag Upd Sr JVM Platform Programmer Zazzercode Inc 2
  3. 3. Agenda 1. invention of ajax /ˈeɪdʒæks/ 2. pain in ajax 3. GWT to the rescue 4. GWT dev tools 5. GWT app architecture 6. Who is using GWT 7. QA 3
  4. 4. 1. invention of ajax 2004 - Gmail first most interactive web based email client to use XMLHttpRequest 4
  5. 5. 1. invention of ajax XMLHttpRequest a JavaScript object easy way to retrieve data from a URL without having to do a full page refresh. XMLHttpRequest URL 5
  6. 6. 1. invention of ajax 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 pagen"); } }; xhr.send(null); 6
  7. 7. 1. invention of ajax 2004 - Rediffmail announced the use of XMLHttpRequest. 7
  8. 8. 1. invention of ajax Google Suggest May 2005 - Google Personlize(iGoogle) drag and drop aspect of JavaScript and a seamless integration with the async behavior of XMLHttpRequest. 8
  9. 9. 1. invention of ajax Google’s orkut feature like star rating 2005 - Google map allowing users to locate and view places on any point across the world all in the same browser 9
  10. 10. 1. invention of ajax Google’s stand with XMLHttpRequest has truly laid out the foundation for how AJAX is being used today. 10
  11. 11. 1. invention of ajax 2005, Jesse James Garrett coined a term AJAX 11
  12. 12. 1. invention of ajax AJAX incorporates HTML/CSS Presentation 12
  13. 13. 1. invention of ajax AJAX incorporates HTML/CSS Presentation DOM dynamic display 13
  14. 14. 1. invention of ajax AJAX incorporates HTML/CSS Presentation DOM dynamic display XML/JSON 14
  15. 15. 1. invention of ajax AJAX incorporates HTML/CSS XMLHttpRequest Presentation XML/JSON DOM dynamic display 15
  16. 16. 1. invention of ajax AJAX incorporates HTML/CSS XMLHttpRequest Presentation XML/JSON DOM dynamic display Server JS 16
  17. 17. 1. invention of ajax 17
  18. 18. 1. invention of ajax 18
  19. 19. 2. Pain in AJAX Programming time 19
  20. 20. 2. Pain in AJAX Programming time JS HTML crossbrowser quirks CSS XML 20
  21. 21. 2. Pain in AJAX क मा े स नु ? Programming time JS HTML crossbrowser quirks CSS XML 21
  22. 22. 2. Pain in AJAX debugging is not easier 22
  23. 23. 2. Pain in AJAX debugging is not easier अ घ मा च लरा कोड का ो लेम ् आयो फर े ? 23
  24. 24. 2. Pain in AJAX RPC Overhead a connection needs to be established and HTTP headers (cookies etc.) are passed with every request. 24
  25. 25. 3. GWT to the rescue 25
  26. 26. 3. GWT to the rescue GWT /ˈɡwɪt/ 26
  27. 27. 3. GWT to the rescue program and debug AJAX-based apps in Java us in g common Java dev tools 27
  28. 28. 3. GWT to the rescue deploy the same apps as client-side HTML and JS, and server-side Java. de pl oy tomcat 28
  29. 29. 3. GWT to the rescue provides JRE emulation library (a subset of the java.lang and java.util packages) 29
  30. 30. 3. GWT to the rescue Java2JavaScript compiler 30
  31. 31. 3. GWT to the rescue Java2JavaScript compiler Zazzercode.java AddUserView.java GWT compiler zazzercode.js AddUserPresenter.java User.java 31
  32. 32. 3. GWT to the rescue Hosted Web browser 32
  33. 33. 3. GWT to the rescue Hosted Web browser Zazzercode.java AddUserView.java runs as Java bytecode JVM AddUserPresenter.java User.java 33
  34. 34. 3. GWT to the rescue Web UI class library 34
  35. 35. 3. GWT to the rescue Web UI class library 35
  36. 36. 3. GWT to the rescue Web UI class library - DatePicker example import com.google.gwt.user.datepicker.client.DatePicker; DatePicker datePicker = new DatePicker(); 36
  37. 37. 3. GWT to the rescue Web UI class library - DatePicker example import com.google.gwt.user.datepicker.client.DatePicker; DatePicker datePicker = new DatePicker(); // Set the default value datePicker.setValue(new Date(), true); VerticalPanel panel = new VerticalPanel(); panel.add(datePicker); RootPanel.get("gwtContainer").add(panel); 37
  38. 38. 3. GWT to the rescue GWT simplifies typical AJAX-style RPC conversations between client-side(JavaScript) and server-side (Java). 38
  39. 39. 3. GWT to the rescue 39
  40. 40. 4. GWT dev tools 1. GWT SDK, http://www.gwtproject.org/download.html 2. Eclipse for JavaEE developers, http://www.eclipse.org/downloads/packages/eclipse-ide-javaee-developers/indigosr2 3. Google Plugin for Eclipse, https://developers.google. com/eclipse/docs/install-from-zip 40
  41. 41. 5. GWT app architecture 41
  42. 42. 5. GWT app architecture server layer shared layer client layer 42
  43. 43. 5. GWT app architecture server layer -Spring,JDBC, Hibernate shared layer-common shared objects client layer -GWT views 43
  44. 44. server layer -Spring,JDBC, Hibernate GW T RP C 5. GWT app architecture shared layer-common shared objects client layer -GWT views 44
  45. 45. 5. GWT app architecture 45
  46. 46. 5. GWT app architecture Screencast available at gwt rpc using eclipse plugin, http://www.youtube.com/watch? v=-rDe0PiUkaI 46
  47. 47. 6. Who is using GWT google adwords 47
  48. 48. 6. Who is using GWT orkut 48
  49. 49. 6. Who is using GWT evernote 49
  50. 50. 6. Who is using GWT chrome.angrybirds.com/ 50
  51. 51. 7. QA ? 51
  52. 52. Thank You
  53. 53. 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-approachweb-applications
  54. 54. References [3] GWT relief from ajax pain, https://docs.google. com/presentation/d/1jtH27L_tkf7CKWz8h8lPnQKMTdvvixqBo ALvbaxQwNk/edit [4] Ease AJAX development with the Google Web Toolkit, http://www.javaworld.com/javaworld/jw-12-2006/jw-1213-gwt. html
  55. 55. References [5] AJAX: JQuery, Google Web ToolKit or RichFaces, http: //germanescobar.net/2009/10/ajax-jquery-google-web-toolkitor.html/ [6] What are the downsides of AJAX apps hosted in a single HTML page?, http://www.quora.com/AJAX-1/What-are-thedownsides-of-AJAX-apps-hosted-in-a-single-HTML-page
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×