Fast, Easy, Beautiful: Pick Three

unalaskaweepingInternet και Εφαρμογές Web

19 Ιουλ 2012 (πριν από 4 χρόνια και 10 μήνες)

280 εμφανίσεις

Fast, Easy, Beautiful: Pick Three
Building User Interfaces with Google Web Toolkit
Chris Schalk
October 2
9
, 2007
3
Copyright 2007 Google Inc.
Today

s Topics

The potential of Ajax - why we

re

all here


GWT brings software engineering to Ajax

Focus on the user and all else will follow

Fast is better than slow

Wrap-up

Q & A
4
Copyright 2007 Google Inc.
In pre

Ajax

land


Browsers are treated like HTML dumb terminals

Everything
is an HTTP round trip + history entry

Tragic waste of young electrons

potential in shuffling the
same HTML over and over again


not to mention your users

time and attention.
5
Copyright 2007 Google Inc.
Real-world Example #1

What if I
do
click Back?

Does it blow up, or what?

Ajax can solve this



at least in theory
Please do not use your browser

s Back button
6
Copyright 2007 Google Inc.
Real-world Example #2

What if the network
hangs?

How would you feel if this
were a stock trade?

Ajax can solve this



at least in theory
Your credit card may be charged twice
7
Copyright 2007 Google Inc.
The Ajax Architectural Shift -
Yada yada
HTML
Ajax
Stateless
HTML
Browser
Every user action
Totally new page
01100110
01111001
01101011
011001101101
111110010100
011010111101
110011010110
Stateful
Server
Events
handled
locally
0110
0111
0110
1001
1011
Stateful
JS and DHTML
Browser
Stateless
(i.e. any)
Server
Data only, not HTML
Remote procedure calls
8
Copyright 2007 Google Inc.
Ajax is great!

but..it can get a little tricky..

HTTPS?, [DX]?HTML (3.2|4.0|1.0) (Strict|Transitional)

CSS[1-3]

DOM Level [0-3]

(Java|ECMA|J|VB|Action)Script

(X|VR?|Math)ML

SVG, Canvas, Flash

JSONP?, SOAP, XML-RPC, SOA
9
Copyright 2007 Google Inc.
Or a LOT tricky!

Proliferation of toolkits, frameworks

Great! But hard to know what works with what!

Back to notepad,

vim, or perhaps
textmate
?

Firebug helps though


What if my background is Java?

Okay, I admit it.. JavaScript scares me!

Can start out easy but.. It

s very easy to get in over your
head

This doesn

t even begin to touch on performance
10
Copyright 2007 Google Inc.
What Is Google Web Toolkit (GWT)?

Google Web Toolkit (GWT) is an open source Java
software development framework that makes writing
Ajax applications easy. With GWT, you can develop and
debug Ajax applications in the Java language using the
Java development tools of your choice
When you deploy your application to production, the
GWT compiler translates your Java application to
browser-compliant JavaScript and HTML
.

11
Copyright 2007 Google Inc.
What Is Google Web Toolkit (GWT)?

Build Ajax apps with
Java
TM

technology

GWT is much more than a compiler

GWT brings software engineering to Ajax

Important!
GWT

applets
12
Copyright 2007 Google Inc.
Hello, Ajax (Demo)
public class Hello implements
EntryPoint
{
public void
onModuleLoad
() {
Button b = new Button("Click me",
new
ClickListener
() {
public void
onClick
(Widget sender) {
Window.alert("Hello, Ajax");
}
);

RootPanel
.get().add(b);
}
}
13
Copyright 2007 Google Inc.
GWT Brings Software Engineering To Ajax

Any Java IDE (or no IDE

you rebel, you)

Rapid
edit/test/debug/refactor
cycle

Unit testing

Reuse through jars

Take advantage of OO design patterns

Javadoc

Compile-time errors

You don

t miss

em
until they

re gone
14
Copyright 2007 Google Inc.
Lightweight Development Cycle (Demo)

GWT development mimics normal web development

Open
GWT's
hosted web browser

Run your app

Edit your source

Refresh and repeat

Changes are reflected instantly

Debugging!
15
Copyright 2007 Google Inc.
The GWT Mission

To radically improve the
web
experience
for users
by
enabling developers to use existing Java tools to build
no-compromise
Ajax for any modern browser

Users first

Developers second

Whenever possible, a very close second

Gee-whiz technology is a distant third

If you share this perspective, you

ll like GWT
Focus on the user and all else will follow
16
Copyright 2007 Google Inc.
Web Usability Fundamentals Remain Intact

Focus on the basics

Prefer native UI elements

Support keyboard-only use

Honor font size preferences

User in control of browser at all times

Speed is vital, especially at startup

The ideal: feels like a traditional web app, just better
Let

s not re-teach our parents how to use the web
17
Copyright 2007 Google Inc.
History

Simple history API

Listening to history events

Implement
HistoryListener

History.
addHistoryListener
(controller)

Creating history events

History.
newItem
("settings")

History tokens form the basis of linkable URLs

http://example.org/email.html#settings

Hyperlink
class automatically adds entries
18
Copyright 2007 Google Inc.
Localized Messages

Use interfaces to define type-safe template methods
interface
ErrorMessages
extends Messages {
String
accessDenied
(
int errorCode
,
String username);
}

Create corresponding localized properties files
accessDenied
= Error {0}: {1} cannot access {2}

Bind data with code using compile-time code generation
Window.alert(
msgs
.
accessDenied
(515, username))

The above wouldn

t compile :-)
Efficient I18N
19
Copyright 2007 Google Inc.
How to Communicate with the Server - RPC
20
Copyright 2007 Google Inc.
How to Communicate with the Server - RPC

