200804_devhive_gwt.ppt
DESCRIPTION
TRANSCRIPT
1
MIKE BURBAFOUNDER
Google Web ToolkitAPRIL 17TH, 2008
2
Acknowledgements
Portions of this presentation were borrowed with permission from the following presentations:
• Bruce Johnson, GWT Tech Lead, Google– Fast, Easy, Beautiful: Pick Three - Building User
Interfaces with GWT– Writing Big Apps with GWThttp://code.google.com/webtoolkit/presentations.html
• Didier Girard, CTO, SFEIR– Introduction to the Google Web Toolkit http://www.slideshare.net/dgirard/introduction-to-google-web-toolkit?src
=embed
3
DevHive is a SaaS platform for custom business apps
• Platform-as-a-Service
• Business app building blocks
• Software marketplace
4
Demonstration
5
Why Ajax?
6
At first, Ajax is really cool
SO
UR
CE
: D
idie
r G
irar
d
7
SO
UR
CE
: D
idie
r G
irar
d
But, what about…
• … cross-browser• … memory leaks• … loading latency• … Javascript PhD• … Ajax IDE • … bugs (javascript is a dynamic language)• … cross browser javascript debugger• … security• …
8
The Solution: GWT
• Build Ajax apps with Java• Developers with Java
skills• Tool support: IDEs,
debugger, JUnit, etc. • Eliminate browser-
specific coding• Facilitate reuse• Fast, simple RPC
SOURCE: Bruce Johnson
9
BrowserIE, Firefox, Safari, Opera
BrowserIE, Firefox, Safari, Opera
Java Runtime LibraryJava Runtime Library
How it works
java.langjava.lang
java.utiljava.util
Java.ioJava.io
Application code
GWT GUI LibraryGWT GUI Library
Panels
PopupStack
AbsoluteVertical
…
WidgetsButton MenuBar
Radio TreeCheck Table
TextArea ….
Javascript Application
GWT Runtime100Ko
GWTCompiler
GWTCompiler
SO
UR
CE
: D
idie
r G
irar
d
10
HelloWorld
SO
UR
CE
: D
idie
r G
irar
d
11
Robust API
SO
UR
CE
: B
ruce
Jo
hn
son
12
Widgets : 100% Java
SO
UR
CE
: D
idie
r G
irar
d
13
History support
SO
UR
CE
: B
ruce
Jo
hn
son
14
RPC Support
SO
UR
CE
: D
idie
r G
irar
d
15
Cross browser, cross platform
SOURCE: Didier Girard
16
CSS
• GWT widgets are CSS compatible
SOURCE: Didier Girard
17
Debugger
SOURCE: Didier Girard
18
Javascript integration
• JSNI is modelled on JNI
• Many javascript library are already wrapped : Dojo, Extjs, Google Ajax API…
public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/;
SOURCE: Didier Girard
19
Compiler optimizations
SO
UR
CE
: B
ruce
Jo
hn
son
20
Tools
• GWT is supported by all the Java IDEs: Eclipse, NetBeans, IntelliJ IDEA, JDeveloper,…
21
Open Source
22
GWT : The Community
• Millions of downloads
• 11,000 subscribers to the forum
• Books
• Tons of tutorials
• Blogs
SO
UR
CE
: D
idie
r G
irar
d
23
How easy do you find GWT to use ?
23 Google Confidential
Source : http://www.ongwt.com/post/2008/02/21/How-easy-do-you-find-GWT-to-use
SO
UR
CE
: D
idie
r G
irar
d
24
Resources
GWT :http://code.google.com/webtoolkit/
Forum :http://groups.google.com/group/Google-Web-Toolkit
GWT Blog : http://googlewebtoolkit.blogspot.com/
onGWT, Tracking news on GWT : http://www.ongwt.com/
25
Lessons Learned
26
Design your apps for the real world
Real-world users…• Have dial-up• Click things furiously
when they don’t see the screen respond
• Don’t find your app as “elegant” & “intuitive” as you do
• They hit the back button
• Multi-task
27
Think asynch
• Handle exceptions!
• Tell the user that something is going on
• Load pages incrementally
• Gracefully deal with stale sessions
28
Working with adesigner
• It’s ok to use more than one HTML page
• Have the designerprepare HTML / CSS
• Drop GWT elements onthe page as required
29
Optimizing deployment
• Use ant
• Include only the files that are needed in production
• Compress static content (Gzip – ant task) – 25% improvement
• Tell browser to cache (far future headers) – 10X improvement
30
One GWT module peruser “role”
Manager.gwt.xml171k
Admin.gwt.xml512k
User.gwt.xml323k
31
Use Model-View-Controller
Controller
Model
32
During development, compilefor only one browser
SOURCE: Didier Girard
*
*Hosted mode currently uses IE. Once GWT 1.5 ships, you should be able to stick to FF
33
Get Firebug
34
[Eclipse] project layout
• Single Java project
• Manually setup JEE Web folders– One folder for static
content you want to cache
• Separate folders for – Client– Server– Common / shared classes
