Tuesday, May 10, 2011

How GWT helped DayZipping


By Webb Brown, Co-Founder of DayZipping

This post is part of Who's at Google I/O, a series of guest blog posts written by developers who are appearing in the Developer Sandbox at Google I/O.


We launched DayZipping in July 2010 to help people easily find day trip ideas. Before starting the project we conducted an extensive search to find the most suitable web technologies. When evaluating our options we had two priorities that eclipsed all others. First, we wanted to minimize page load times, because we believed our consumer engagement (photo views, rapid spatial searches, etc.) would be strongly impacted by site performance. Part of this requirement was offering a snappy desktop-like experience for certain sections of our site. Secondly, we wanted an environment that didn't hinder our ability to iterate quickly across our entire web platform.

Below are the key factors that lead us to believe that Google Web Toolkit (GWT) is the best tool for the job. Also, we have included evidence of how GWT features have helped us accomplish these goals:

Inherent GWT Efficiencies. The GWT project structure comes chock full of performance benefits that are practically free. Its compilation process significantly reduces code size by renaming variables and inlining method calls when possible. The bootstrapping project structure permits perfect caching of browser-specific implementations by generating deployment files based on the MD5 hash of file contents. The only cost for these performance improvements is the time spent compiling code when deploying production releases, which for us amounts to a marginal five to ten minutes per week.

Resource Bundling. GWT allows you to reduce round trip times by bundling css, image, and text resources into initial page requests. Browser-specific implementations and perfect cacheing mechanisms are all managed behind the scenes. We've used this to bundle many of our static images and in certain cases removed up to 20 fetch requests on a single page.


Code Splitting. The ability to seamlessly split deployed Javascript into logical chunks has greatly improved our user experience. Google released code splitting after we began development of DayZipping, so we were able to analyze results independent of large feature changes. Implementing code splitting reduced our initial fragment download by approximately 100K, which equated to a 40% decrease in size for most browsers. This change in initial download time decreased our bounce rate by approximately 20% on most pages.

Java Tools. The tools available for GWT development have allowed us to stay nimble despite amassing a substantial code base for a two person development team. Eclipse's refactoring tools have arguably played the largest role in our ability to quickly make changes across the project. Being able to make logical adjustments as well as renaming entire functions or classes without having to track down all references has saved us considerable time relative to a Javascript environment. Eclipse syntax recognition and code completion tools make touching dusty sections of our code more palatable. Having the power of a JUnit test suite gives us the confidence to deploy these changes as rapidly as we could imagine. During these rapid iterations, the GWT perfect caching mechanisms relieve the risk of users being stuck with stale content.


Last year our initial hypothesis of a strong negative correlation between page load times and user engagement received compelling support. We made GWT compiler flag changes that gave us an immediate ~10% performance improvement. (You can explore performance gains by experimenting with the various compiler flag options shown here and analyzing the results.) This particular enhancement drove a nearly 1 to 1 increase in user engagement, pushing average pageviews per visit above 11. These engagement improvements have directly impacted conversion rates, which as a consumer startup is arguably our most important operating metric.

GWT has met our initial requirements with high marks. We genuinely believe that we would have been unable to accomplish these tasks as effectively with any other framework. Come visit our exhibit at Google I/O to hear more about the details of our experience.


Come see DayZipping in the Developer Sandbox at Google I/O on May 10-11.

Webb Brown uses his background in investment banking and software development to do a little bit of everything at DayZipping. He spends his free time outdoors and traveling, all while trying to complete as many trips on DayZipping as possible.

Posted by Scott Knaster, Editor

5 comments:

  1. I been wanting to learn GWT. But what are the downfalls if you can name any?

    ReplyDelete
  2. Nice article. Thanks. May I know the starting point to learn GWT.

    ReplyDelete
  3. Downsides to GWT:

    Slow debugging development.
    Lack of thirdparty libraries.

    ReplyDelete
  4. Use different flags like draft compile and debug it only for single browser and locale.

    There are many third party libraries like Google Mosaic etc

    ReplyDelete
  5. @Manoj Google provides a great starting point for those interested in GWT development. I suggest starting with the Stockwatcher tutorial. Link is provided below. The Google docs will get you a long way before you need to invest in a book. Hope this helps.

    http://code.google.com/webtoolkit/doc/latest/tutorial/gettingstarted.html

    D. Webb Brown

    ReplyDelete