200804_devhive_gwt.ppt

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

35

Contact info

mike.burba@devhive.com

+1.248.207.5054