0
Developer DayGoogle 2010
Monday, September 27, 2010
Developer DayGoogle 2010
Fred Sauer
Tokyo, September 28, 2010
Architecting GWT applications for
production at Google
Monda...
Developer DayGoogle 2010
Answering two questions
• How does Google architect its web apps?
• How are GWT 2.1 and Spring Ro...
Developer DayGoogle 2010
If you like this talk, you’ll love…
Building on last year’s Best Practices for Architecting
http:...
Developer DayGoogle 2010
Production Ready
Monday, September 27, 2010
Developer DayGoogle 2010
“Production ready” means…
• Well tested
• Secure
• Monitored
– What’s broke
– What’s slow
• Scala...
Developer DayGoogle 2010
Isolation
• Well tested ✔
• Secure
• Monitored
– What’s broke
– What’s slow
• Scalable ✔
– Lots o...
Developer DayGoogle 2010
Instrumentation
• Well tested ✔
• Secure
• Monitored ✔
– What’s broke ✔
– What’s slow ✔
• Scalabl...
Developer DayGoogle 2010
Suspicion
• Well tested ✔
• Secure ✔
• Monitored ✔
– What’s broke ✔
– What’s slow ✔
• Scalable ✔
...
Developer DayGoogle 2010
Discussed at Google I/O
• Well tested ✔
• Secure ✔
• Monitored ✔
– What’s broke ✔
– What’s slow ✔...
Developer DayGoogle 2010
Isolation
Monday, September 27, 2010
Developer DayGoogle 2010
MVP
12
Effective Testing
Daniel Danilatos…
http://bit.ly/io2010-gwt7
Model
Presenter
View
Monday,...
Developer DayGoogle 2010
MVP
12
Effective Testing
Daniel Danilatos…
http://bit.ly/io2010-gwt7
Model
Presenter
View
DTO
Mon...
DTO
Presenter
View
DTO
Domain Obj
XHR
Developer DayGoogle 2010
Waaah, DTOs violate DRY*
13
*DRY = Do not RepeatYourself
Mo...
DTO
!
Request Factory
Servlet
Presenter
View
DTO
Domain Obj
XHR
!
Developer DayGoogle 2010
Repetition via tools
14
Monday,...
RF
Servlet
JSON
Request
Factory
!
Presenter
View
Employee
Request
!
Employee
Record
!
Employee
Developer DayGoogle 2010
cR...
RF
Servlet
JSON
Request
Factory
!
Presenter
View
Sync
Request
Employee
Record
!
Employee
Event Bus
Employee
Changed
!
Deve...
DTO
!
Presenter
View
Developer DayGoogle 2010
Waaah, presenter is too much boilerplate
17
Monday, September 27, 2010
DTO
!
Presenter
View
Developer DayGoogle 2010
Waaah, presenter is too much boilerplate
17
Activity
!
Monday, September 27,...
Place Change Event
Request
Factory
!
Activity
Manager
Event Bus
start()
Activity
!showWidget()
XHR
Activity
!
onStop()
Dev...
Developer DayGoogle 2010
Activity in test
19
Mock RFMock AM
start()
Activity
!
showWidget()
Monday, September 27, 2010
Developer DayGoogle 2010
Isolated activity is crawlable activity
• Activity life cycle tied to history changes
• History c...
DTO
!
Presenter
View
Developer DayGoogle 2010
Waaah, too boring to test is too boring to write
21
Activity
!
Monday, Septe...
DTO
!
Presenter
View
Developer DayGoogle 2010
Waaah, too boring to test is too boring to write
21
Activity
!
!Editor
Suppo...
Developer DayGoogle 2010
Selections of EditView<EmployeeRecord>
22
private static final EditorSupport SUPPORT =
GWT.create...
Developer DayGoogle 2010
All isolation promises kept but one
• Well tested ✔
• Secure
• Monitored
– What’s broke
– What’s ...
JPA for real
Anywhere but GAE
Scalable enough
JPA--
No reference fields
(No joins)
Super portable
Super scalable
Developer...
Developer DayGoogle 2010
Instrumentation
Monday, September 27, 2010
Developer DayGoogle 2010
Your eyes on the browser
• Logging
• Stack traces
• User Actions
26
Monday, September 27, 2010
Developer DayGoogle 2010
Logging: phone home
• Client side logger with remote logging service
– http://code.google.com/p/g...
Developer DayGoogle 2010
Stack Traces
• Method level for free on most modern browsers
• Get it to the server
– HttpThrowab...
Developer DayGoogle 2010
Emulated Stack Traces
• For line-level traces
– and anything at all on less modern browsers
<set-...
Developer DayGoogle 2010
Emulated stack traces in production
<!-- gwt-log logging is `OFF` by default -->
<inherits name="...
Developer DayGoogle 2010
User Actions
• Unique strings associated with each interesting UI element
– links, buttons
– mayb...
Developer DayGoogle 2010
Suspicion
Monday, September 27, 2010
Developer DayGoogle 2010
Secure: guard against cross site scripting
attacks
• RemoteServiceServlet watching for X-GWT-Perm...
Developer DayGoogle 2010
SafeHtml: because setHtml() isn’t
• If the user typed it, you must not render it as HTML
– prefer...
Developer DayGoogle 2010
Recap
Monday, September 27, 2010
Developer DayGoogle 2010
“Production ready” means…
• Well tested
• Secure
• Monitored
– What’s broke
– What’s slow
• Scala...
Developer DayGoogle 2010
“Production ready” means…
• Well tested ✔
• Secure
• Monitored
– What’s broke
– What’s slow
• Sca...
Developer DayGoogle 2010
“Production ready” means…
• Well tested ✔
• Secure
• Monitored ✔
– What’s broke ✔
– What’s slow ✔...
Developer DayGoogle 2010
“Production ready” means…
• Well tested ✔
• Secure ✔
• Monitored ✔
– What’s broke ✔
– What’s slow...
Model
Presenter
View
Developer DayGoogle 2010
Don’t work so hard
40
Monday, September 27, 2010
DTO
!
Presenter
View
Activity
!
!Editor
Support
Developer DayGoogle 2010
Don’t work so hard
40
Monday, September 27, 2010
Developer DayGoogle 2010
Monday, September 27, 2010
Upcoming SlideShare
Loading in...5
×

Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)

