Background
In the spring of ’06 our team set out to build a general purpose geographic information system capable of presenting massive amounts of location-specific data in a user friendly interface. Our resulting product powers MapEcos.org, launched last November. MapEcos provides pollution data and information on pollution improvement efforts for over 23,000 industrial facilities across the United States. Our team built MapEcos along with business school faculty at Dartmouth, Duke, and Harvard as both a public service and a vehicle for academic research. We organize EPA data in a way that allows the public to learn more about the facilities, companies, and industries that affect their local communities, states, and the US as a whole. In addition, we encourage facility managers to post information on MapEcos about their environmental improvement efforts.
The Google Web Toolkit is a critical component of our web application (and, while we won’t address it in great detail in this post, the same should be said for the Google Maps API). We are pleased to be able to share some of our GWT thoughts and experiences with you:
Java wins over JavaScript: For a few months, we attempted to implement some of our low-level map features in JavaScript. We were wasting our time. As a language, Java doesn’t suffer many of the idiosyncrasies and complexities which can make JavaScript programming complicated, tedious, and unproductive. Our overall productivity increased dramatically as we began to re-implement and expand previously written JavaScript features in Java; we re-did months of work in a few weeks. Now we are able to share code between our client and server applications. The ability to use standard Java debuggers to identify problems in client code is also a noteworthy plus. In short, we find that GWT (nearly) brings the desktop application programming experience to the web.
As simple as necessary but no simpler: GWT is versatile. UI components are well thought out and implemented and often sufficient for our needs. While the toolkit provides useful high level abstractions, it allows us to implement low-level solutions in unusual circumstances. We use GWT’s DOM abstraction for low-level tweaking when necessary (e.g., to force GWT elements to appropriately overlay elements drawn by Google Maps) and we implemented our wrapper to the Google Map API using JSNI (Note: there is a fairly comprehensive open source maps library for GWT which might allow one to avoid JSNI altogether, depending on the needs of the mashup).
JSON and XML are well supported: We wanted to be able to present dynamic content on our map that wouldn’t necessarily come from our own back-end (i.e., the web server for the map application). By separating our lightweight map application server from the server instances that provide the MapEcos data, we are able to scale to support site load. GWT’s JSON and XML support made our job easy. The MapEcos data servers provide marked-up content containing facility, company, industry, and geographic data to a map application that doesn’t know much about the data it displays (we note that there are some security gotchas to avoid when providing this level of flexibility). Granted, JSON and XML aren’t unique to the GWT framework, but working with these standards on the client-side of an application has never been easier.
Oh, the time that we’ve saved: GWT does away with the idiosyncrasies of JavaScript without perceptibly compromising functionality or performance. More importantly, because it’s both powerful and easy to use, the GWT framework frees up valuable development time and allows us to direct our limited energy to our most pressing needs. As a result, we feel that the Google Web Toolkit has helped us build a better site.
We encourage you to take a look at MapEcos and learn more about environmental performance in your community. Comments welcome at info@mapecos.org.
We heard interesting stories from a number of people using GWT at the Voices that Matter conference in December. Chris Jones from YesMail was one of those. In our ongoing series of guest blog posts on how companies and individuals are using GWT, here is Chris to describe their experience.
In the spring of 2006, Yesmail began an initiative to re-invigorate its technology department with the development of Enterprise 6, our retention mailing platform (managing email communication with a subscribed customer base). The goal was to take the power of the platform and expose it as intuitively and comfortably as possible, taking opportunities to simplify and extend along the way.
(1) Creating a modern user experience.
The proclivity of Web 2.0 being what it is, the days of accepting poor interfaces as "inherent to the web-based platform" has gladly become dated.
We started out using another framework but ran in to some pretty big issues quickly. Getting good end-to-end test coverage on that app with Selenium was difficult due to our lack of full DOM control. That, coupled with early concerns regarding performance led us to fall back to a more traditional Spring/Hibernate form-based approach. With this foundation in place, we began integrating Dojo and DWR piecemeal to gain back some of our Web 2.0 feel.
When the time arose to challenge ourselves with a cutting-edge interface, to allow our users to simply and quickly construct complex data queries with an intuitive front end, we decided to evaluate two design prototypes, pitting the Dojo/DWR solution against GWT. Within one day of development time, the GWT solution was working, and looked great. Not only that, but the code was clean, straightforward Java code, readable and maintainable by every team member. With IDs and CSS classes assigned through the DOM interface, we could both test our app through Selenium and style it easily. Additionally, we were able to keep the vast majority of our JSP page structure and just attach our GWT module to a specific point in the DOM.
(2) Scalability and Maintenance
As development progressed, we continued to evaluate each feature, initially using GWT only when we needed something beyond the scope of standard forms. As our code base grew, the team figured it could enhance our interfaces by refactoring some of our GWT UI Code into a common library. This allowed us to leverage our knowledge of Java and our development platforms while making it easy to keep our UI design consistent. Eventually, our code base was rich enough and the development team fluent enough with GWT that it became our de-facto development platform for the user interface. Whether it's allowing our users to transform a scheduled list of data into a calendar format, create on-the-fly filters for large data sets, or build graphical overlays for image-based content, GWT has consistently proven to be a great decision for us. It's even allowed us to do things like this to browse help movies within the application.
The speed with which we can develop features using GWT was an encouraging first step, as it worked within our two-week iterative process. For long-term success, however, issues would need to be resolvable by any member of the team in a timely fashion. Enabling Java programmers to develop complex user interactions means that any skilled engineer can do it, not just developers with resumes heavy in JavaScript, Dojo, and CSS. As issues arise in QA, any developer on the team is fully equipped to take them on, encouraging team code ownership and removing bottlenecks that often pop up when niche skill sets are required by the project.
(3) Testing Practices
Our development process relies heavily on unit and acceptance testing before handing an iteration off to QA. The GWT-generated content allows Selenium to easily access and manipulate the DOM structure within the test cases. With the ability to assign IDs to various DOM elements through Java code as well as JSNI methods for the setup of various states associated with asynchronous calls, we were able to create a structure for acceptance testing which allowed us to programmatically drive these complex interfaces.
Our QA staff also uses our testing framework to build their own regression suites, and while this is probably a perfectly natural thing to do, it might be worth pointing out that GWT does nothing to limit us, or force us to use any additional syntax or code to do so. Trivial things like declaring: public static final String SAVE_BUTTON_ID = "saveButton"; ...go a long way when you can directly reference that String in your production GWT code as well as your unit tests and Selenium tests.
public static final String SAVE_BUTTON_ID = "saveButton";
Conclusion
The decision to turn to GWT for our front-end solution was a leading factor in our success over the past year which was recognized in The Forrester Waveª: Email Marketing Service Providers, Q4 2007. We're up to 17 GWT modules and 33,000 lines of GWT code although we're hoping to apply some of the performance techniques from the conference to reduce that. In nearly a year of running live in production, we have risen to over 60 live customers represented by over 740+ application users, and have added several new clients since the launch of version 6 of our product. Our projections for growth are strong, and we're looking forward to building on our technology over the next year. Cheers!
(Update: I've added the link in to one of YesMail's widgets, which "things like this" was supposed to point to but got dropped somewhere while I was posting. Also, thanks Scott Anderson and Manny Ju for helping out with this writeup on YesMail.)
Last month Pearson Education hosted a four day conference dedicated to GWT. For those who weren't able to attend (or even for those who were), the conference materials are now available, including:
In particular, you may want to check out Kelly's talk on usability, as well as Bruce and Dan's overview of how GWT can improve productivity. There's also the conversation with Josh Bloch and Joel's presentation on architecture design. And a panel of app developers talks about their firsthand experiences with GWT.
Thanks to Barbara Gavin and all the folks at Pearson Education for planning and hosting the conference. Thanks also to everyone who came to the conference for making it a success.
We're excited to have another guest blog post for you, brought to you by Jeet Kaul, VP of Sun's Developer Products and Programs. He's here to talk about using NetBeans to build web apps with GWT.
Google Web Toolkit is getting a lot of attention in the web developer community thanks to its interesting way of avoiding the need to write JavaScript code for interactive web applications. Developers from the NetBeans community recognized the benefits of such a solution and created a plug-in which integrates GWT support into the NetBeans IDE. NetBeans users can now choose GWT as one of the supported web frameworks, and NetBeans then helps them with all the important tasks such as editing, building, running and debugging GWT applications. Here's how to get started with GWT development in NetBeans and where to find more information about the plug-in.
Although GWT is not supported in NetBeans 6 out of the box, you can download this GWT plug-in and start developing GWT-based applications in NetBeans.
The first step is to install the plug-in using the Plug-in manager. Go to the "Tools | Plugins" menu action, switch to the "Downloaded" tab and locate the plug-in on your disk drive. You don't even have to restart your IDE - GWT support is instantly available for you!
The plug-in is seamlessly integrated into NetBeans IDE. That means that when you create a new web application GWT is shown as one of the available frameworks in the last step of the New project wizard. Here you can specify the GWT installation folder and choose the main entry point class of your GWT module.
You can use the plug-in both if you start from scratch or if you want to work on an existing GWT application. So if you used a different IDE than NetBeans before, it is easy to switch the GWT application to NetBeans. You just point the wizard to your existing GWT application and create a new project from existing sources.
Once you get the project created you can run the application simply by hitting the Run button. There are two options – you can either use the default Run action which deploys the application to the application server and opens your default web browser. The other option is to run GWT in hosted mode and then the GWT development shell is opened and you can see your application inside of it.
Debugging is also supported, so you can just run the Debug action and then the runtime is ran in debug mode. You can simply add breakpoints, step into, step out, etc. as you would expect in a regular web application.
NetBeans already provides lots of tooling out of the box that you can take advantage of, like a powerful XML editor, HTML editor and of course a Java editor with code completion and quick fixes. NetBeans 6 made huge strides in improving the editing experience and it shows when developing GWT applications, too. All GWT APIs are available for you including javadoc documentation, because the GWT jars get automatically added into the project during it's creation.
To learn more about GWT support in NetBeans, the project homepage and screencast can help you get started. Sang Shin, a member of the Sun technology evangelism team, also created a free course for GWT and NetBeans, so you can learn from his examples and do the hands-on lab.
The plug-in was developed as an open source project so we encourage developers to join the project and contribute. There are many ways you can contribute, even submitting an issue or request for enhancement counts.
The future roadmap contains exciting features such as refactoring for GWT and GWT-specific quick fixes in the editor which will make developing GWT code even more comfortable. We are always looking for feedback, so if you try out the project let the developers know what you think.
Another project that may be of interest is jMaki, an AJAX framework that provides a lightweight model for creating JavaScript centric AJAX-enabled web applications using Java, Ruby, PHP, and Phobos. jMaki has an integrated NetBeans module for all the above languages, and some new features are being developed that will expose all the jMaki widgets as GWT java components, easily accessible to GWT application developers using NetBeans.
There's also Project Woodstock, which provides the next generation of User Interface Components for the web, based on Java Server Faces and AJAX. This open source collaboration enables a community of developers to create powerful and intuitive web applications that are accessible and localizable, and which are based on a uniform set of guidelines and components, to help ensure ease of development and ease of use. These components enable visual web application development in NetBeans. Just drag and drop from the palette into the designer canvas and visually bind them to heterogeneous back end data sources (e.g. databases, Web Services, EJBs). Build powerful applications in minutes.
The NetBeans community has been growing a lot in past several years and NetBeans became a truly universal IDE, so if you haven't tried it recently, you may be surprised about the progress it has made. After all, it won't cost you much - it's free and open source. So give it a try today!
Pearson's Voices That Matter: Google Web Toolkit conference is only a few weeks away, and we're eager to meet folks from the GWT community there. For those of you looking for a little financial assistance, we've worked with Pearson to put together a GWT Scholarship. It's meant to reward folks who have built neat things with GWT, made it better by submitting bug reports and patches, or simply actively discussed GWT in the forums. If you receive a scholarship, you can attend the 3-day conference for a reduced rate of just $150.
We'll be handing out 25 scholarships to folks who have worked hard and contributed to the GWT community. Examples of contributions are:
If you're interested in applying for the Pearson GWT Conference Scholarship, send us an email explaining how you've contributed and how the scholarship would benefit you (no more than 300 words, please!) at gwt-pearson@google.com no later than Friday, November 16, 2007. We'll announce the recipients on Wednesday, November 21, 2007.
And we're looking forward to seeing you at the conference!
Update: scholarships still available
As an update: there are still scholarships available to attend the Voices That Matter: Google Web Toolkit conference in a few weeks in San Francisco. While we've seen several compelling entries, we'd love to see what else is lurking in the GWT community. We'll update this thread when we've run out; in the meantime, please drop us a line if you're interested.
We've got another guest blog post, this time from Russell Ivanovic, Software Developer at Groundhog Software. He's here to talk about his experience building a new product using GWT.
In 2006 Groundhog Software partnered with education specialists to deliver an electronic portfolio solution. As fate would have it, GWT was released by Google during the R&D phase of this project. Groundhog recognised that, even in its infancy (version 1.0), this was a product that could deliver the usability, scalability and ease of development that we needed. A proof of concept prototype was built successfully, and after funding was secured, full scale production began.
Today, Groundhog Software's solution ePo Builder is successfully deployed in a pilot of over 80 schools, catering for over 16,000+ users.
So what benefits did GWT bring to the table? Let's look at a few:
Our website has more information about ePo Builder and Groundhog Software.
