gwt - relief from ajax pain
Post on 26-Dec-2014
477 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related