![Page 1: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/1.jpg)
Developer DayGoogle 2010
Monday, September 27, 2010
![Page 2: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/2.jpg)
Developer DayGoogle 2010
Fred SauerTokyo, September 28, 2010
Architecting GWT applications for production at Google
Monday, September 27, 2010
![Page 3: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/3.jpg)
Developer DayGoogle 2010
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
3
Monday, September 27, 2010
![Page 4: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/4.jpg)
Developer DayGoogle 2010
If you like this talk, you’ll love…Building on last year’s Best Practices for Architectinghttp://code.google.com/events/io/2009/sessions/GoogleWebToolkitBestPractices.html
4
Model
Presenter
View
Monday, September 27, 2010
![Page 5: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/5.jpg)
Developer DayGoogle 2010
Production Ready
Monday, September 27, 2010
![Page 6: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/6.jpg)
Developer DayGoogle 2010
“Production ready” means…• Well tested• Secure• Monitored
– What’s broke– What’s slow
• Scalable– Lots of users– Lots of developers
• Bookmark friendly• Crawlable• Localized
6
Monday, September 27, 2010
![Page 7: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/7.jpg)
Developer DayGoogle 2010
Isolation• Well tested ✔• Secure• Monitored
– What’s broke– What’s slow
• Scalable ✔– Lots of users ✔– Lots of developers ✔
• Bookmark friendly ✔• Crawlable ✔• Localized
7
Monday, September 27, 2010
![Page 8: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/8.jpg)
Developer DayGoogle 2010
Instrumentation• Well tested ✔• Secure• Monitored ✔
– What’s broke ✔– What’s slow ✔
• Scalable ✔– Lots of users ✔– Lots of developers ✔
• Bookmark friendly ✔• Crawlable ✔• Localized
8
Monday, September 27, 2010
![Page 9: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/9.jpg)
Developer DayGoogle 2010
Suspicion• Well tested ✔• Secure ✔• Monitored ✔
– What’s broke ✔– What’s slow ✔
• Scalable ✔– Lots of users ✔– Lots of developers ✔
• Bookmark friendly ✔• Crawlable ✔• Localized
9
Monday, September 27, 2010
![Page 10: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/10.jpg)
Developer DayGoogle 2010
Discussed at Google I/O• Well tested ✔• Secure ✔• Monitored ✔
– What’s broke ✔– What’s slow ✔
• Scalable ✔– Lots of users ✔– Lots of developers ✔
• Bookmark friendly ✔• Crawlable ✔• Localized ✔
10
GWT's UI overhaul
http://bit.ly/io2010-gwt5
Monday, September 27, 2010
![Page 11: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/11.jpg)
Developer DayGoogle 2010
Isolation
Monday, September 27, 2010
![Page 12: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/12.jpg)
Developer DayGoogle 2010
MVP
12
Effective Testing Daniel Danilatos…
http://bit.ly/io2010-gwt7
Model
Presenter
View
Monday, September 27, 2010
![Page 13: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/13.jpg)
Developer DayGoogle 2010
MVP
12
Effective Testing Daniel Danilatos…
http://bit.ly/io2010-gwt7
Model
Presenter
View
DTO
Monday, September 27, 2010
![Page 14: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/14.jpg)
DTO
Presenter
View
DTO
Domain Obj
XHR
Developer DayGoogle 2010
Waaah, DTOs violate DRY*
13
*DRY = Do not Repeat Yourself
Monday, September 27, 2010
![Page 15: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/15.jpg)
DTO!
Request Factory Servlet
Presenter
View
DTO
Domain Obj
XHR!
Developer DayGoogle 2010
Repetition via tools
14
Monday, September 27, 2010
![Page 16: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/16.jpg)
RFServlet
JSONRequestFactory
!Presenter
View
Employee Request
!
Employee Record
!Employee
Developer DayGoogle 2010
cRud (=Read)
15
Monday, September 27, 2010
![Page 17: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/17.jpg)
RFServlet
JSONRequestFactory
!Presenter
View
Sync Request
Employee Record
!
Employee
Event Bus
Employee Changed
!
Developer DayGoogle 2010
CrUD (=Create, Update, Delete)
16
Monday, September 27, 2010
![Page 18: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/18.jpg)
DTO!
Presenter
View
Developer DayGoogle 2010
Waaah, presenter is too much boilerplate
17
Monday, September 27, 2010
![Page 19: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/19.jpg)
DTO!
Presenter
View
Developer DayGoogle 2010
Waaah, presenter is too much boilerplate
17
Activity !
Monday, September 27, 2010
![Page 20: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/20.jpg)
Place Change Event
Request
Factory
!
Activity
Manager
Event Bus
start()
Activity!
showWidget() XHR
Activity!
onStop()
Developer DayGoogle 2010
Activity life cycle
18
Monday, September 27, 2010
![Page 21: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/21.jpg)
Developer DayGoogle 2010
Activity in test
19
Mock RFMock AMstart()
Activity!
showWidget()
Monday, September 27, 2010
![Page 22: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/22.jpg)
Developer DayGoogle 2010
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
20
Monday, September 27, 2010
![Page 23: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/23.jpg)
DTO!
Presenter
View
Developer DayGoogle 2010
Waaah, too boring to test is too boring to write
21
Activity !
Monday, September 27, 2010
![Page 24: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/24.jpg)
DTO!
Presenter
View
Developer DayGoogle 2010
Waaah, too boring to test is too boring to write
21
Activity !
!Editor Support
Monday, September 27, 2010
![Page 25: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/25.jpg)
Developer DayGoogle 2010
Selections of EditView<EmployeeRecord>
22
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);}
Monday, September 27, 2010
![Page 26: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/26.jpg)
Developer DayGoogle 2010
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
23
Monday, September 27, 2010
![Page 27: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/27.jpg)
JPA for realAnywhere but GAE
Scalable enough
JPA--
No reference fields(No joins)
Super portable
Super scalable
Developer DayGoogle 2010
Give me convenience or give me scale
24
Monday, September 27, 2010
![Page 28: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/28.jpg)
Developer DayGoogle 2010
Instrumentation
Monday, September 27, 2010
![Page 29: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/29.jpg)
Developer DayGoogle 2010
Your eyes on the browser
• Logging
• Stack traces
• User Actions
26
Monday, September 27, 2010
![Page 30: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/30.jpg)
Developer DayGoogle 2010
Logging: phone home
• Client side logger with remote logging service– http://code.google.com/p/gwt-log/ GWT *.*– java.util.logging in GWT 2.1
• Accumulate logs client side
• Watch for request batches and ride along, or flush on timer
27
Monday, September 27, 2010
![Page 31: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/31.jpg)
Developer DayGoogle 2010
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
28
Monday, September 27, 2010
![Page 32: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/32.jpg)
Developer DayGoogle 2010
Emulated Stack Traces
• For line-level traces– and anything at all on less modern browsers
<set-property name="compiler.emulatedStack" value="true" /><set-configuration-property name="compiler.recordLineNumbers" value="true" /><set-configuration-property name="compiler.recordFileNames" value="true" />
• But your app is fatter and slower
29
Monday, September 27, 2010
![Page 33: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/33.jpg)
Developer DayGoogle 2010
Emulated stack traces in production
<!-- gwt-log logging is `OFF` by default --><inherits name="com.allen_sauer.gwt.log.gwt-log-OFF" />
<!-- also compile your application at `INFO` level --><extend-property name="log_level" values="INFO"/>
Provide link to your users to enable logging: http[s]://hostame:port/path/to/Module.html?log_level=INFO
30
Let your uses opt in (using gwt-log)
Monday, September 27, 2010
![Page 34: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/34.jpg)
Developer DayGoogle 2010
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– RPCs queued in this event loop are attributed to this Action
• When all RPCs return, time is tallied, logs trickle to server
• Planned for GWT 2.1
31
Monday, September 27, 2010
![Page 35: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/35.jpg)
Developer DayGoogle 2010
Suspicion
Monday, September 27, 2010
![Page 36: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/36.jpg)
Developer DayGoogle 2010
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>
33
Monday, September 27, 2010
![Page 37: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/37.jpg)
Developer DayGoogle 2010
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 Element#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()
34
Monday, September 27, 2010
![Page 38: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/38.jpg)
Developer DayGoogle 2010
Recap
Monday, September 27, 2010
![Page 39: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/39.jpg)
Developer DayGoogle 2010
“Production ready” means…• Well tested• Secure• Monitored
– What’s broke– What’s slow
• Scalable– Lots of users– Lots of developers
• Bookmark friendly• Crawlable
36
Monday, September 27, 2010
![Page 40: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/40.jpg)
Developer DayGoogle 2010
“Production ready” means…• Well tested ✔• Secure• Monitored
– What’s broke– What’s slow
• Scalable ✔– Lots of users ✔– Lots of developers ✔
• Bookmark friendly ✔• Crawlable ✔
37
• Be isolated
Monday, September 27, 2010
![Page 41: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/41.jpg)
Developer DayGoogle 2010
“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• Be instrumented
Monday, September 27, 2010
![Page 42: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/42.jpg)
Developer DayGoogle 2010
“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• Be suspicious
Monday, September 27, 2010
![Page 43: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/43.jpg)
Model
Presenter
View
Developer DayGoogle 2010
Don’t work so hard
40
Monday, September 27, 2010
![Page 44: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/44.jpg)
DTO!
Presenter
View
Activity !
!Editor Support
Developer DayGoogle 2010
Don’t work so hard
40
Monday, September 27, 2010
![Page 45: Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)](https://reader033.vdocuments.pub/reader033/viewer/2022051400/54be98ce4a79590c528b46a6/html5/thumbnails/45.jpg)
Developer DayGoogle 2010
Monday, September 27, 2010