Architecting GWT applications for production at Google
Transcript of Architecting GWT applications for production at Google
![Page 1: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/1.jpg)
1
![Page 2: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/2.jpg)
Architecting GWT applications for production at Google Ray Ryan19 May 2010
2
![Page 3: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/3.jpg)
View live notes and ask questions about this session on Google Wavehttp://bit.ly/io2010-gwt8
3
![Page 4: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/4.jpg)
Answering two questions
• How does Google architect its web apps?
• How are GWT 2.1 and Spring Roo going to help me do the same?
– com.google.gwt.app
– com.google.gwt.requestfactory
4
4
![Page 5: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/5.jpg)
If you like this talk, you’ll love…
Building on last year’s Best Practices for Architecting
http://code.google.com/events/io/2009/sessions/GoogleWebToolkitBestPractices.html
5
Model
Presenter
View
5
![Page 6: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/6.jpg)
Production Ready
6
![Page 7: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/7.jpg)
“Production ready” means…
• Well tested
• Secure
• Monitored
– What’s broke
– What’s slow
• Scalable
– Lots of users
– Lots of developers
• Bookmark friendly
• Crawlable
• Localized
7
7
![Page 8: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/8.jpg)
Isolation
• Well tested !
• Secure
• Monitored
– What’s broke
– What’s slow
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
• Localized
8
8
![Page 9: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/9.jpg)
Instrumentation
• Well tested !
• Secure
• Monitored !
– What’s broke !
– What’s slow !
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
• Localized
9
9
![Page 10: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/10.jpg)
Suspicion
• Well tested !
• Secure !
• Monitored !
– What’s broke !
– What’s slow !
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
• Localized
10
10
![Page 11: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/11.jpg)
Discussed yesterday
• Well tested !
• Secure !
• Monitored !
– What’s broke !
– What’s slow !
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
• Localized !
11
11
![Page 12: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/12.jpg)
Discussed yesterday
• Well tested !
• Secure !
• Monitored !
– What’s broke !
– What’s slow !
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
• Localized !
11
GWT's UI overhaul
http://bit.ly/io2010-gwt5
11
![Page 13: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/13.jpg)
Isolation
12
![Page 14: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/14.jpg)
MVP
13
Model
Presenter
View
13
![Page 15: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/15.jpg)
MVP
13
Effective Testing…
http://bit.ly/io2010-gwt7
Model
Presenter
View
13
![Page 16: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/16.jpg)
MVP
13
Effective Testing…
http://bit.ly/io2010-gwt7
Model
Presenter
View
DTO
13
![Page 17: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/17.jpg)
DTO
Presenter
View
DTO
Domain Obj
XHR
Waaah, DTOs violate DRY
14
14
![Page 18: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/18.jpg)
DTO!
Request Factory Servlet
Presenter
View
DTO
Domain Obj
XHR!
Repetition via tools
15
15
![Page 19: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/19.jpg)
RFServlet
JSONRequestFactory
!Presenter
View
Employee Request
!
Employee Record
!Employee
cRud
16
16
![Page 20: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/20.jpg)
RFServlet
JSONRequestFactory
!Presenter
View
Sync Request
Employee Record
!
Employee
Event Bus
Employee Changed
!
CrUD
17
17
![Page 21: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/21.jpg)
DTO!
Presenter
View
Waaah, presenter is too much boilerplate
18
18
![Page 22: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/22.jpg)
DTO!
Presenter
View
Waaah, presenter is too much boilerplate
18
Activity !
18
![Page 23: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/23.jpg)
Place Change Event
Request
Factory
!
Activity
Manager
Event Bus
start()
Activity!
showWidget() XHR
Activity!
onStop()
Activity life cycle
19
19
![Page 24: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/24.jpg)
Activity in test
20
Mock RFMock AMstart()
Activity!
showWidget()
20
![Page 25: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/25.jpg)
Isolated activity is crawlable activity
• Activity life cycle tied to history changes
• History changes tied to discrete URLs — bookmarkable
– http://example.com/#report:123456
• Add a bang and a headless server — crawlable
– http://example.com/#!report:123456
• http://code.google.com/web/ajaxcrawling/docs/getting-started.html
21
21
![Page 26: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/26.jpg)
DTO!
Presenter
View
Waaah, too boring to test is too boring to write
22
Activity !
22
![Page 27: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/27.jpg)
DTO!
Presenter
View
Waaah, too boring to test is too boring to write
22
Activity !
!Editor Support
22
![Page 28: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/28.jpg)
Selections of EditView<EmployeeRecord>
23
private static final EditorSupport SUPPORT =
GWT.create(EditorSupport.class);
@UiField TextBox displayName;
@UiField TextBox userName;
public void setValue(EmployeeRecord value) {
this.record = value;
SUPPORT.setValue(this, value);
}
public boolean isChanged() {
return SUPPORT.isChanged(this);
}
23
![Page 29: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/29.jpg)
All isolation promises kept but one
• Well tested !
• Secure
• Monitored
– What’s broke
– What’s slow
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
• Localized
24
24
![Page 30: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/30.jpg)
JPA for realAnywhere but GAE
Scalable enough
JPA--
No reference fields(No joins)
Super portable
Super scalable
Give me convenience or give me scale
25
25
![Page 31: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/31.jpg)
Instrumentation
26
![Page 32: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/32.jpg)
Your eyes on the browser
• Logging
• Stack traces
• User Actions
27
27
![Page 33: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/33.jpg)
Logging: phone home
• Client side logger with remote logging service
– http://code.google.com/p/gwt-log/ today
– java.util.logging in GWT 2.1 (no remote yet in 2.1 M1)
• Accumulate logs client side
• Watch for request batches and ride along, or flush on timer
28
28
![Page 34: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/34.jpg)
Stack Traces
• Method level for free on most modern browsers
• Get it to the server
– HttpThrowableReporter to send JSON formatted via XHR
– In gwt-log, use RemoteLoggerService
• Re-symbolize obfuscated traces server side
– http://code.google.com/p/google-web-toolkit/wiki/WebModeExceptions
– Fair warning: that page is terse to the point of encryption
29
29
![Page 35: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/35.jpg)
Emulated Stack Traces
• For line-level traces
– and anything at all on less modern browsers
<set-property name="compiler.emulatedStack" value="true" />
<set-property name="compiler.recordLineNumbers"
value="true" />
• But your app is fatter and slower
30
30
![Page 36: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/36.jpg)
Emulated stack traces in production
http://www.example.com/?debug
<define-property name="traces" values="true,false"/>
<property-provider name="traces"><[CDATA[
return $wnd.location.query.contains('debug');
]]></property-provider>
<set-property name="compiler.emulatedStack" value="true" >
<when-property-is name="traces" value="true" />
</set-property>
<set-property name="compiler.recordLineNumbers" value="true" >
<when-property-is name="traces" value="true" />
</set-property>
31
Let your uses opt in
31
![Page 37: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/37.jpg)
User Actions
• Unique strings associated with each interesting UI element
– links, buttons
– maybe in ui.xml
• User gestures (clicks a link, say), user action event posted on event bus
– Time is noted
– rpc queued in this event loop attributed to this action
• When all rpcs return, time is tallied, logs trickle to server
• Planned for GWT 2.1 (but not in 2.1 M1)
32
32
![Page 38: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/38.jpg)
Suspicion
33
![Page 39: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/39.jpg)
Secure: guard against cross site scripting attacks
• RemoteServiceServlet watching for X-GWT-Permutation header for XSRF paranoia
– New in GWT 2.1
– Only XHR can set a header, and XHR is from your domain
• SafeHTML
– Debuts as open source in new web-based Wave FedOne client
– http://code.google.com/p/wave-protocol/
– Destined for GWT 2.something
34
34
![Page 40: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/40.jpg)
SafeHtml: because setHtml() isn’t
• If the user typed it, you must not render it as HTML
– prefer HasText#setText to HasHTML#setHTML
– prefer Element#setInnerText to #setInnerHTML
• SafeHtml interface promises its asString() produces harmless HTML
• SafeHtmlBuilder and SimpleHtmlSanitizer
• for assembling untrusted strings into SafeHtml instances
• SafeHtml aware widgets that replace setHTML() with setSafeHtml()
35
35
![Page 41: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/41.jpg)
Now say what you said
36
![Page 42: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/42.jpg)
“Production ready” means…
• Well tested
• Secure
• Monitored
– What’s broke
– What’s slow
• Scalable
– Lots of users
– Lots of developers
• Bookmark friendly
• Crawlable
37
37
![Page 43: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/43.jpg)
“Production ready” means…
• Well tested !
• Secure
• Monitored
– What’s broke
– What’s slow
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
38
• Be isolated
38
![Page 44: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/44.jpg)
“Production ready” means…
• Well tested !
• Secure
• Monitored !
– What’s broke !
– What’s slow !
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
39
• Be isolated
• Be instrumented
39
![Page 45: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/45.jpg)
“Production ready” means…
• Well tested !
• Secure !
• Monitored !
– What’s broke !
– What’s slow !
• Scalable !
– Lots of users !
– Lots of developers !
• Bookmark friendly !
• Crawlable !
40
• Be isolated
• Be instrumented
• Be suspicious
40
![Page 46: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/46.jpg)
Model
Presenter
View
Don’t work so hard
41
41
![Page 47: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/47.jpg)
DTO!
Presenter
View
Activity !
!Editor Support
Don’t work so hard
41
41
![Page 48: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/48.jpg)
View live notes and ask questions about this session on Google Wavehttp://bit.ly/io2010-gwt8
42
![Page 49: Architecting GWT applications for production at Google](https://reader031.fdocuments.us/reader031/viewer/2022022604/621849dadd1dc75fe479eca4/html5/thumbnails/49.jpg)
43