Provides bridge to server-side Java

JDBC, Persistent frameworks, other Web Services,

RPC give you the opportunity to move all of your UI logic to
the client!

An RPC service implementation must extend
RemoteServiceServlet
21
Copyright 2007 Google Inc.
Styling With CSS

Widgets publish CSS style names
public
ListBox
(String caption) {



setStyleName
(
"gwt-ListBox"
);
}

Write CSS rules that bind to widgets
.
gwt-ListBox
{
background-color: yellow;
color: black;
}

Facilitates loose coupling between CSS and code
Separating code and presentation
22
Copyright 2007 Google Inc.
Usability Without Sacrificing Speed (Demos)

Kitchen Sink

Fast startup and reasonable script size

Client-side MVC and lazy UI creation

Native look and feel

History and bookmarks

Mail

Styling with CSS

Fancier widgets

Handling window resizing
23
Copyright 2007 Google Inc.
Lots of Stuff Here
User Interface
DOM,
AbsolutePanel
,
AbstractImagePanel
,
AbstractImagePrototype
, Button,
ButtonBase
,
CellPanel
,
ChangeListenerCollection
,
CheckBox
,
ClickListenerCollection
,
ClippedImagePrototype
,
ComplexPanel
, Composite,
DeckPanel
,
DialogBox
,
DisclosurePanel
,
DockPanel
,
FileUpload
,
FlexTable
,
FlowPanel
,
FocusListenerAdapter
,
FocusListenerCollection
,
FocusPanel
,
FocusWidget
,
FormHandlerCollection
,
FormPanel
,
FormSubmitCompleteEvent
,
FormSubmitEvent
, Frame, Grid,
HorizontalPanel
,
HorizontalSplitPanel
, HTML,
HTMLPanel
,
HTMLTable
, Hyperlink, Image,
KeyboardListenerAdapter
,
KeyboardListenerCollection
,
Label,
ListBox
,
LoadListenerCollection
,
MenuBar
,
MenuItem
,
PushButton
,
MouseListenerAdapter
,
MouseListenerCollection
,
NamedFrame
, Panel,
PasswordTextBox
,
PopupListenerCollection
,
PopupPanel
,
RadioButton
,
RichTextArea
,
RootPanel
,
ScrollListenerCollection
,
ScrollPanel
,
SimplePanel
,
StackPanel
,
SuggestBox
,
TabBar
,
TableListenerCollection
,
TabListenerCollection
,
TabPanel
,
TextArea
,
TextBox
,
TextBoxBase
,
ToggleButton
, Tree,
TreeItem
,
TreeListenerCollection
,
UIObject
,
VerticalPanel
,
VerticalSplitPanel
, Widget,
WidgetCollection
Client/Server Data Exchange (RPC, HTTP, JSON, XML)
DOMException
,
XMLParser
,
Attr
,
CDATASection
,
CharacterData
, Comment, Document,
DocumentFragment
, Element,
EntityReference
,
NamedNodeMap
, Node,
NodeList
,
ProcessingInstruction
, Text,
AsyncCallback
,
IsSerializable
,
RemoteService
,
RemoteServiceServlet
, RPC,
ServiceDefTarget
,
JSONArray
,
JSONBoolean
,
JSONException
,
JSONNull
,
JSONNumber
,
JSONObject
,
JSONParser
,
JSONString
,
JSONValue
, Header, Request,
RequestBuilder
,
RequestCallback
,
RequestException
, Response, URL
Quality and Usability (JUnit, Benchmarking, History, Bundling, I18N)
GWTTestCase
, Benchmark, Command,
DeferredCommand
,
IncrementalCommand
, History, Timer, Localizable, Constants,
DateTimeFormat
, Dictionary,
ConstantsWithLookup
, Messages,
NumberFormat
,
ImageBundle
JRE Emulation
Boolean, Byte, Character, Double, Float, Integer, Long, Math, Number, Object, Short, String,
StringBuffer
, System,
CharSequence
,
Comparable,
AbstractCollection
,
AbstractList
,
AbstractMap
,
AbstractSet
,
ArrayList
, Arrays, Collections, Date,
EventObject
,
HashMap
,
HashSet
, Stack, Vector, Collection,
Iterator
, List,
ListIterator
, Map, Set
24
Copyright 2007 Google Inc.
Fast Is Better Than Slow

Speed is a critical component of usability

Making complex Ajax code work
at all
is hard enough


Will you have the opportunity to make it fast, too?

We take speed very seriously

