Your SlideShare is downloading. ×
The GWT bet ... Luc Claes CTO ContactOffice.com Google Developer Day 2007
Coming from the country of… <ul><li>…  please forgive my (broken) English ! </li></ul>
Agenda <ul><li>ContactOffice ? </li></ul><ul><li>Reengineering the interface </li></ul><ul><li>Selecting a framework </li>...
ContactOffice ? <ul><li>Collaborative & Messaging Web Application  </li></ul><ul><li>Founded in 1999 by 4 Belgian serial i...
How big ? <ul><li>1 million registrations </li></ul><ul><li>350.000 active accounts  (Feb 07) </li></ul><ul><li>250.000 pa...
Collaboration & Messaging WebApp Calendar (+ RSS) Contacts, To Do, Notes, Bookmarks (+ RSS), Synchro ... Groups Organiser ...
Everything can be shared  with users and groups! Sophisticated Access Right Model at user level  Applications : Individual...
ASP & Licence Models <ul><li>Hosted, Security, SLA </li></ul><ul><li>Personalised, Private Label versions </li></ul><ul><l...
Some happy customers
Technologies <ul><li>Back-end : </li></ul><ul><li>Pure Java (POJOs only) </li></ul><ul><li>Object Oriented Database </li><...
Reengineering the interface <ul><li>Goal: Interface upgrade to current standards </li></ul><ul><li>Weakness: Obsolete Clie...
Selecting a framework / technology <ul><li>Many good solutions </li></ul><ul><li>Own framework ? </li></ul><ul><ul><li>Cos...
JavaScript ? <ul><li>Powerful constructs </li></ul><ul><li>Functions as 1st class objects, closures </li></ul><ul><li>Prot...
The JavaScript nightmare <ul><li>(Very) dynamic language </li></ul><ul><ul><li>On the fly variables declarations </li></ul...
GWT ?  <ul><li>What is GWT ? </li></ul><ul><ul><li>G oogle  W eb  T oolkit </li></ul></ul><ul><ul><li>GWT is a Google fram...
Google Web Toolkit ?  <ul><li>Some features </li></ul><ul><ul><li>Performances: Aggressive caching, code optimization, com...
Google Web Toolkit ?  <ul><li>Java ? </li></ul><ul><ul><li>Java 1.4 (1.5 coming 'soon') </li></ul></ul><ul><ul><li>Subset ...
GWT & Software Engineering  <ul><li>'Industrial' software engineering </li></ul><ul><ul><li>Tools ! Tools! Tools ! </li></...
CO enhancements to GWT <ul><li>MV(C) framework </li></ul><ul><ul><li>THE  key factor for a successful large-scale developm...
CO-GWT – Some figures <ul><li>~ 1.2 man x year </li></ul><ul><li>~ 35000 lines of Java code </li></ul><ul><li>(estimated t...
Development Workflow (Front-end) Software Engineer UI <ul><li>RPC, Model </li></ul><ul><li>Raw UI design (Model interfacin...
M odel -  V iew -  R emoting Remoting Model View notify Synchronous call Add listener xxxService xxxServiceAsync DTOs Shar...
'Tip of the Day': Enhanced AsyncCallback <ul><li>Throbber handling </li></ul><ul><li>Generic RPC exceptions handling </li>...
'Tip of the Day' (2) public   void  save(Command chainCommand) { getCalendarService().saveEvent(this, new  COAsyncCallback...
Current Interface <ul><li>http://www.contactoffice.com </li></ul>
New GWT based Interface <ul><li>http://beta.contactoffice.com </li></ul>Indication of new + total number of items in lists...
New GWT based Interface Horizontal splitter COMenuBar extends MenuBar Frame
New GWT based Interface - TreeView StackPanel TreeView <ul><li>'Tree' based Composite </li></ul><ul><li>Drag & drop source...
New GWT based Interface - ListView Marquee selection Click to sort <ul><li>Multiselect, select range, (un) Select all </li...
Enhanced Dialogs PropertyPageDialogBox extends CODialogBox extends DialogBox Property Page <ul><li>Modal or modeless </li>...
Contextual menus MenuBar in PopupPanel <ul><li>Display is easy </li></ul><ul><li>Invocation is hard  (right-click portabil...
Drag & Drop <ul><li>D&D engine handles: </li></ul><ul><ul><li>Regular D&D </li></ul></ul><ul><ul><li>Marquee selection </l...
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 in...
Back-end (2) <ul><li>Straightforward integration </li></ul><ul><ul><li>Super-clean with a Java POJO back-end </li></ul></u...
TODO <ul><li>Usability !!! </li></ul><ul><li>Bug fixes… </li></ul><ul><li>Missing tools </li></ul><ul><ul><li>Forums, Task...
Beta Launched http://beta.contactoffice.com
Questions?
Contact Us! [email_address] www.contactoffice.com blog.contactoffice.com
Upcoming SlideShare
Loading in...5
×

Google Dev Day2007

1,685

Published on

Published in: Economy & Finance, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,685
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Transcript of "Google Dev Day2007"

    1. 1. The GWT bet ... Luc Claes CTO ContactOffice.com Google Developer Day 2007
    2. 2. Coming from the country of… <ul><li>… please forgive my (broken) English ! </li></ul>
    3. 3. Agenda <ul><li>ContactOffice ? </li></ul><ul><li>Reengineering the interface </li></ul><ul><li>Selecting a framework </li></ul><ul><li>Google Web Toolkit (GWT) ? </li></ul><ul><li>[email_address] </li></ul><ul><li>beta.contactoffice.com </li></ul>
    4. 4. ContactOffice ? <ul><li>Collaborative & Messaging Web Application </li></ul><ul><li>Founded in 1999 by 4 Belgian serial internet entrepreneurs </li></ul>
    5. 5. How big ? <ul><li>1 million registrations </li></ul><ul><li>350.000 active accounts (Feb 07) </li></ul><ul><li>250.000 paying accounts </li></ul><ul><li>Global, 6 languages </li></ul><ul><li>Profitable since 2003 </li></ul>
    6. 6. Collaboration & Messaging WebApp Calendar (+ RSS) Contacts, To Do, Notes, Bookmarks (+ RSS), Synchro ... Groups Organiser <ul><li>Mail (+ RSS), </li></ul><ul><li>IMAP4 & POP3(s), </li></ul><ul><li>SMTP, Webmail, </li></ul><ul><li>Antivirus & AntiSpam, </li></ul><ul><li>SMS, Fax, Alerts & Chat </li></ul>State-of-the-art Messaging <ul><li>Web upload or WebDAV </li></ul><ul><li>RSS & Vod/Podcasts, </li></ul><ul><li>Public sharing </li></ul>Documents Repository Forum, Wiki, Bulletin Board, Phone Calls, ... Collaboration
    7. 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. 8. ASP & Licence Models <ul><li>Hosted, Security, SLA </li></ul><ul><li>Personalised, Private Label versions </li></ul><ul><li>SSO : REST, XML-RPC, CAS, RSA ClearTrust, ... </li></ul><ul><li>API : XML-RPC </li></ul>
    9. 9. Some happy customers
    10. 10. Technologies <ul><li>Back-end : </li></ul><ul><li>Pure Java (POJOs only) </li></ul><ul><li>Object Oriented Database </li></ul><ul><li>Core business logic + various 'satellites' </li></ul><ul><ul><li>Web, SMTP c/s, POP3 c/s, IMAP4 c/s, WebDAV c/s, Synchro, Web services, … </li></ul></ul><ul><li>Built for scalability </li></ul><ul><li>Web Clients : </li></ul><ul><ul><li>Web 1.0 (HTML + JS + CSS) </li></ul></ul><ul><ul><li>~2000 JSP pages </li></ul></ul><ul><ul><li>Pocket Explorer + Symbian </li></ul></ul><ul><ul><li>Wap (WML) </li></ul></ul><ul><ul><li>Voice XML (prototype) </li></ul></ul>
    11. 11. Reengineering the interface <ul><li>Goal: Interface upgrade to current standards </li></ul><ul><li>Weakness: Obsolete Client Architecture (thousands of JSP files) </li></ul><ul><li>Strength: The 1999 Server Architecture (POJOs + OODB) is still state-of-the-art </li></ul><ul><ul><li>HTML + JavaScript + Frames </li></ul></ul><ul><ul><li>Desktop like, Web 2.0 style, </li></ul></ul><ul><ul><li>Drag & Drop, W idgets, ... </li></ul></ul>
    12. 12. Selecting a framework / technology <ul><li>Many good solutions </li></ul><ul><li>Own framework ? </li></ul><ul><ul><li>Cost of supporting what others might be doing well ? </li></ul></ul><ul><li>Ajax vs Flash ? </li></ul><ul><ul><li>OpenLazslo, Adobe Flex </li></ul></ul><ul><ul><li>Xml + script syntax, server-side lock-in, … </li></ul></ul><ul><li>SilverLight, JavaFX, good ol' Applets ? </li></ul><ul><li>Ultra lightweight client + server-side Java ? </li></ul><ul><ul><li>echo2, zk, thinwire... </li></ul></ul><ul><ul><li>Do they scale well ? </li></ul></ul><ul><li>Existing JS frameworks ? </li></ul><ul><ul><li>Dojo, Prototype, YUI, ... </li></ul></ul><ul><ul><li>JavaScript language… </li></ul></ul>JavaScript ? ?
    13. 13. JavaScript ? <ul><li>Powerful constructs </li></ul><ul><li>Functions as 1st class objects, closures </li></ul><ul><li>Prototype vs. Class </li></ul><ul><li>Metaprogramming </li></ul><ul><li>Ubiquitous dictionaries </li></ul><ul><li>Dynamic typing </li></ul><ul><li>but… </li></ul>JavaScript ? ?
    14. 14. The JavaScript nightmare <ul><li>(Very) dynamic language </li></ul><ul><ul><li>On the fly variables declarations </li></ul></ul><ul><ul><li>Weak typing </li></ul></ul><ul><ul><li>eval() </li></ul></ul><ul><ul><li>Interesting IDEs operations are 'impossible' (refactoring, smart searches, real-time compilation / syntax check, …) </li></ul></ul><ul><ul><li>Readability ? </li></ul></ul><ul><li>Imprecise scoping, encapsulation </li></ul><ul><li>Run-time errors detection only </li></ul><ul><li>Even worse: the DOM + the browsers quirks… </li></ul><ul><li>How to handle efficiently tens of Klocs, multiple developers ? </li></ul><ul><ul><li>Requires an extremely strict discipline (rules set, conventions) for a team </li></ul></ul>
    15. 15. GWT ? <ul><li>What is GWT ? </li></ul><ul><ul><li>G oogle W eb T oolkit </li></ul></ul><ul><ul><li>GWT is a Google framework for building AJAX apps in the Java language </li></ul></ul><ul><ul><li>Fully Open Source (Apache 2 Licence) </li></ul></ul><ul><ul><li>Java --> JavaScript translation </li></ul></ul><ul><ul><li>No plugin, no jvm </li></ul></ul><ul><ul><li>Just 1 year old </li></ul></ul>JavaScript GoogleWeb ToolKit ?
    16. 16. Google Web Toolkit ? <ul><li>Some features </li></ul><ul><ul><li>Performances: Aggressive caching, code optimization, compression </li></ul></ul><ul><ul><li>Clean backend integration: Efficient Java RPC mechanism (or JSON) </li></ul></ul><ul><ul><li>Portability: Generates platform-specific code </li></ul></ul><ul><ul><ul><li>(IE 6+, 'old' Mozilla, Firefox, Opera, Safari) </li></ul></ul></ul><ul><ul><li>Native Java S cript is still reachable: JSNI (JavaScript Native Interface) </li></ul></ul><ul><ul><li>i18n </li></ul></ul><ul><li>But... Java knowledge required for UI designers </li></ul><ul><ul><li>CSS only is not realistic </li></ul></ul>JavaScript Google Web Toolkit ?
    17. 17. Google Web Toolkit ? <ul><li>Java ? </li></ul><ul><ul><li>Java 1.4 (1.5 coming 'soon') </li></ul></ul><ul><ul><li>Subset of java.lang.* and java.util.* emulated </li></ul></ul><ul><ul><ul><li>No introspection, no dynamic class loading </li></ul></ul></ul><ul><ul><ul><li>Collections </li></ul></ul></ul><ul><ul><li>Optimizing Java  JavaScript compiler </li></ul></ul><ul><ul><ul><li>Dead code elimination </li></ul></ul></ul><ul><ul><ul><li>Deferred binding </li></ul></ul></ul><ul><ul><ul><ul><li>No if (mozilla) { … } code </li></ul></ul></ul></ul><ul><li>Relatively rich UI library </li></ul><ul><ul><li>Widgets </li></ul></ul><ul><ul><li>Panels </li></ul></ul><ul><ul><li>Some missing pieces… </li></ul></ul>JavaScript Google Web Toolkit ?
    18. 18. GWT & Software Engineering <ul><li>'Industrial' software engineering </li></ul><ul><ul><li>Tools ! Tools! Tools ! </li></ul></ul><ul><ul><ul><li>IDEs: Eclipse integration, JetBrains GWT Studio, GWT Designer, VistaFei, … </li></ul></ul></ul><ul><ul><ul><li>Debugging (GWT hosted mode) </li></ul></ul></ul><ul><ul><ul><li>Testing (junit) </li></ul></ul></ul><ul><ul><ul><li>Refactoring </li></ul></ul></ul><ul><ul><ul><li>Java SCCS </li></ul></ul></ul><ul><ul><ul><li>Smart searches, navigation, auto-complete, quick fix, … </li></ul></ul></ul><ul><ul><li>Compile time vs. Runtime errors detection **** </li></ul></ul>JavaScript Google Web ToolKit ?
    19. 19. CO enhancements to GWT <ul><li>MV(C) framework </li></ul><ul><ul><li>THE key factor for a successful large-scale development </li></ul></ul><ul><ul><li>Necessary for event driven interfaces (the A in A JAX) </li></ul></ul><ul><ul><li>Side effect : eases collaboration between UI and software developers </li></ul></ul><ul><li>Drag & Drop </li></ul><ul><li>Attractive look & feel </li></ul><ul><li>Contextual menus </li></ul><ul><li>Marquee selection </li></ul><ul><li>Draggable splitters, Rich Text Edit (available in GWT 1.4) </li></ul><ul><li>Data grid </li></ul><ul><li>Enhanced dialogs, property pages </li></ul><ul><li>EditableLabel, ProgressBar, … </li></ul><ul><li>Lesson: nothing was made 'impossible' by GWT design choices ! </li></ul>JavaScript Google Web Toolkit ContactOffice Enhancements
    20. 20. CO-GWT – Some figures <ul><li>~ 1.2 man x year </li></ul><ul><li>~ 35000 lines of Java code </li></ul><ul><li>(estimated target: 50 KLOC) </li></ul><ul><li>~ 250 files </li></ul><ul><li>~ 500 classes </li></ul><ul><li>~ 5000 Kbytes original JavaScript (ouch !) </li></ul><ul><li>~ 900 Kbytes compressed JavaScript </li></ul><ul><ul><li>(GWT 1.4: 680 Kbytes !) </li></ul></ul><ul><li>~ 270 Kbytes gziped </li></ul><ul><li>Aggressive caching mechanism </li></ul>JavaScript Google Web Toolkit ContactOffice
    21. 21. Development Workflow (Front-end) Software Engineer UI <ul><li>RPC, Model </li></ul><ul><li>Raw UI design (Model interfacing, panels, widgets, …). </li></ul><ul><li>Custom widgets </li></ul><ul><li>CSS </li></ul><ul><li>Enhanced UI design, non-CSS attributes, Formatting… </li></ul><ul><li>SVN sandbox </li></ul><ul><li>RPC, Model, (naive) view enhancements </li></ul><ul><li>UI enhancements </li></ul><ul><li>i18n (GWT) </li></ul><ul><li>Help </li></ul><ul><li>Manuals </li></ul>I18n
    22. 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. 23. 'Tip of the Day': Enhanced AsyncCallback <ul><li>Throbber handling </li></ul><ul><li>Generic RPC exceptions handling </li></ul><ul><li>Commands piggybacking </li></ul>public class COAsyncCallback implements AsyncCallback { … public COAsyncCallback(AsyncCallback callback, Command onSuccessCommand) {
    24. 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. 25. Current Interface <ul><li>http://www.contactoffice.com </li></ul>
    26. 26. New GWT based Interface <ul><li>http://beta.contactoffice.com </li></ul>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. 27. New GWT based Interface Horizontal splitter COMenuBar extends MenuBar Frame
    28. 28. New GWT based Interface - TreeView StackPanel TreeView <ul><li>'Tree' based Composite </li></ul><ul><li>Drag & drop source and target </li></ul><ul><li>Contextual menus </li></ul><ul><li>Close relationship with 'ModelFolder' and 'ModelObject' </li></ul>
    29. 29. New GWT based Interface - ListView Marquee selection Click to sort <ul><li>Multiselect, select range, (un) Select all </li></ul><ul><li>Data grid, logical scrolling </li></ul><ul><li>Close relationship with 'ModelFolder' and 'ModelObject' </li></ul><ul><li>Drag & drop source </li></ul><ul><li>Special keys handling </li></ul><ul><li>Sortable columns </li></ul><ul><li>Contextual menus </li></ul>
    30. 30. Enhanced Dialogs PropertyPageDialogBox extends CODialogBox extends DialogBox Property Page <ul><li>Modal or modeless </li></ul><ul><li>Resizeable or fixed </li></ul><ul><li>Close icon </li></ul><ul><li>Property pages framework (validation, (de)activation, …) </li></ul><ul><li>Specific listeners </li></ul>DialogRow Widget
    31. 31. Contextual menus MenuBar in PopupPanel <ul><li>Display is easy </li></ul><ul><li>Invocation is hard (right-click portability issues…) </li></ul>
    32. 32. Drag & Drop <ul><li>D&D engine handles: </li></ul><ul><ul><li>Regular D&D </li></ul></ul><ul><ul><li>Marquee selection </li></ul></ul><ul><ul><li>Splitters </li></ul></ul><ul><li>(Rectangular) drag sources & drop targets </li></ul><ul><ul><li>Could be hidden in widgets implementation </li></ul></ul><ul><li>Multi-select </li></ul>JavaScript Google Web Toolkit ContactOffice Enhancements
    33. 33. Legacy pages integration Legacy page (jsp) New page (GWT)
    34. 34. New calendar D&D event Access group & member's calendars Resizeable & overlap
    35. 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. 36. Back-end (2) <ul><li>Straightforward integration </li></ul><ul><ul><li>Super-clean with a Java POJO back-end </li></ul></ul><ul><ul><li>Fast migration path from DWR </li></ul></ul><ul><li>~ 5000 specific lines of code, 13 classes/interfaces </li></ul><ul><li>Front-end / back-end software versions synchronization needed! </li></ul>
    37. 37. TODO <ul><li>Usability !!! </li></ul><ul><li>Bug fixes… </li></ul><ul><li>Missing tools </li></ul><ul><ul><li>Forums, Tasks, Groups management </li></ul></ul><ul><li>Customization </li></ul><ul><ul><li>Dynamic CSS evaluation </li></ul></ul><ul><ul><ul><li>JSPs… not that easy in hosted mode. </li></ul></ul></ul><ul><ul><li>Compile time vs. Run time customization ? </li></ul></ul><ul><li>Safari & Opera portability </li></ul><ul><ul><li>Context menus </li></ul></ul><ul><ul><li>… </li></ul></ul>JavaScript Google Web Toolkit ContactOffice
    38. 38. Beta Launched http://beta.contactoffice.com
    39. 39. Questions?
    40. 40. Contact Us! [email_address] www.contactoffice.com blog.contactoffice.com

    ×