1,574

Published on

大規模な GWT アプリケーションでは、プロジェクトの初期から考慮すべきことが山ほどあります。GWT には幾多の便利なテクノロジーが詰まっていますが、すべてをまとまった形で使いこなすのは難しいものです。このセッションでは Google の開発チームが、どのように製品レベルの GWT アプリケーションを設計しているのかを解説します。

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,574
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Google Developer Day 2010 Japan: 製品レベルの GWT アプリケーション - Google での設計手法 (フレッド ソオー)"

  1. 1. Developer DayGoogle 2010 Monday, September 27, 2010
  2. 2. Developer DayGoogle 2010 Fred Sauer Tokyo, September 28, 2010 Architecting GWT applications for production at Google Monday, September 27, 2010
  3. 3. 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
  4. 4. Developer DayGoogle 2010 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 4 Model Presenter View Monday, September 27, 2010
  5. 5. Developer DayGoogle 2010 Production Ready Monday, September 27, 2010
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Developer DayGoogle 2010 Isolation Monday, September 27, 2010
  12. 12. Developer DayGoogle 2010 MVP 12 Effective Testing Daniel Danilatos… http://bit.ly/io2010-gwt7 Model Presenter View Monday, September 27, 2010
  13. 13. Developer DayGoogle 2010 MVP 12 Effective Testing Daniel Danilatos… http://bit.ly/io2010-gwt7 Model Presenter View DTO Monday, September 27, 2010
  14. 14. DTO Presenter View DTO Domain Obj XHR Developer DayGoogle 2010 Waaah, DTOs violate DRY* 13 *DRY = Do not RepeatYourself Monday, September 27, 2010
  15. 15. DTO ! Request Factory Servlet Presenter View DTO Domain Obj XHR ! Developer DayGoogle 2010 Repetition via tools 14 Monday, September 27, 2010
  16. 16. RF Servlet JSON Request Factory ! Presenter View Employee Request ! Employee Record ! Employee Developer DayGoogle 2010 cRud (=Read) 15 Monday, September 27, 2010
  17. 17. RF Servlet JSON Request Factory ! Presenter View Sync Request Employee Record ! Employee Event Bus Employee Changed ! Developer DayGoogle 2010 CrUD (=Create, Update, Delete) 16 Monday, September 27, 2010
  18. 18. DTO ! Presenter View Developer DayGoogle 2010 Waaah, presenter is too much boilerplate 17 Monday, September 27, 2010
  19. 19. DTO ! Presenter View Developer DayGoogle 2010 Waaah, presenter is too much boilerplate 17 Activity ! Monday, September 27, 2010
  20. 20. 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
  21. 21. Developer DayGoogle 2010 Activity in test 19 Mock RFMock AM start() Activity ! showWidget() Monday, September 27, 2010
  22. 22. 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
  23. 23. DTO ! Presenter View Developer DayGoogle 2010 Waaah, too boring to test is too boring to write 21 Activity ! Monday, September 27, 2010
  24. 24. DTO ! Presenter View Developer DayGoogle 2010 Waaah, too boring to test is too boring to write 21 Activity ! !Editor Support Monday, September 27, 2010
  25. 25. 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
  26. 26. 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
  27. 27. JPA for real Anywhere 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
  28. 28. Developer DayGoogle 2010 Instrumentation Monday, September 27, 2010
  29. 29. Developer DayGoogle 2010 Your eyes on the browser • Logging • Stack traces • User Actions 26 Monday, September 27, 2010
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Developer DayGoogle 2010 Suspicion Monday, September 27, 2010
  36. 36. 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
  37. 37. 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
  38. 38. Developer DayGoogle 2010 Recap Monday, September 27, 2010
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Model Presenter View Developer DayGoogle 2010 Don’t work so hard 40 Monday, September 27, 2010
  44. 44. DTO ! Presenter View Activity ! !Editor Support Developer DayGoogle 2010 Don’t work so hard 40 Monday, September 27, 2010
  45. 45. Developer DayGoogle 2010 Monday, September 27, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×