GWT 1.4 includes a benchmarking subsystem

Speed is

designed into

the GWT architecture

Let

s see how this played out over the past year

No-compromise speed
25
Copyright 2007 Google Inc.
0
1
0
,
0
0
0
2
0
,
0
0
0
3
0
,
0
0
0
4
0
,
0
0
0
5
0
,
0
0
0
6
0
,
0
0
0
Empty
Window.aler
t("hello")
VerticalPanel
Butt
on
CheckBox
Tree

(3
items)
Label
Tex
tB
ox
Grid (4 x 4)
HTML
Image
TabPanel
(3
tabs)
ListBox
(3
i
tems)
Radio
Butto
n
(3)
Hyperlink
HorizontalPanel
FlowPanel
AbsolutePanel
A
d
d
i
t
i
o
n
a
l

W
i
d
g
e
t
s
Compiled Sc
rip
t S
ize (b
yte
s)
Only Pay For What You Use
Size matters
26
Copyright 2007 Google Inc.
Better Usability From Less Bandwidth
How you move your bits matters, too
27
Copyright 2007 Google Inc.
1
.
0
1
.
0
1
.
4
1
.
4
0
5
1
0
1
5
2
0
2
5
F
i
r
s
t

R
u
n
S
u
b
s
e
q
u
e
n
t

R
u
n
s
# HTTP Reques
ts
HTTP Traffic Optimizations
Yes, we actually count every HTTP request
28
Copyright 2007 Google Inc.
1
.
0
1
.
0
1
.
4
1
.
4
0
2
0
,
0
0
0
4
0
,
0
0
0
6
0
,
0
0
0
8
0
,
0
0
0
1
0
0
,
0
0
0
1
2
0
,
0
0
0
U
n
c
o
m
p
r
e
s
s
e
d
C
o
m
p
r
e
s
s
e
d
Scri
pt Size (bytes)
Compiler Size Optimizations
With GWT, a smaller app is only a download + recompile away
29
Copyright 2007 Google Inc.
1
.
0
1
.
0
1
.
0
1
.
0
1
.
4
1
.
4
1
.
4
1
.
4
0
1
0
0
2
0
0
3
0
0
4
0
0
5
0
0
6
0
0
7
0
0
F
i
r
e
F
o
x

1
.
0
.
7
I
n
t
e
r
n
e
t

E
x
p
l
o
r
e
r

6
O
p
e
r
a

9
.
2
S
a
f
a
r
i

2
.
0
R
PC R
o
und Trip Time (ms)
RPC Speed Optimizations
With GWT, a
faster
app is also only a download + recompile away
30
Copyright 2007 Google Inc.
Not Enough Time To Demo Everything

Unit tests, benchmarking, internationalization,


Automatic inclusion of external JS and CSS

Deferred binding

Only download the appropriate compiled JavaScript

Everything is cross-browser

IE6.0,7.0, FF 1.0.x,1.5.x, 2.0, Safari 2.0.x,
3.0
*
, Opera 9.x

Your choice of development platforms

Mac OS X,
Linux
, Windows

Your choice of
IDEs

IntelliJ
IDEA, Eclipse,
NetBeans
,
JCreator
,
JDeveloper
31
Copyright 2007 Google Inc.
Fully Open Source

Licensed under Apache 2.0

Source available on Google Code

Making GWT Better

The spirit of GWT, including design axioms

Great community

10,341+ members in the GWT Developer Forum

485+ members in the GWT Contributors Forum

Many external patches included in GWT 1.4
Yeah!
32
Copyright 2007 Google Inc.
Documentation Included
Getting Started Guide
Widget Gallery
Developer Guide
Class Reference
33
Copyright 2007 Google Inc.
One Year Later


Comprehensive IDE support for GWT (WYSIWYG, too)

IntelliJ
IDEA, Eclipse,
NetBeans
,
VistaFei
,


Major applications in production and in development

Google Checkout, Google Base,
http://www.queplix.com/
,
http:
//myhippocampus
.com

http://www.threerings.net/whirled/
,


Add-on libraries and sample code

100+ projects on Google Code alone

Books and articles

http://www.amazon.com
for details

Over

2 million downloads of GWT since launch!
GWT is growing up
34
Copyright 2007 Google Inc.
What's New In GWT 1.4?

No longer beta!

200+ features and fixes

Major size and speed optimizations

ImageBundle
!

New widgets

RichTextArea
,
SuggestBox
,
Vertical/HorizontalSplitPanel
,
PushButton
,
ToggleButton
,
DisclosurePanel

Library enhancements

NumberFormat
,
DateTimeFormat

Benchmarking subsystem

RPC now supports
non-servlet
Java back ends
Biggest release yet
35
Copyright 2007 Google Inc.
Summary

You need leverage to use Ajax well with low risk

PhD in browser quirks is no longer a hiring
prereq

Turn AJAX development into software engineering

GWT rewards using good engineering practices

We will share our best work and ideas with you, and we
hope you will return the favor

Your

homework assignment:

Go to:
code.
google
.com

&
click on

Google Web Toolkit

36
Copyright 2007 Google Inc.
Q & A