fast, easy, beautiful: pick three - indicthreads · 29-10-2007 · fast, easy, beautiful: pick...

Fast, Easy, Beautiful: Pick ThreeBuilding User Interfaces with Google Web Toolkit

Chris SchalkOctober 29, 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


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 thesame HTML over and over again

• …not to mention your users’ time and attention.


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


Real-world Example #2

• What if the networkhangs?

• How would you feel if thiswere a stock trade?

• Ajax can solve this…

• …at least in theory

Your credit card may be charged twice


The Ajax Architectural Shift - Yada yada

HTML

Ajax

StatelessHTML

Browser

Every user action

Totally new page

011001100111100101101011

011001101101111110010100011010111101110011010110

StatefulServer

Eventshandled

locally

01100111

011010011011

StatefulJS and DHTML

Browser

Stateless(i.e. any)ServerData only, not HTML

Remote procedure calls


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 yourhead

– This doesn’t even begin to touch on performance


What Is Google Web Toolkit (GWT)?

“Google Web Toolkit (GWT) is an open source Javasoftware development framework that makes writingAjax applications easy. With GWT, you can develop anddebug Ajax applications in the Java language using theJava development tools of your choice

When you deploy your application to production, theGWT compiler translates your Java application tobrowser-compliant JavaScript and HTML.”


What Is Google Web Toolkit (GWT)?

• Build Ajax apps with JavaTM technology

• GWT is much more than a compiler

• GWT brings software engineering to Ajax

• Important! GWT ≠ applets


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);

}

}


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


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!


The GWT Mission

• To radically improve the web experience for users byenabling developers to use existing Java tools to buildno-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


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


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


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


How to Communicate with the Server - RPC


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 tothe client!

• An RPC service implementation must extendRemoteServiceServlet


Styling With CSS

• Widgets publish CSS style namespublic 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


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


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


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


0

10,000

20,000

30,000

40,000

50,000

60,000

Empty

Win

dow.a

lert("

hello

")

Vertic

alPan

el

Butt

on

CheckB

ox

Tree

(3 it

ems) Lab

el

TextBox

Grid (4

x 4

)

HTM

L

Imag

e

TabPan

el (3

tabs)

ListB

ox (3

item

s)

Rad

io B

utton (

3)

Hyp

erlin

k

Hori

zonta

lPan

el

FlowPan

el

Abso

lute

Pan

el

Additional Widgets

Co

mp

iled

Scri

pt

Siz

e (

byte

s)

Only Pay For What You Use

Size matters


Better Usability From Less Bandwidth

How you move your bits matters, too


1.01.0

1.4

1.4

0

5

10

15

20

25

First Run Subsequent Runs

# H

TT

P R

eq

uests

HTTP Traffic Optimizations

Yes, we actually count every HTTP request


1.0

1.0

1.4

1.4

0

20,000

40,000

60,000

80,000

100,000

120,000

Uncompressed Compressed

Scri

pt

Siz

e (

byte

s)

Compiler Size Optimizations

With GWT, a smaller app is only a download + recompile away


1.0

1.0

1.0

1.0

1.4

1.4

1.4

1.4

0

100

200

300

400

500

600

700

FireFox 1.0.7 Internet Explorer 6 Opera 9.2 Safari 2.0

RP

C R

ou

nd

Tri

p T

ime (

ms)

RPC Speed Optimizations

With GWT, a faster app is also only a download + recompile away


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


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!


Documentation Included

Getting Started Guide Widget Gallery

Developer Guide Class Reference


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


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


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 wehope you will return the favor

• Your homework assignment:

– Go to: code.google.com & click on “Google Web Toolkit”


Q & A

fast, easy, beautiful: pick three - indicthreads · 29-10-2007 · fast, easy, beautiful: pick...

Documents