Google Dev Day2007

The GWT bet ... Luc Claes CTO ContactOffice.com Google Developer Day 2007

Coming from the country of…

… please forgive my (broken) English !

Agenda

ContactOffice ?

Reengineering the interface

Selecting a framework

Google Web Toolkit (GWT) ?

[email_address]

beta.contactoffice.com

ContactOffice ?

Collaborative & Messaging Web Application

Founded in 1999 by 4 Belgian serial internet entrepreneurs

How big ?

1 million registrations

350.000 active accounts (Feb 07)

250.000 paying accounts

Global, 6 languages

Profitable since 2003

Collaboration & Messaging WebApp Calendar (+ RSS) Contacts, To Do, Notes, Bookmarks (+ RSS), Synchro ... Groups Organiser

Mail (+ RSS),

IMAP4 & POP3(s),

SMTP, Webmail,

Antivirus & AntiSpam,

SMS, Fax, Alerts & Chat

State-of-the-art Messaging

Web upload or WebDAV

RSS & Vod/Podcasts,

Public sharing

Documents Repository Forum, Wiki, Bulletin Board, Phone Calls, ... Collaboration

Everything can be shared with users and groups! Sophisticated Access Right Model at user level Applications : Individual user, Families, Associations, Companies, Departments, All kinds of teams, ...

ASP & Licence Models

Hosted, Security, SLA

Personalised, Private Label versions

SSO : REST, XML-RPC, CAS, RSA ClearTrust, ...

API : XML-RPC

Some happy customers

Technologies

Back-end :

Pure Java (POJOs only)

Object Oriented Database

Core business logic + various 'satellites'

Web, SMTP c/s, POP3 c/s, IMAP4 c/s, WebDAV c/s, Synchro, Web services, …

Built for scalability

Web Clients :

Web 1.0 (HTML + JS + CSS)

~2000 JSP pages

Pocket Explorer + Symbian

Wap (WML)

Voice XML (prototype)

Reengineering the interface

Goal: Interface upgrade to current standards

Weakness: Obsolete Client Architecture (thousands of JSP files)

Strength: The 1999 Server Architecture (POJOs + OODB) is still state-of-the-art

HTML + JavaScript + Frames

Desktop like, Web 2.0 style,

Drag & Drop, W idgets, ...

Selecting a framework / technology

Many good solutions

Own framework ?

Cost of supporting what others might be doing well ?

Ajax vs Flash ?

OpenLazslo, Adobe Flex

Xml + script syntax, server-side lock-in, …

SilverLight, JavaFX, good ol' Applets ?

Ultra lightweight client + server-side Java ?

echo2, zk, thinwire...

Do they scale well ?

Existing JS frameworks ?

Dojo, Prototype, YUI, ...

JavaScript language…

JavaScript ? ?

JavaScript ?

Powerful constructs

Functions as 1st class objects, closures

Prototype vs. Class

Metaprogramming

Ubiquitous dictionaries

Dynamic typing

but…

JavaScript ? ?

The JavaScript nightmare

(Very) dynamic language

On the fly variables declarations

Weak typing

eval()

Interesting IDEs operations are 'impossible' (refactoring, smart searches, real-time compilation / syntax check, …)

Readability ?

Imprecise scoping, encapsulation

Run-time errors detection only

Even worse: the DOM + the browsers quirks…

How to handle efficiently tens of Klocs, multiple developers ?

Requires an extremely strict discipline (rules set, conventions) for a team

GWT ?

What is GWT ?

G oogle W eb T oolkit

GWT is a Google framework for building AJAX apps in the Java language

Fully Open Source (Apache 2 Licence)

Java --> JavaScript translation

No plugin, no jvm

Just 1 year old

JavaScript GoogleWeb ToolKit ?

Google Web Toolkit ?

Some features

Performances: Aggressive caching, code optimization, compression

Clean backend integration: Efficient Java RPC mechanism (or JSON)

Portability: Generates platform-specific code

(IE 6+, 'old' Mozilla, Firefox, Opera, Safari)

Native Java S cript is still reachable: JSNI (JavaScript Native Interface)

i18n

But... Java knowledge required for UI designers

CSS only is not realistic

JavaScript Google Web Toolkit ?

Google Web Toolkit ?

Java ?

Java 1.4 (1.5 coming 'soon')

Subset of java.lang.* and java.util.* emulated

No introspection, no dynamic class loading

Collections

Optimizing Java  JavaScript compiler

Dead code elimination

Deferred binding

No if (mozilla) { … } code

Relatively rich UI library

Widgets

Panels

Some missing pieces…

JavaScript Google Web Toolkit ?

GWT & Software Engineering

'Industrial' software engineering

