Fast, Easy, Beautiful: Pick Three Building User Interfaces with Google Web Toolkit. Chris Schalk October 24, 2007

Fast, Easy, Beautiful: Pick Three Building User Interfaces with Google Web Toolkit Chris Schalk October 24, 2007

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 3 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. 4 Copyright 2007 Google Inc.

Real-world Example #2 Your credit card may be charged twice What if the network hangs? How would you feel if this were a stock trade? Ajax can solve this at least in theory 6 Copyright 2007 Google Inc.

The Ajax Architectural Shift - Yada yada 01100110 01111001 01101011 Stateless HTML Browser Every user action Totally new page Stateful Server HTML 011001101101 111110010100 011010111101 110011010110 Ajax 0110 0111 Events handled locally Stateful JS and DHTML Browser Remote procedure calls Data only, not HTML Stateless (i.e. any) Server 0110 1001 1011 7 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 8 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 9 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. 10 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); } } 12 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 13 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! 14 Copyright 2007 Google Inc.

The GWT Mission Focus on the user and all else will follow 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 15 Copyright 2007 Google Inc.

Web Usability Fundamentals Remain Intact Let s not re-teach our parents how to use the web 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 16 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 17 Copyright 2007 Google Inc.

Localized Messages Efficient I18N 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 :-) 18 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 20 Copyright 2007 Google Inc.

Styling With CSS Separating code and presentation 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 21 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 22 Copyright 2007 Google Inc.

Lots of Stuff Here 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 User Interface 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 Client/Server Data Exchange (RPC, HTTP, JSON, XML) GWTTestCase, Benchmark, Command, DeferredCommand, IncrementalCommand, History, Timer, Localizable, Constants, DateTimeFormat, Dictionary, ConstantsWithLookup, Messages, NumberFormat, ImageBundle Quality and Usability (JUnit, Benchmarking, History, Bundling, I18N) 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 JRE Emulation 23 Copyright 2007 Google Inc.

Fast Is Better Than Slow No-compromise speed 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 24 Copyright 2007 Google Inc.

Only Pay For What You Use Size matters 60,000 Compiled Script Size (bytes) 50,000 40,000 30,000 20,000 10,000 0 Empty Window.alert("hello") VerticalPanel Button CheckBox Tree (3 items) Label TextBox Grid (4 x 4) HTML Image TabPanel (3 tabs) ListBox (3 items) Radio Button (3) Hyperlink HorizontalPanel FlowPanel AbsolutePanel Additional Widgets 25 Copyright 2007 Google Inc.

Compiler Size Optimizations With GWT, a smaller app is only a download + recompile away 120,000 100,000 1.0 Script Size (bytes) 80,000 60,000 40,000 1.4 1.0 1.4 20,000 0 Uncompressed Compressed 28 Copyright 2007 Google Inc.

RPC Speed Optimizations With GWT, a faster app is also only a download + recompile away 700 1.0 1.0 600 RPC Round Trip Time (ms) 500 400 300 200 100 1.4 1.0 1.4 1.4 1.0 1.4 0 FireFox 1.0.7 Internet Explorer 6 Opera 9.2 Safari 2.0 29 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 30 Copyright 2007 Google Inc.

Fully Open Source Yeah! 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 31 Copyright 2007 Google Inc.

One Year Later GWT is growing up 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! 33 Copyright 2007 Google Inc.

What's New In GWT 1.4? Biggest release yet 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 34 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 35 Copyright 2007 Google Inc.