1. Google Web Toolkit
0-60 in no time flat
Chris Ramsdale
Developer Relations, Google

2. Agenda
• 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. A deeper dive
18

28. 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
19

29. 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");
}
}
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. Generators Provide the power behind your
GWT app
Automate away boilerplate code
Foundation for permutations
22

32. Use Case: GWT RPCs
Typical Ajax call
Serialization Serialization
Code Code
Client XHR Server
23

33. Use Case: GWT RPCs
GWT-enabled Ajax
Serialization Serialization
GWT Proxy
GWT Proxy
Code Code
Client XHR Server
24

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

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

36. Simple enough.
27

37. He’s an Ajax pro
28

38. Behind the scenes
Eclipse plugin creates the scaffolding
GWTʼs RPC generator creates the
implementation
29

39. Use Case #2: Creating UIs
Goals:
• Utilize common dev practices
• Minimize boilerplate code
interface methods
• Remove a few other frustrations
along the way
30

40. Use Case #2: Creating UIs
You write code that looks like this:
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.contactsViewButtonHPanel {
margin: 5px 0px 0x 5px;
}
</ui:style>
<g:HorizontalPanel addStyleNames="{style.contactsViewButtonHPanel}">
<g:Button ui:field="addButton">Add</g:Button>
<g:Button ui:field="deleteButton">Delete</g:Button>
</g:HorizontalPanel>
</ui:UiBinder>
31

41. Behind the scenes
Eclipse plugin creates the scaffolding
GWTʼs UiBinder creates the
implementation
32

42. 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");
}
}
33

43. Java
Javascript
34

44. 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");
}
}
35

45. Entry points for your GWT app
36

46. GWT Tips and Tricks
-gen will output a copy of the
generated classes
37

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

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

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

50. We’re happy
40

51. But what about
our users?
41

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

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

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

55. Resource Bundling
Initial download
Call to display images

56. 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();
...
}

57. Resource Bundling
Initial download
Call to display images

58. Code splitting
Initial download
Not needed on startup

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

60. Code splitting
Initial download
Call to display images

61. 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

62. 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

64. 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

65. MVC

66. MVP

67. MVP

68. The MVP Relationship
Model Presenter View

69. The MVP Relationship
Model Presenter View

70. The MVP Relationship
Model History Presenter View

71. The MVP Relationship
RPC
Model History Presenter View

72. The MVP Relationship
Cache
RPC
Model History Presenter View

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

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

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

76. Making the Cloud a Reality

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

78. Making the Cloud a Reality

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

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