Tools ! Tools! Tools !

IDEs: Eclipse integration, JetBrains GWT Studio, GWT Designer, VistaFei, …

Debugging (GWT hosted mode)

Testing (junit)

Refactoring

Java SCCS

Smart searches, navigation, auto-complete, quick fix, …

Compile time vs. Runtime errors detection ****

JavaScript Google Web ToolKit ?

CO enhancements to GWT

MV(C) framework

THE key factor for a successful large-scale development

Necessary for event driven interfaces (the A in A JAX)

Side effect : eases collaboration between UI and software developers

Drag & Drop

Attractive look & feel

Contextual menus

Marquee selection

Draggable splitters, Rich Text Edit (available in GWT 1.4)

Data grid

Enhanced dialogs, property pages

EditableLabel, ProgressBar, …

Lesson: nothing was made 'impossible' by GWT design choices !

JavaScript Google Web Toolkit ContactOffice Enhancements

CO-GWT – Some figures

~ 1.2 man x year

~ 35000 lines of Java code

(estimated target: 50 KLOC)

~ 250 files

~ 500 classes

~ 5000 Kbytes original JavaScript (ouch !)

~ 900 Kbytes compressed JavaScript

(GWT 1.4: 680 Kbytes !)

~ 270 Kbytes gziped

Aggressive caching mechanism

JavaScript Google Web Toolkit ContactOffice

Development Workflow (Front-end) Software Engineer UI

RPC, Model

Raw UI design (Model interfacing, panels, widgets, …).

Custom widgets

CSS

Enhanced UI design, non-CSS attributes, Formatting…

SVN sandbox

RPC, Model, (naive) view enhancements

UI enhancements

i18n (GWT)

Help

Manuals

I18n

M odel - V iew - R emoting Remoting Model View notify Synchronous call Add listener xxxService xxxServiceAsync DTOs Shared between front-end and back-end Asynchronous call with command piggybacking Front-end only AbstractModel ModelObject ModelFolder abstractions Asynchronous call AsyncCallback

'Tip of the Day': Enhanced AsyncCallback

Throbber handling

Generic RPC exceptions handling

Commands piggybacking

public class COAsyncCallback implements AsyncCallback { … public COAsyncCallback(AsyncCallback callback, Command onSuccessCommand) {

'Tip of the Day' (2) public void save(Command chainCommand) { getCalendarService().saveEvent(this, new COAsyncCallback( new GetEventDetailsCallback(), chainCommand)); } public static void showCreationDialog(Event event) { event.save( new ShowDialogCommand(event)); } private static class ShowDialogCommand implements Command { private final Event m_event ; public ShowDialogCommand(Event event) { m_event = event; } public void execute() { new EventPropertiesDialog(m_event).showCentered(); } } EventPropertiesDialog.java (View) : Event.java (Model) : Create an event object in the back-end, then edit its properties

Current Interface

http://www.contactoffice.com

New GWT based Interface

http://beta.contactoffice.com

Indication of new + total number of items in lists Navigation repeated on left Help and extra information Dashboard giving quick access to main features

New GWT based Interface Horizontal splitter COMenuBar extends MenuBar Frame

New GWT based Interface - TreeView StackPanel TreeView

'Tree' based Composite

Drag & drop source and target

Contextual menus

Close relationship with 'ModelFolder' and 'ModelObject'

New GWT based Interface - ListView Marquee selection Click to sort

Multiselect, select range, (un) Select all

Data grid, logical scrolling

Close relationship with 'ModelFolder' and 'ModelObject'

Drag & drop source

Special keys handling

Sortable columns

Contextual menus

Enhanced Dialogs PropertyPageDialogBox extends CODialogBox extends DialogBox Property Page

Modal or modeless

Resizeable or fixed

Close icon

Property pages framework (validation, (de)activation, …)

Specific listeners

DialogRow Widget

Contextual menus MenuBar in PopupPanel

Display is easy

Invocation is hard (right-click portability issues…)

Drag & Drop

D&D engine handles:

Regular D&D

Marquee selection

Splitters

(Rectangular) drag sources & drop targets

Could be hidden in widgets implementation

Multi-select

JavaScript Google Web Toolkit ContactOffice Enhancements

Legacy pages integration Legacy page (jsp) New page (GWT)

New calendar D&D event Access group & member's calendars Resizeable & overlap

Back-end (1) RemoteServiceServlet (GWT) GWTServlet AbstractHandler MailHandler MailServices … Instantiates (on each RPC invocation) CalendarHandler CalendarServices … HTTP request/session User credentials DB Transactions handling RemoteService (GWT) Actual RPC implementation ~ Invokes the Business Logic

Back-end (2)