Your SlideShare is downloading. ×
Google Dev Day2007
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Google Dev Day2007

1,650
views

Published on

Published in: Economy & Finance, Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,650
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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