• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google Dev Day2007
 

Google Dev Day2007

on

  • 2,771 views

 

Statistics

Views

Total Views
2,771
Views on SlideShare
2,768
Embed Views
3

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 3

http://www.techgig.com 2
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Google Dev Day2007 Google Dev Day2007 Presentation Transcript

  • The GWT bet ... Luc Claes CTO ContactOffice.com Google Developer Day 2007
  • Coming from the country of…
    • … please forgive my (broken) English !
  • Agenda
    • ContactOffice ?
    • Reengineering the interface
    • Selecting a framework
    • Google Web Toolkit (GWT) ?
    • [email_address]
    • beta.contactoffice.com
  • ContactOffice ?
    • Collaborative & Messaging Web Application
    • Founded in 1999 by 4 Belgian serial internet entrepreneurs
  • How big ?
    • 1 million registrations
    • 350.000 active accounts (Feb 07)
    • 250.000 paying accounts
    • Global, 6 languages
    • Profitable since 2003
  • 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
  • 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, ...
  • ASP & Licence Models
    • Hosted, Security, SLA
    • Personalised, Private Label versions
    • SSO : REST, XML-RPC, CAS, RSA ClearTrust, ...
    • API : XML-RPC
  • Some happy customers
  • 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)
  • 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, ...
  • 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 ? ?
  • JavaScript ?
    • Powerful constructs
    • Functions as 1st class objects, closures
    • Prototype vs. Class
    • Metaprogramming
    • Ubiquitous dictionaries
    • Dynamic typing
    • but…
    JavaScript ? ?
  • 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
  • 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 ?
  • 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 ?
  • 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 ?
  • 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 ?
  • 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
  • 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
  • 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
  • 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
  • '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) {
  • '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
  • Current Interface
    • http://www.contactoffice.com
  • 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
  • New GWT based Interface Horizontal splitter COMenuBar extends MenuBar Frame
  • New GWT based Interface - TreeView StackPanel TreeView
    • 'Tree' based Composite
    • Drag & drop source and target
    • Contextual menus
    • Close relationship with 'ModelFolder' and 'ModelObject'
  • 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
  • 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
  • Contextual menus MenuBar in PopupPanel
    • Display is easy
    • Invocation is hard (right-click portability issues…)
  • 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
  • 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 invocation) CalendarHandler CalendarServices … HTTP request/session User credentials DB Transactions handling RemoteService (GWT) Actual RPC implementation ~ Invokes the Business Logic
  • 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!
  • 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
  • Beta Launched http://beta.contactoffice.com
  • Questions?
  • Contact Us! [email_address] www.contactoffice.com blog.contactoffice.com