Google Dev Day2007

  • 1,636 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,636
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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