![Agenda ContactOffice ? Reengineering the interface Selecting a framework Google Web Toolkit (GWT) ? [email_address] beta.contactoffice.com](https://image.slidesharecdn.com/google-dev-day20071196/85/Google-Dev-Day2007-3-320.jpg)
![Contact Us! [email_address] www.contactoffice.com blog.contactoffice.com](https://image.slidesharecdn.com/google-dev-day20071196/85/Google-Dev-Day2007-40-320.jpg)
Google Dev Day2007
- 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
- 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
- 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
- 39. Questions?
- 40. Contact Us! [email_address] www.contactoffice.com blog.contactoffice.com