The document discusses Google Web Toolkit (GWT), a development toolkit that allows developers to write client-side applications in Java and compile them to optimized JavaScript that runs across browsers, providing features like Ajax functionality, browser compatibility, and optimizations for both developers and users. GWT uses generators, translators, and linkers to compile Java code into JavaScript that can run directly in web browsers.

1. Google Web Toolkit
Building Web Apps Sanely
Chris Ramsdale
Developer Relations, Google

2. Between us and lunch
• Overview
• Deeper dive
• Optimizations for developers
• Optimizations for users
• Intro to GWT & MVP

3. From 25,000 feet
• Development toolkit, not a framework
• Code in Java, run as Javascript
• One codebase, any browser
• Makes Ajax a piece of cake...and faster
• Used within many Google products, including
Google Wave and Ad Words

4. The GWT Family
GWT SDK Google Plugin Speed Tracer
For Eclipse

5. It’s a loving relationship

6. It’s a loving relationship
Develop

7. It’s a loving relationship
Develop Debug

8. It’s a loving relationship
Develop Debug
Optimize

9. Focus on the users
Our users - developers
• Leverage existing IDEs and tools
• Minimize refresh time between codes changes
• Automate where possible
Your users - customers
• Minimize startup time
• Make it a comfortable experience
• Allow them to select the browser

10. Different Goals

11. Different Goals
Developers
• Next killer feature
• Making it look good
• Code refactoring

12. Different Goals
Developers Customers
• Next killer feature • Make it fast
• Making it look good • ...oh, and don’t charge
my credit card twice
• Code refactoring

13. Different Goals
Developers Customers
• Next killer feature • Make it fast
• Making it look good • ...oh, and don’t charge
my credit card twice
• Code refactoring

14. No plugins required
Silverlight
VML Flash

15. Nothing against them, but...
Foo Player not available for
your device
We restrict use of
technologies required by
products like Foo Player...

16. Quirkiness
Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms

17. Quirkiness
Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms
Improvement 14% 29% 32% 39%

18. Quirkiness
Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms
Improvement 14% 29% 32% 39%
http://quirksmode.org/blog/

19. Can you find the bug?
function getMax(values) {
var maximum = values[0];
for (var i = 0; i < values.length; ++i) {
if (values[i] > maximum) {
maxinum = values[i];
}
}
return maximum;
}

20. Can you find the bug?
function getMax(values) {
var maximum = values[0];
for (var i = 0; i < values.length; ++i) {
if (values[i] > maximum) {
maxinum = values[i];
}
}
return maximum;
}
Hint: Javascript is a dynamic language

21. Our plugin can
Java is a static language

22. A Java to Javascript compiler right?
13

