1 / 40

The GWT bet ...

The GWT bet. Luc Claes CTO ContactOffice.com IT@Cork Java Conference 2007. Coming from the country of…. … please forgive my (broken) English !. Agenda. ContactOffice ? Reengineering the interface Selecting a framework Google Web Toolkit (GWT) ? GWT@ContactOffice

holland
Download Presentation

The GWT bet ...

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The GWT bet ... Luc Claes CTO ContactOffice.com IT@Cork Java Conference 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) ? • GWT@ContactOffice • 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 Groups Organiser State-of-the-art Messaging Documents Repository Calendar (+ RSS) Contacts, To Do, Notes, Bookmarks (+ RSS), Synchro ... • Mail (+ RSS), • IMAP4 & POP3(s), • SMTP, Webmail, • Antivirus & AntiSpam, • SMS, Fax, Alerts & Chat • Web upload or WebDAV • RSS & Vod/Podcasts, • Public sharing Collaboration Forum, Wiki, Bulletin Board, Phone Calls, ...

  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 Desktop like, Web 2.0 style, Drag & Drop, Widgets, ... HTML + JavaScript + Frames

  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 ? • Google Web Toolkit • 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 ? GoogleWebToolKit JavaScript

  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 JavaScript is still reachable:JSNI (JavaScript Native Interface) • i18n • But... Java knowledge required for UI designers • CSS only is not realistic ? GoogleWebToolkit JavaScript

  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… ? GoogleWebToolkit JavaScript

  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 **** ? Google WebToolKit JavaScript

  19. CO enhancements to GWT ContactOfficeEnhancements • MV(C) framework • THE key factor for a successful large-scale development • Necessary for event driven interfaces (the A in AJAX) • 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 ! GoogleWeb Toolkit JavaScript

  20. CO-GWT – Some figures ContactOffice ~ < 2 man x year ~ 45000 lines of Java code (estimated target: 60 KLOC) ~ 300 files ~ 600 classes ~ 6000 Kbytes original JavaScript (ouch !) ~ 800 Kbytes compressed JavaScript ~ 250 Kbytes gziped • Aggressive caching mechanism GoogleWeb Toolkit JavaScript

  21. Development Workflow (Front-end) SoftwareEngineer UI I18n • CSS • Enhanced UI design, non-CSS attributes, Formatting… • SVN sandbox • RPC, Model • Raw UI design (Model interfacing, panels, widgets, …). • Custom widgets • RPC, Model, (naive) view enhancements • UI enhancements • i18n (GWT) • Help • Manuals

  22. Model - View - Remoting Synchronous call View Model Front-end only Add listener notify AbstractModelModelObjectModelFolder abstractions Asynchronous call with command piggybacking Asynchronous call AsyncCallback Remoting xxxServicexxxServiceAsync DTOs Shared between front-end and back-end

  23. 'Tip of the Day': Enhanced AsyncCallback • Throbber handling • Generic RPC exceptions handling • Commands piggybacking publicclass COAsyncCallback implements AsyncCallback { … public COAsyncCallback(AsyncCallback callback, Command onSuccessCommand) {

  24. 'Tip of the Day' (2) Create an event object in the back-end, then edit its properties EventPropertiesDialog.java (View) : publicstaticvoid 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; } publicvoid execute() { new EventPropertiesDialog(m_event).showCentered(); } } Event.java (Model) : publicvoid save(Command chainCommand) { getCalendarService().saveEvent(this, new COAsyncCallback(new GetEventDetailsCallback(), chainCommand)); }

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

  26. New GWT based Interface http://beta.contactoffice.com Help and extra information Indication of new + total number of items in lists Dashboard giving quick access to main features Navigation repeated on left

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

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

  29. New GWT based Interface - ListView Click to sort Marquee selection • 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 PropertyPageDialogBoxextends CODialogBox extends DialogBox • Modal or modeless • Resizeable or fixed • Close icon • Property pages framework (validation, (de)activation, …) • Specific listeners DialogRow Widget Property Page

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

  32. Drag & Drop ContactOfficeEnhancements • D&D engine handles: • Regular D&D • Marquee selection • Splitters • (Rectangular) drag sources & drop targets • Could be hidden in widgets implementation • Multi-select GoogleWeb Toolkit JavaScript

  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) HTTP request/session User credentials DB Transactions handling GWTServlet AbstractHandler Instantiates (on each RPC invocation) MailServices MailHandler Actual RPC implementation~ Invokes the Business Logic CalendarServices CalendarHandler … … RemoteService (GWT)

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

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

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

  39. Questions?

  40. Contact Us! info@contactoffice.com www.contactoffice.com blog.contactoffice.com

More Related