(Translated by https://www.hiragana.jp/)
GWT Blog: October 2007

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.

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:

  • Scalability & Bandwidth
    With over 16,000 users in the pilot phase alone, it rapidly became obvious that ePo had to be scalable. The beauty of GWT is that the client loads all of the presentation code in one hit (about 380kb) when the user first logs in. Once loaded (and cached by the browser) only very small packets of data need to go back and forth. Compare this to the traditional model of sending all your display code as well as data every time the user clicks on something, and you can quickly see how GWT saves us bandwidth, and makes it much easier to scale. This has the added advantage of making ePo 'dialup speed friendly' with none of the long page load times associated with sending your HTML code to the browser every time. This might seem trivial, until you consider that some of the most active schools on ePo share their bandwidth across many users, and are located in remote areas of Australia.
     
  • Focus on Usability, not Browsers and Syntax Errors
    Because GWT is coded in Java and compiled to cross browser JavaScript, the ePo dev team was able to use industry leading IDEs like NetBeans and Eclipse. With compile time checking, many levels of automation, and easy re-factoring, we were able to focus on design and usability and let GWT worry about the low level details. Working in Java has one other side benefit. While ePo was initially built in GWT 1.0, it transitioned to GWT 1.1, 1.2, 1.3 and finally 1.4 without any hiccups. The compiler flagged any errors immediately at compile time, and made fixing any small API changes a breeze. Also, the compiler has been improving over time, meaning that the final ePo code shipped on 1.4 ran faster, with smaller RPC packets than the original one, without our team needing to lift a finger!
     
  • Easy, Light AJAX
    GWT also makes AJAX easier than any other library, which makes building reusable, functional widgets a lot easier than ever before. Consider one quick example: when building ePo we wanted to create a stack panel, where many panels are in the stack, and you display one at a time. The first iteration was just a panel that hides and shows its contents, but we found the instant transitions confusing -- you click and your data disappears and is replaced by something else. So the logical choice was a 'slide' style transition. In traditional JavaScript development this would mean using a library like Dojo or Scriptaculous, each of which are extra downloads for the end user. Using GWT, Groundhog Software created an Effects framework that, once compiled, adds only 2kb to the size of the code - this is because the GWT compiler only compiles the code that you actually use. This allowed us to create a large, reusable framework for slides, fades and movements that we use across multiple projects without worrying about the overall size of the library, knowing the compiler would only take the bits we use.


     
  • GWT Magic - RPC and ImageBundle
    This last section I've title GWT Magic, and here's why. The back end of our project uses J2EE for all of our business logic and persistence. Traditionally to hook JavaScript or Flash into this framework, you have to get fancy with either XML or JSON. With GWT, you just use the built in RPC mechanism. The beauty of this is that you can pass your value objects directly from the back end, and use them on the front end without any need for modification or serialization; GWT does all this for you. The ImageBundle is an even more impressive bit of magic. It allows you to work with all your individual images as you normally would (for buttons, logos, status indicators, etc). When you compile your code, GWT combines all of these individual images into one big image, and adds all the smarts to your code for cutting the image up on the client side (using offsets). This has one massive benefit: instead of your browser making lots of little requests for each and every image (each with their own latency) only 1 request is made. This also has the added benefit of removing the 'jumpy' effect you get in browsers when you load in lots of little images at once.

Our website has more information about ePo Builder and Groundhog Software.

We wanted to highlight another success story for GWT. Lombardi Software has created an innovative modeling tool called Blueprint that they recently built using GWT. Rather than having me tell the story, here are the details from Alex Moffat, Engineering Manger at Lombardi:

We wanted to highlight another success story for GWT. Lombardi Software has created an innovative modeling tool called Blueprint that they recently built using GWT. Rather than having me tell the story, here are the details from Alex Moffat, Engineering Manger at Lombardi:

Lombardi Blueprint includes around 28,500 lines of our Java code that gets compiled to JavaScript by GWT. We think that's quite a lot but the largest page is 50% smaller, at 480K, than the less functional Dojo based prototype, and it was much easier to develop.

The challenge handed to us was to create a tool that the average business user could use to document and manage their business processes. It had to be easy to use, encourage collaboration between team members, and provide a shared repository for all of a company's process documentation. Workflow functionality had to be on par with our competitors: Microsoft Visio, IDS Scheer's ARIS, IBM's WebSphere Business Modeler, and other desktop modeling tools. But we also wanted wiki & shared whiteboard capabilities to store information. Editing should use the drag and drop interaction users of desktop apps are familiar with. We ended up with some additional features that really set us apart:

  • An intuitive map view as a high level visualization of a process
  • Automatic workflow diagram generation
  • PowerPoint generation for easily presenting the process
  • Online chat functionality

All that was a significant task for us to tackle and without GWT we wouldn't have accomplished it. It turned out that coding in JavaScript just wasn't an option for such a complex application. If you're developing a browser based app we'd highly recommend using GWT. And we've seen great success, with thousands of users in Fortune 500 companies around the world. And opposite the Web 2.0 / Enterprise 2.0 concern, users actually pay for our app!


(see the larger video)

Back when we began developing Blueprint, we started with a combination of HTML and Flash 8 for the interactive parts. We ended up abandoning that fairly quickly for a couple of reasons:

  • Flash is a plug-in. Even in this day and age, not everyone has the latest version of Flash installed on their machines. Lots of our users are at big corporations where their boxes are locked down tight enough that installing/upgrading browser plug-ins is a nonstarter.
  • Browser plug-in behavior is unpredictable. Weird browser interaction bugs made cross platform Flash support harder than we thought.

Our next iteration was pure HTML and JavaScript using Dojo. This approach fixed the problems we had with Flash, but had its own issues:

  • Execution speed and network performance. Dojo is a great and full featured framework, but that's a double edged sword. When we were done, we were including a JavaScript library on every page that was over a MB and a lot of that was dead code.
  • It felt like a black box. While Dojo is open source, without a good debugger it was very difficult to figure out what was going on under the hood. We got pretty good at using firebug and venkman with Firefox but that still left IE and neither solution was terribly easy to use.

Around that time, GWT 1.3 was released and we decided to take the plunge. Fortunately we didn't have to convert all of our JavaScript code to GWT at once. By using GWT's JSNI facilities, we were able to migrate areas gradually as we needed to make functional changes. Compared to our earlier efforts, GWT has allowed us to be far more productive and flexible. The big wins for us have been:

  • Great tooling. The fact that you can develop a GWT app using Eclipse or IntelliJ and use their refactoring support is huge. Whereas with the pure JavaScript solution we never did even simple changes like renaming methods for fear that we'd break things, now we can do that and far more aggressive changes with confidence.
  • Massively improved debugging. Hosted mode debugging is wonderful.
  • Elimination of memory leaks, especially in IE6. While the circular reference leak in IE6 was partially fixed in July with Microsoft security bulletin MS07-033, many of our clients (corporate users) have not installed it yet. Using GWT means the generated JavaScript code doesn't include the leak producing patterns.
  • Easy browser specific code. While GWT does a good job of hiding browser differences from us in most scenarios, there are always edge cases that we have to handle with our own code. GWT makes it really easy to add browser specific code and have that code only be served up to the appropriate browsers.
  • Code size and execution speed. The amount of JavaScript that we serve up on each page is far less with GWT. We're down to about 480K with GWT 1.4 for our largest page from over a MB since GWT compiles in only the code we need. In addition GWT 1.4 produces JavaScript that is about 70% of the size of the GWT 1.3 output for our pages, and the compilation process is about twice as fast. That's a nice benefit to get for what's turning out to be a very easy upgrade for us.
  • Unit tests. GWT makes it easy to run unit tests on our client side code without having to launch a browser. Testing the visual appearance of the screens still needs other solutions though.

Line count comparisons between the Dojo and GWT based versions of Blueprint are invidious, not least because the GWT version of Blueprint includes much more functionality than the Dojo based one did. However, for our last Dojo based release we wrote around 8,500 lines of JavaScript, and at this point we've written 28,500 lines of Java code, excluding comments, which GWT compiles to JavaScript. There's no way we could have built the equivalent functionality using JavaScript, and as mentioned before the resulting downloads are still smaller.

Overall we believe GWT has enabled us to write a much more reliable and efficient application and build it faster than we could have otherwise. Since its release just 120 days ago, people in 60 countries have begun using Blueprint; this represents more than 750 companies and thousands of individuals. You can check it out for yourself and let us know what you think!

Over the summer we blogged about a conference dedicated to the Google Web Toolkit (GWT) that the folks at Pearson Education are planning. We're happy to announce that the agenda has been posted.

Over the summer we blogged about a conference dedicated to the Google Web Toolkit (GWT) that the folks at Pearson Education are planning. We're happy to announce that the agenda has been posted.

Voices That Matter: Google Web Toolkit will take place December 3-6, 2007 at the Palace Hotel in San Francisco. The week kicks off on Monday, December 3rd, with (optional) preliminary workshops on JavaScript and AJAX development to prepare attendees for the rest of the week. Starting Tuesday morning, core conference sessions include:

  • Performance: Joel Webber, co-creator of GWT, will discuss best practices for web application performance and explain how to implement them with GWT
  • Usability: how to design GWT applications that make your end users not just happy but ecstatic
  • AJAX Security and GWT: a comparison of the security features of GWT applications and applications built with other AJAX frameworks like Prototype and Dojo as well as their susceptibility to attacks
  • Panel Session - Tools for GWT: creators of GWT-specific development tools will discuss how their products can improve your productivity by simplifying everything from RPC to 118N (internationalization)
  • Panel Session - GWT Apps in Production: learn from real-world projects about how to launch a large-scale GWT application and get the most from your serving infrastructure

In addition to the talks and panels, there will be several opportunities for more casual interactions with members of the GWT community, including the conference speakers. Nearly all of the GWT team will be speaking and participating in the conference including co-creators of GWT Bruce Johnson and Joel Webber. Feel free to check out the complete list of speakers.

Be sure to register before October 27th to receive the "early bird" discount. We'll see you there!