23. More like assembly-level JS
function rd(a,b){var c;if(b.b){b.b=false;b.c=null}c=b.c;b.c=a.f;try{++a.c;Cd(a.e,b,a.d)}finally{--
a.c;a.c==0&&sd(a)}if(c==null){b.b=true;b.c=null}else{b.c=c}}
function Hb(b,c){yb();$wnd.setTimeout(function(){var a=$entry(Eb)(b);a&&$wnd.setTimeout(arguments.callee,c)},c)}
function ih(a,b){var c,d;if(b.e!=a){return false}try{Vg(b,null)}finally{c=b.f;(d=(hc(),c).parentNode,(!d||d.nodeType!
=1)&&(d=null),d).removeChild(c);ki(a.b,b)}return true}
function hj(c){if(c.length==0||c[0]>ao&&c[c.length-1]>ao){return c}var a=c.replace(/^(s*)/,cn);var b=a.replace(/s*
$/,cn);return b}
function qj(a){var b,c,d,e;b=0;d=a.length;e=d-4;c=0;while(c<e){b=a.charCodeAt(c+3)+31*(a.charCodeAt(c
+2)+31*(a.charCodeAt(c+1)+31*(a.charCodeAt(c)+31*b)))|0;c+=4}while(c<d){b=b*31+a.charCodeAt(c++)}return b|0}
function Bj(a){var b,c,d,e;e=this.v();a.length<e&&(a=Pd(a,e));d=a;c=this.p();for(b=0;b<e;++b)
{Ud(d,b,c.s())}a.length>e&&Ud(a,e,null);return a}
function xl(a){var b,c,d;a.length<this.c&&(a=(c=a,d=Qd(0,this.c),Sd(c.aC,c.tI,c.qI,d),d));for(b=0;b<this.c;++b)
{Ud(a,b,this.b[b])}a.length>this.c&&Ud(a,this.c,null);return a}
function Ud(a,b,c){if(c!=null){if(a.qI>0&&!ee(c.tI,a.qI)){throw wi(new ui)}if(a.qI<0&&(c.tM==gm||c.tI==2)){throw
wi(new ui)}}return a[b]=c}
function hi(a,b,c){var d,e;if(c<0||c>a.c){throw Qi(new Oi)}if(a.c==a.b.length){e=Rd(we,
47,8,a.b.length*2,0);for(d=0;d<a.b.length;++d){Ud(e,d,a.b[d])}a.b=e}++a.c;for(d=a.c-1;d>c;--d)
{Ud(a.b,d,a.b[d-1])}Ud(a.b,c,b)}
function th(b,c){var i;rh();var a,e,f,g,h;e=null;for(h=b.p();h.r();){g=fe(h.s(),8);try{c.q(g)}catch(a)
{a=Ge(a);if(ie(a,11)){f=a;!e&&(e=Fl(new Dl));i=Sj(e.b,f,e)}else throw a}}if(e){throw sh(new oh,e)}}
function Tj(j,a,b,c){var d=j.b[c];if(d){for(var e=0,f=d.length;e<f;++e){var g=d[e];var h=g.y();if(j.x(a,h)){var
i=g.z();g.A(b);return i}}}else{d=j.b[c]=[]}var g=Ul(new Sl,a,b);d.push(g);++j.e;return null}
function bk(a){var b,c,d;if((a==null?null:a)===this){return true}if(!(a!=null&&de(a.tI,18))){return false}c=fe(a,
18);if(c.v()!=this.v()){return false}for(b=c.p();b.r();){d=b.s();if(!this.u(d)){return false}}return true}
function Cd(a,b,c){var d,e,f,g,h,i,j;g=b.j();d=(h=fe(Nj(a.b,g),4),!h?0:h.c);if(c){for(f=d-1;f>=0;--f)
{e=(i=fe(Nj(a.b,g),4),fe((Nk(f,i.c),i.b[f]),13));b.i(e)}}else{for(f=0;f<d;++f){e=(j=fe(Nj(a.b,g),
4),fe((Nk(f,j.c),j.b[f]),13));b.i(e)}}}
function Fb(a){var b,c,d,e,f,g;b=false;d=a.length;f=(new Date).getTime();while((new Date).getTime()-f<100)
{for(c=0;c<d;++c){g=a[c];if(!g){continue}if(!g[0].h()){a[c]=null;b=true}}}if(b){e=[];for(c=0;c<d;++c){if(!a[c])
{continue}e[e.length]=a[c]}return e}else{return a}}
function cf()
{cf=gm;af={};bf=[];af[pn]=[lg,kg,mg];af[qn]=[tg,sg];af[rn]=[xg,wg];af[sn]=[Bg,Ag,Cg];_e(bf,se,pn);_e(bf,te,qn);_e(bf,u
e,rn);_e(bf,ve,sn)} 14

24. I can haz pretty print plz
Simply adjust
the output
style of the
compiler via
the plugin
15

25. Yes, a Java to Javascript compiler
function init(){
$GreetingService_Proxy(new GreetingService_Proxy);
$add_0(($clinit_99() , get_0(null)), $Label(new Label, 'Foo'));
$wnd.alert('foo');
}
function caught_0(e){
if (e != null && canCast(e.typeId$, 11)) {
return e;
}
return $JavaScriptException(new JavaScriptException, e);
}
function $RemoteServiceProxy(this$static){
return this$static;
}
function RemoteServiceProxy(){
} 16

26. But wait...thereʼs more
17

27. Don’t take my word for it
Juan Carlos Campos Martínez
Developer - GWT User
18

28. A deeper dive
19

29. From Eclipse to your browser
Eclipse
Browser Plugins
package com.google.gwt.samples.eclipsecon.client;
TCP
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
Code
public class EclipseCon implements EntryPoint {
Server
public void onModuleLoad() {
Window.alert("foo");
}
HTTP
}
Jetty
Server
20

30. From Eclipse to deployment
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
21

31. From Eclipse to deployment
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
22

