The document summarizes the ContactOffice company's decision to reengineer its web interface using the Google Web Toolkit (GWT) framework. It discusses why GWT was chosen, the development process, and some of the key enhancements developed for ContactOffice using GWT, such as drag and drop, property pages for dialog boxes, and integration of legacy pages. It also provides an overview of the ContactOffice application and some before and after examples of the new GWT-based interface.

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

2. Coming from the country of… … please forgive my (broken) English !

3. Agenda ContactOffice ? Reengineering the interface Selecting a framework Google Web Toolkit (GWT) ? [email_address] beta.contactoffice.com

4. ContactOffice ? Collaborative & Messaging Web Application Founded in 1999 by 4 Belgian serial internet entrepreneurs

5. How big ? 1 million registrations 350.000 active accounts (Feb 07) 250.000 paying accounts Global, 6 languages Profitable since 2003

6. 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

7. 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, ...

8. ASP & Licence Models Hosted, Security, SLA Personalised, Private Label versions SSO : REST, XML-RPC, CAS, RSA ClearTrust, ... API : XML-RPC

9. Some happy customers

10. 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)

11. 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, ...

12. 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 ? ?

13. JavaScript ? Powerful constructs Functions as 1st class objects, closures Prototype vs. Class Metaprogramming Ubiquitous dictionaries Dynamic typing but… JavaScript ? ?

14. 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

15. 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 ?

16. 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 ?

17. 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 ?

18. 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 ?

19. 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

20. 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

21. 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

22. 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

23. '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) {

24. '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

25. Current Interface http://www.contactoffice.com

26. 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

27. New GWT based Interface Horizontal splitter COMenuBar extends MenuBar Frame

28. New GWT based Interface - TreeView StackPanel TreeView 'Tree' based Composite Drag & drop source and target Contextual menus Close relationship with 'ModelFolder' and 'ModelObject'

29. 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

30. 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

31. Contextual menus MenuBar in PopupPanel Display is easy Invocation is hard (right-click portability issues…)

32. 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

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

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

35. 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

36. Back-end (2) Straightforward integration Super-clean with a Java POJO back-end Fast migration path from DWR ~ 5000 specific lines of code, 13 classes/interfaces Front-end / back-end software versions synchronization needed!

37. TODO Usability !!! Bug fixes… Missing tools Forums, Tasks, Groups management Customization Dynamic CSS evaluation JSPs… not that easy in hosted mode. Compile time vs. Run time customization ? Safari & Opera portability Context menus … JavaScript Google Web Toolkit ContactOffice

38. Beta Launched http://beta.contactoffice.com

39. Questions?

40. Contact Us! [email_address] www.contactoffice.com blog.contactoffice.com