32. Generators Provide the power behind your
GWT app
Automate away boilerplate code
Foundation for permutations
23

33. Use Case: GWT RPCs
Typical Ajax call
Serialization Serialization
Code Code
Client XHR Server
24

34. Use Case: GWT RPCs
GWT-enabled Ajax
Serialization Serialization
GWT Proxy
GWT Proxy
Code Code
Client XHR Server
25

35. Use Case: GWT RPCs
Goals:
• Serialization code begone
• RPCs like theyʼre meant to be -
interface methods
• Make it fast to boot
26

36. Use Case: GWT RPCs
You write code that looks like this:
@RemoteServiceRelativePath("suggest")
public interface SuggestService extends RemoteService {
String getSuggestions(String str) throws IllegalArgumentException;
}
27

37. Simple enough.
28

38. He’s an Ajax pro
29

39. From Eclipse to your browser
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
30

40. Java
Javascript
31

41. From Eclipse to your browser
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
32

42. Entry points for your GWT app
33

43. GWT Tips and Tricks
-gen will output a copy of the
generated classes
34

44. GWT Tips and Tricks
Reduce optimizations, reduce compile time
-draftCompile
• Skip all optimizations
• Development only

45. GWT Tips and Tricks
Reduce optimizations, reduce compile time
-draftCompile
• Skip all optimizations
• Development only
Why worry about compiling at all?

46. A more efficient SDLC
Refresh Does it work? Yes Compile
No
Develop Deploy

47. We’re happy
37

48. But what about
our users?
38

49. Optimize for the user
• Bundle resources
• Split code

50. Resource Bundling
• Example - associating icons with a contact

51. Resource Bundling
One at a time
Image image = new Image("images/image1.gif");
image.setHeight("50px");
image.setWidth("50px");
imagesPanel.add(image);

52. Resource Bundling
Initial download
Call to display images

53. Resource Bundling
All at once
public interface Resources extends ClientBundle {
public static final Resources INSTANCE = GWT.create(Resources.class);
@Source("Contacts.css")
public ContactsCss contactsCss();
@Source("images0.gif")
public ImageResource image0();
@Source("images1.gif")
public ImageResource image1();
...
}

54. Resource Bundling
Initial download
Call to display images

55. Code splitting
Initial download
Not needed on startup

56. Code splitting
Split points - runAsync()
@UiHandler("showImagesButton")
void onOkClicked(ClickEvent event) {
GWT.runAsync(new RunAsyncCallback() {
public void onSuccess() {
showImagesDialog();
}
});
}

57. Code splitting
Initial download
Call to display images

58. Real world results - Google Wave
1500
1400 KB
Size of Initial JavaScript Download (KB)
1125
750
7x Decrease In
Initial Download Size
375
200 KB
0
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar

59. Creating GWT apps - “Direct” approach
Write a bunch of widgets with self-contained
logic
Problems:
• Hard to test - need GWTTestCase
• Mocks not encouraged - harder to write smaller tests
• Platform specific UI code - limits code reuse
• Too many dependencies - difficult to optimize

61. Creating GWT apps - MVP approach
Cast:
• Model - DTOs, and business logic
• View - The display
• Presenter - Application logic
Goals:
• Be practical
• Avoid rigid patterns
• Put the complex logic in your Presenters
• Put the widget code in your Views
• Make the Views as dumb as possible

62. MVC

63. MVP

64. MVP

65. The MVP Relationship
Model Presenter View

66. The MVP Relationship
Model Presenter View

67. The MVP Relationship
Model History Presenter View

68. The MVP Relationship
RPC
Model History Presenter View

69. The MVP Relationship
Cache
RPC
Model History Presenter View

70. The MVP Relationship
Cache
RPC
Model History Presenter View
Event Bus

71. The MVP Relationship
Cache
RPC
Model History Presenter View
Event Bus

72. The MVP Relationship
Cache
RPC
Model History Presenter View
Event Bus

73. Making the Cloud a Reality

74. Making the Cloud a Reality
Contacts
Email
Sales Force Automation
Calendar
Your next big idea
Banking Collaboration
Social Network

75. Making the Cloud a Reality

76. Making the Cloud a Reality
The right languages and tools
are key

77. </presentation>
Chris Ramsdale
cramsdale@google.com
Twitter: @cramsdale
http://googlewebtoolkit.blogspot.com/