Raible Designs

Enhancing Evite.com with GWT and Grails

On my LinkedIn Profile, it says my current gig is a SOFEA consultant at a stealth-mode startup.

SOFEA Consultant, Stealth Mode Startup, Los Angeles, CA. December 2008 -- Present.

OK, I lied. It's not a startup, it's a well-known company that helps you plan parties. For the last 5+ months, my UI team from LinkedIn has been working with Evite.com to enhance portions of their site with a SOFEA architecture.

In January, we started evaluating Ajax Frameworks and came to the conclusion that GWT was right for us. After we chose the UI framework, other team members chose Grails and memcached to develop scalable RESTful services. The architecture we implemented involves using GWT's RequestBuilder to talk to Grails' services, which cache almost all their JSON output in memcached.

To see an example of a feature we developed with GWT, see Evite's Design Gallery. I personally worked on this feature and very much enjoyed becoming a GWT aficionado in the process. GWT's zero-turnaround feature made doing pure client-side work a lot of fun. It's definitely something I'd like to continuing doing at my next gig.

Everyone from Evite is very happy with what we've been able to do with GWT and Grails. We have a stateless architecture and are quickly able to develop both client-side and server-side features. We've learned to scale the client by using out-of-the-box GWT components. We've scaled Grails by caching as much as possible. We serve up Ads and Analytics using the same JavaScript mechanisms that traditional server-side frameworks use.

At the end of this month, my gig with Evite comes to an end. I'll be spending a few weeks at my family's cabin in Montana and then it's on to the next big thing. What's the next big thing? I'm not sure yet, hence the reason for writing this. If you're looking to develop a GWT application, introduce a SOFEA architecture at your company, or simply adopt some open source frameworks, I'd love to help out. Drop me a line and let's start a conversation.

Ajax Framework Analysis Results

Way back in January, I wrote about how my colleagues and I were evaluating Ajax frameworks to build a SOFEA-style architecture. To make our choice, we used the following process:

1. Choose a short list of frameworks to prototype with.
2. Create an application prototype with each framework.
3. Document findings and create a matrix with important criteria.
4. Create presentation to summarize document.
5. Deliver document, presentation and recommendation.

When I wrote that entry, we had just finished step 2 and were starting step 3. I first wrote this blog post a week later, when we delivered step 5. Here is the comparison and conclusion sections of the analysis document we composed.

Framework Comparison
In order to evaluate the different frameworks against important criteria, we created a matrix with weights and ranks for each framework. This matrix shows how our weighting and rankings lead us to the winner for our project. You can view this matrix online or see below for a summary.

Note: Criteria whose values were identical across all candidates were weighted at zero. Charting capability was weighted at zero b/c we decided to use Flash for this.

This matrix indicates that GWT is the best candidate for our team to develop SOFEA-style applications with. In addition to the matrix, below are graphs that illustrate interesting (and possibly meaningless) statistics about each project.

Conclusion
After working with the various frameworks, we believe that all the frameworks were very good and could be used to write applications with. If all weights are equal, these frameworks were almost even when compared against our evaluation criteria. The graph below illustrates this.

Even after applying the weighted criteria, the evenness doesn't change a whole lot.

Without considering the even or weighted criteria, we believe the decision all comes down to what the developers on the project feel they will be most comfortable with. If you're developing with Dojo or YUI, chances are you're dressing up existing HTML and possibly using progressive enhancement to add more rich functionality. On the other hand, Ext JS and GWT are similar to Swing programming where you build the UI with code (JavaScript for Ext JS, Java for GWT).

The tools available for JavaScript development have gotten increasingly better in recent years. IntelliJ IDEA has a JavaScript Editor that provides many of the same features as its Java editor. Aptana Studio also has excellent support for authoring and debugging JavaScript. However, we believe the Java debugging and authoring support in IDEs is much better. Furthermore, we are more familiar with organizing code in Java projects and feel more comfortable in this development environment.

Based on this evaluation, we believe that GWT is the best framework for our team to develop SOFEA-style applications with.

Flash Forward to Today...
The core GWT library from Google doesn't have a whole lot of widgets, nor do they look good out-of-the-box. So early on, we experimented with two alternative implementations that continue to leverage GWT concepts and tools:

• GXT: a GWT version of Ext JS
• SmartGWT: a GWT version of SmartClient

Unfortunately, over the past few months, we've found that both of these implementations are too heavy for our requirements, mostly because of the file size of the generated JavaScript code. For example, a feature I wrote generated a 275K *.cache.html file using GXT. After determining that was too slow to give users the initial "pop", I re-wrote it without GXT. After a day, we had an application with *.cache.html files of 133K. Yes, that's over a 50% reduction in size!*

Because of these findings, we are proceeding with the core GWT library from Google and adding in new components as needed. It is cool to know you can make a UI "pop" with GWT, as long as you stick to the core - close-to-the-metal - components. For those applications that can afford an initial "loading..." state, I'd definitely recommend looking at GXT and SmartGWT.

* To make refactoring easier, I copied GXT MVC into our source tree and modified all imports.

Modularizing GWT Applications with GWT-Maven

Last week, I spent some time modularizing the GWT application I'm working on. By modularizing, I mean splitting the code from one GWT module into a "core" and "webapp" module. The reason for doing this was so the "core" module could be used by another GWT application. Creating GWT Modules is fairly straightforward, but it wasn't as intuitive as expected when using the gwt-maven-plugin.

The hardest part of moving the code was figuring out how to run tests in the new "core" module. After getting it all working, it seems easy enough. Hopefully this post will make it easy for others. Here's the steps I'd recommend:

1. Convert your GWT project into a multi-module project where you have a top-level pom.xml and two sub-modules (e.g. gwt-core and gwt-webapp).
2. Do the normal single-to-multi-project Maven stuff like declaring the <parent> element in the modules and moving plugins/dependencies to the top-level pom.xml.
3. Refactor your gwt-webapp project to push down all shared classes (and their tests) to gwt-core.
4. In the gwt-core project, include *.xml and *.java in your JAR so GWT can extract/compile the source code when building gwt-webapp.

   <resources>
       <resource>
           <directory>src/main/java</directory>
           <includes>
               <include>**/*.java</include>
               <include>**/*.xml</include>
           </includes>
       </resource>
   </resources>
   

5. In gwt-core/src/main/java, create a Core.gwt.xml that references the modules you'd like to use in all your applications. For example:

   <module>
       <inherits name="com.google.gwt.user.User"/>
       <inherits name="com.google.gwt.i18n.I18N"/>
       <inherits name="com.extjs.gxt.ui.GXT"/>
       <inherits name="pl.rmalinowski.gwt2swf.GWT2SWF"/>
   </module>
   

6. Now the tricky part begins, mostly because of how the gwt-maven plugin currently works. In src/test/java, create a NoOpEntryPoint.gwt.xml that inherits your Core module and defines an EntryPoint.

   <module>
       <inherits name="com.company.app.Core"/>
       <entry-point class="com.company.app.NoOpEntryPoint"/>
   </module>
   

7. Create a NoOpEntryPoint.java class in the same directory as NoOpEntryPoint.gwt.xml.

   public class NoOpEntryPoint implements EntryPoint {
       
       public void onModuleLoad() {
           // do nothing
       }
   }
   

8. In any class that extends GWTTestCase (I usually create a parent class for all tests), reference the NoOpEntryPoint in the getModuleName() method.

       @Override
       public String getModuleName() {
           return "com.company.app.NoOpEntryPoint";
       }
   

9. Lastly, in the gwt-maven plugin's configuration (in gwt-core/pom.xml), reference the NoOpEntryPoint in <compileTargets>, a non-existent file in <runTarget> and only the "test" goal in the executions.

   <plugin>
       <groupId>com.totsp.gwt</groupId>
       <artifactId>maven-googlewebtoolkit2-plugin</artifactId>
       <version>2.0-beta26</version>
       <configuration>
           <compileTargets>
               <value>com.company.app.NoOpEntryPoint</value>
           </compileTargets>
           <runTarget>com.company.app.NoOpEntryPoint/doesntexist.html</runTarget>
           <logLevel>INFO</logLevel>
           <style>OBF</style>
           <noServer>false</noServer>
           <extraJvmArgs>-Xmx512m</extraJvmArgs>
           <gwtVersion>${gwtVersion}</gwtVersion>
           <testFilter>*GwtTestSuite.java</testFilter>
           <testSkip>${skipTests}</testSkip>
       </configuration>
       <executions>
           <execution>
               <goals>
                   <goal>test</goal>
               </goals>
           </execution>
       </executions>
   </plugin>
   

The results of modularizing your application are beneficial (shared code) and detrimental (you have to mvn install gwt-core whenever you make changes in shared classes). If you know of a way to configure the gwt-maven plugin to read sources from both gwt-core and gwt-webapp in hosted mode, I'd love to hear about it.

GXT's MVC Framework

For the past couple of months, I've been developing a GWT application using a mix of plain ol' GWT and GXT widgets. When I first started developing it, I didn't know how to best organize my code and separate the logic. The solution I came up with was to adopt some sort of MVC framework. Since I was already using GXT, I opted for GXT's lightweight MVC implementation.

As mentioned in Testing GWT Applications, GXT's MVC doesn't have much documentation. The best reference documentation seems to be Christian's Getting started with Ext-GWT: The Mail reference application.

Page Transitioning with Dispatcher
After working with GXT MVC for a couple months, I'm still not sure I fully understand how navigation and event dispatching works. The biggest point of confusion for me is how to best use GXT's Dispatcher class.

The problem with Dispatcher is it has a two methods that seem to do the same thing.

• forwardEvent (4 variations)
• dispatch (3 variations)

In addition to these methods in Dispatcher, there's two fireEvent methods in GXT's View class. According to my calculations, that means there's 9 different options for transitioning from one view to the next. Which one is best to use?

From what I've learned, I think it's best to use fireEvent in Views and forwardEvent in Controllers and other widgets. IMO, dispatcher should never be used except in your HistoryListener's implementation onHistoryChanged method. The important thing to realize about this method is it should only work if the View's Controller is registered for the event.

  protected void fireEvent(AppEvent event) {
    Controller c = controller;
    while (c != null) {
      if (c.canHandle(event)) {
        c.handleEvent(event);
      }
      c = c.parent;
    }
  }

However, fireEvent seems to work even when the View's Controller isn't registered for that event. This is because onHistoryChanged gets called in the EntryPoint. For experienced GXT MVC users, does this navigation handling mesh with your findings?

The most important thing for navigation to work successfully is enabling History support. The next section talks about how to do this effectively.

Enabling History Support
To help explain things better, I created a simple GWT MVC Example application and used Maven to create an archetype with it. You can create a project from the archetype using the following command:

mvn archetype:create -DarchetypeGroupId=org.appfuse.archetypes \
-DarchetypeArtifactId=gwt-mvc -DarchetypeVersion=1.0-SNAPSHOT \
-DgroupId=com.mycompany.app -DartifactId=myproject \
-DremoteRepositories=http://oss.sonatype.org/content/repositories/appfuse-snapshots

To enable history support in this application, I implemented HistoryListener in my EntryPoint (Application.java) and added the following logic to initialize:

// If the application starts with no history token, redirect to 'home' state
String initToken = History.getToken();
if (initToken.length() == 0) {
    History.newItem(HistoryTokens.HOME);
}

// Add history listener
History.addHistoryListener(this);

// Now that we've setup our listener, fire the initial history state.
History.fireCurrentHistoryState();

In this example, HistoryTokens is a class that contains all the URLs of the "views" in the application.

public class HistoryTokens {
    public static final String HOME = "home";
    public static final String CALENDAR = "calendar";
    public static final String NOTES = "notes";
    public static final String SEARCH = "search";
}

In order to make URLs like http://localhost:8080/#calendar go to the calendar view, the following logic exists in the onHistoryChanged method.

        Dispatcher dispatcher = Dispatcher.get();

        if (historyToken != null) {
            if (historyToken.equals(HistoryTokens.HOME)) {
                dispatcher.dispatch(AppEvents.GoHome);
            } else if (historyToken.equals(HistoryTokens.CALENDAR)) {
                dispatcher.dispatch(AppEvents.Calendar);
            } else if (historyToken.equals(HistoryTokens.NOTES)) {
                dispatcher.dispatch(AppEvents.Notes);
            } else if (historyToken.equals(HistoryTokens.SEARCH)) {
                dispatcher.dispatch(AppEvents.Search);
            } else {
                GWT.log("HistoryToken '" + historyToken + "' not found!", null);
            }
        }

Controllers are registered in the EntryPoint as follows:

        final Dispatcher dispatcher = Dispatcher.get();
        dispatcher.addController(new CalendarController());
        dispatcher.addController(new HomeController());
        dispatcher.addController(new NotesController());
        dispatcher.addController(new SearchController());

Controllers respond to events they're registered for. This is done in their constructor:

    public CalendarController() {
        registerEventTypes(AppEvents.Calendar);
    }

In order for navigation to work, you have to create links with history tokens¹. For example, here's a link from the HomeView class:

	Hyperlink notesLink = new Hyperlink("Notes", HistoryTokens.NOTES);
	notesLink.addClickListener(new ClickListener() {
	    public void onClick(Widget widget) {
	        Dispatcher.get().fireEvent(AppEvents.Notes);
	    }
	});

You'll notice in this example, I'm using Dispatcher's fireEvent method. If I wanted to pass some data with your event, you'll need to use forwardEvent. Here's an example from CalendarView:

    Button submit = new Button("Submit");

    submit.addSelectionListener(new SelectionListener<ButtonEvent>() {
        public void componentSelected(ButtonEvent ce) {
            AppEvent<Date> event = 
                new AppEvent<Date>(AppEvents.GoHome, date.getValue(), HistoryTokens.HOME);
            Dispatcher.forwardEvent(event);
        }
    });

In this example, you could also use Dispatcher.dispatcher(), but I believe this will cause the transition to happen twice because the onHistoryChanged method gets called too. This doesn't matter for the most part, except when you start to use DispatcherListeners.

Hopefully this article has helped you understand how GXT's MVC framework works. I'm interested in learning how other GWT MVC frameworks work. If you've used one, I'd love to hear about your experience.

Friday Fun Test
Here's a test for those interested in digging into the GXT MVC example. There's a bug in this application that prevents something from happening. I'll buy a drink for the person that finds the bug and I'll buy two drinks for the person that comes up with a solution.

1. If you use the default constructor on Hyperlink and use setText(), make sure to call setTargetHistoryToken() too. If you don't, a blank history token will be used and # causes the browser to scroll to the top before a page transition happens.

Comparing Web Frameworks Book

A publisher recently sent me an e-mail asking some advice. They received a proposal for a book that compares CakePHP, Symfony, Zend, TurboGears, Django, Struts, RoR. Here's a quote from the proposal:

We would like to compare a couple of frameworks and present their advantages and disadvantages in various applications.

Obviously, that kind of manual would be very useful for readers who are starting their 'adventures' with web applications, as it would facilitate their choosing the best framework for their particular application. The manuscript would offer a comparison of the most popular solutions (CakePHP, Symfony, Zend Framework, TurboGears, Django, Struts, Ruby on Rails) and demonstrate the main differences between each.

Therefore, the target audience would mainly be project managers, responsible for deciding on the technologies to be used for in-house projects, as well as less experienced, web application beginners.

Another purpose of the book would be to present 'good practices' in various frameworks, such as code re-factoring, design patterns and application security. From this point of view, it could become a valuable asset for experienced and learner programmers alike.

Since I got a lot of feedback from my tweet on this subject, I figured I'd ask it here.

What do you think of such a book?

Here's my response:

How do PHP books do these days? Of the list of frameworks (CakePHP, Symfony, Zend Framework, TurboGears, Django, Struts, Ruby on Rails), I think there's interest in Django and Rails, but not so much the others. And Struts sucks, so having that as a comparison is obviously going to make it look bad. I wouldn't buy it, but I'm a Java guy that's mostly interested in web frameworks that make developing SOFEA-based applications easier. In my mind, these are Flex and GWT.

The book I'd like to see would cover developing RESTful backends and SOFEA front-ends. RoR, Grails or Django could be used to develop the backend and Flex, GWT and X could be for the front-end. In reality, this is probably a tough book to write b/c things move so fast. If you decide to do it, I'd keep it short and sweet so you can get it to market and update it quickly.

Testing GWT Applications

Last week, I did some research on GWT, how to test it and code coverage options for tests that extend GWTTestCase. The reason I did this is because I've found that most of the GWT tests I write have to extend GWTTestCase and I'd like to have code coverage reports. Read below for more information on my findings for testing GWT classes.

There are quite a few articles about testing GWT applications. Here are a few samples:

• Test-First GWT
• Test driven development for GWT UI code
• Test driven development for GWT UI code with asynchronous RPC
• Enabling Test Driven Development in GWT client code
• JUnit tests for widgets - thread about which components to test.

The main gist of these articles is that you should structure your code to make the core functionality of your application testable without having to depend on GWTTestCase.

All of them also advocate using an MVC or MVP (Model View Presenter) pattern. Currently, I'm using GXT and its MVC Framework. Unfortunately, GXT's MVC doesn't have much documentation. The good news is there is a good article that explained enough that I was able to refactor my project to use it.

The unfortunate side of this refactoring was I discovered that classes that extend GXT's MVC Framework have to be tested with GWTTestCase. The downside to extending GWTTestCase is there is it's difficult to create code coverage reports.

GWT's issue 799 has some patches that should make code coverage possible. I tried to implement code coverage with Eclipse and EclEmma using this README, but failed. In the process, I discovered an issue with Eclipse 3.4 and JUnit on OS X. Reverting to Eclipse 3.3 solved this problem, but I was still unable to make EclEmma work with GWT.

After failing with Eclipse, I tried to use the emma-maven-plugin. I was also unable to get this to work, with my findings documented in this thread.

Finally, I did have some luck with getting IDEA's built-in code coverage feature working. However, after getting it to work once, it failed to work for the rest of the day and I haven't had success since.

Code Coverage and GWT
Because of these issues with GWT 1.5 and code coverage, I think I'll wait until GWT 1.6 to worry about it. The good news is 1.6 M1 was released last Friday. If continuing to use GWTTestCase becomes an issue, I may write my own MVC Framework that doesn't use classes that call native JavaScript. Hopefully GXT MVC's framework will provide a good example.

In addition to trying to get code coverage working, I used the internets to figure out how run GWT tests inside of Eclipse and IDEA. I don't remember the resources I used, but hopefully this up-to-date documentation will help others. The nice thing about using an IDE to run these tests is they typically execute much faster.

Running GWT Tests in Eclipse
You should be able to run most of your GWT tests from within Eclipse using the following steps.

1. Right-click on a test that extends GWTTestCase and go to Run As > JUnit Test. It's likely you will see the error message below.

   Invalid launch configuration: -XstartOnFirstThread not specified.
   
   On Mac OS X, GWT requires that the Java virtual machine be invoked with the
   -XstartOnFirstThread VM argument.
   
   Example:
     java -XstartOnFirstThread -cp gwt-dev-mac.jar com.google.gwt.dev.GWTShell
   

2. To fix this error, go to Run > Open Run Dialog. Click on the Arguments tab and add the following values. The 2nd value is to increase the amount of memory available to the test and avoid an OOM error.

   -XstartOnFirstThread -Xmx512M

3. When you re-run the test, you will probably see the following error:

   com.google.gwt.junit.JUnitFatalLaunchException: The test class 'org.richresume.client.home.HomeControllerGwtTest' 
   was not found in module 'org.richresume.client.Application'; no compilation unit for that type was seen
     at com.google.gwt.junit.JUnitShell.checkTestClassInCurrentModule(JUnitShell.java:193)
     at com.google.gwt.junit.JUnitShell.runTestImpl(JUnitShell.java:628)
     at com.google.gwt.junit.JUnitShell.runTest(JUnitShell.java:150)
     at com.google.gwt.junit.client.GWTTestCase.runTest(GWTTestCase.java:219)
   

4. To fix this, open the Run Dialog again, click on the Classpath tab and click on User Entries. Click on the Advanced button and select Add Folders. In the Folder Selection dialog, select your source and test directories (e.g. src/main/java and src/test/java).
5. Run the test again and you should see a green bar in your JUnit tab.
6. To create a JUnit configuration that runs all tests, duplicate the previously mentioned run configuration. Then change the name to "All Tests" and select the 2nd radio button to run all tests in the project.
7. Click Run to execute all the tests in the project.

Running GWT Tests in IDEA
You should be able to run your GWT tests from within IDEA using the following steps.

1. Right-click on a test that extends GWTTestCase and go to Run "TestNameGwtTes...". It's likely you will see the error message below.

   Invalid launch configuration: -XstartOnFirstThread not specified.
   
   On Mac OS X, GWT requires that the Java virtual machine be invoked with the
   -XstartOnFirstThread VM argument.
   
   Example:
     java -XstartOnFirstThread -cp gwt-dev-mac.jar com.google.gwt.dev.GWTShell
   

2. If you get a compiler error instead, you may need to add the GWT Facet to your project. To do this, right-click on your project's top-most folder in the left pane. Select Module Settings > Facets and enable GWT for your module.
3. To fix the -XstartOnFirstThread issue, go to Run > Edit Configurations. Add the following values to the VM Arguments field. The 2nd value is to increase the amount of memory available to the test and avoid an OOM error.

   -XstartOnFirstThread -Xmx512M

   NOTE: If you still get a compiler error, see this page for a possible solution.
4. Run the test again and you should see a green bar in your Run tab.
5. To create a JUnit configuration that runs all tests, duplicate the previously mentioned run configuration. Then change the name to "All Tests" and change the Test configuration to search for tests in the whole project.
6. Run the new configuration to execute all the tests in the project.

Testing GWT applications isn't as straightforward as writing JUnit tests, but I do believe it's getting better. If you have any additional tips and tricks, please let me know.

The State of the Web 2009

This afternoon, I attended The State of the Web 2009 at Web Directions North. Below are my notes from this session.

This panel has quite the list of superstars:

• Chris Wilson (Microsoft)
• Dan Connolly (W3C HTML Working Group)
• Mike (TM) Smith (W3C HTML Working Group)
• Lars Erik Bolstad (Opera)
• Scott Fegette (Adobe)
• John Allsopp (Organizer and Style Master Developer)

John is moderating this session and is starting by asking each panelist to speak about what they believe the state of the web is.

Chris Wilson
The future of the web may be as ubiquitous as electricity. Chris has a desktop, two laptops (one 10" NetBook, one is a 13" MacBook) and an iPhone. There's a lot of difference between these devices, especially when it comes to screen size. Chris uses a number of different browsers throughout the day. The web isn't just one browser, it isn't just one platform. He's showing a slide with a browser market share graph from http://www.netapplications.com.

Many different browsers are a reality. Many different devices are a reality. Web builders need to learn to write scalable applications that run across multiple browsers, devices and environments. They need to use progressive functionality and learn the tools they have in CSS and HTML. Semantic structuring helps.

Developers need to learn to live with multiple browsers. Cross-browser interoperability will get better, but it's likely to be an issue forever. Test suites with new specifications are helping. Developers should build for browsers of today and tomorrow.

You should build the applications you want to build and then figure out how how to make them degrade gracefully on the web.

Lars Erik Bolstad
Opera Software has 600 employees in 10 countries. They've been developing Opera and other browsers since 1995. The bulk of what Opera does is based on commercial browser deliveries to OEMs around the world.

Devices, platforms and networks: they come in all shapes and sizes. Only one thing unifies them: The Web. The browser is becoming more and more important on these devices. Users are not satisfied with WAP-based content anymore, they want the same content no matter which device they're using.

Opera Mini does its processing on the server-side. This allows Opera to gather statistics. These stats show that users around the world hit the same top sites on their mobile devices as they do on their desktops. It's a one-to-one match. Opera is seeing tremendous growth in the usage of Opera Mini, both in developed countries and emerging markets.

The point: don't just develop for desktop browsers. The mobile market seems to be growing much faster. The problem is actually more in the hands of browser developers since they have to satisfy the user's desire to see the same content on mobile vs. desktop.

Opera is focusing on advancing core browser technology in three areas:

• Web standards: CSS (webfonts, backgrounds/borders, transitions, transforms), HTML 5 (video/audio, persistent storage, drag and drop) and W3C Geolocation API and "Mobile DOM" API (access to camera, address book, calendars).
• Performance: VEGA (vector graphics-based rendering, hardware acceleration) and CARAKAN (new JavaScript engine, native compilation). For more details, see http://my.opera.com/core.
• Web applications: Standalone web apps, RIAs, Widgets. Gears support and Developer Tools.

Dan Connolly
The web is kinda important these days. It's a big deal. Make a mistake and 300 million dollars go away (see end of last entry about United news). One of the beauties of the web is you can easily participate as an individual. You can report bugs, write articles and be a part of many web standards groups. Most of the other systems in the world don't provide this kind of access.

Dan has been under a rock for the last 5 years working on Semantic Web stuff. Now that he's back in the game, it's incredible how much stuff is going on. He's glad there's JavaScript frameworks so he doesn't have to learn everything. The default security policies in browsers are a little rickety at this point. They allow you to download and run JavaScript from virtually any site. Caja might help to solve this. Dan believes that security will become more important and stricter to protect web users.

Scott Fegette
Scott is a Product Manager in the Web Group of Adobe. At the beginning of each year, they do heavy user research. Adobe wants people that develop content for the web to be as expressive as possible. Scott is going to give us a peak into the conversations he's had with the web community.

One of the biggest topics on people's minds is The Economy, but it's not negative as you might think. Small web designers are actually getting more business in the downturn, likely because companies are polishing their presence on the web. People are working much more distributed these days. There's a few areas that Adobe generally asks about: CSS, JavaScript, HTML (both statically and dynamically).

Frameworks are becoming more important to developers, as well as with clients. They've even seen some clients demand certain frameworks. Two years ago, when Adobe talked to small design shops and agencies, most web sites were built statically. Now they're developing with frameworks like WordPress. Out of 60 folks they talked to, only 2 were using static systems and not CMSes.

In the JavaScript frameworks arena, jQuery is the dominant leader. Shops are starting to use CSS frameworks as well. The only one Scott mentioned was Reset. Design is becoming a technical discipline and Adobe is calling this Stateful Design. WYSIWIG is definitely dying and designers aren't developing with visual tools.

The kind of projects that people are working on has changed a lot. Many shops are being asked to do work on mobile development. The iPhone has done wonders for the industry in raising the awareness of what a mobile device can do.

The other big investments for Adobe is RIAs and AIR. Ajax has matured enough that it can now compete with proprietary plugins like Flash. The reason for AIR is to allow web developers to use their skills to develop desktop applications. Flash and Flex are often overkill for browser-based applications, but they do often handle video and audio better than Ajax applications.

Mike (TM) Smith
Mike is also known as the "W3C HTML jackass". Mike thinks the state of the web is that it's a mess in a lot of ways. If you don't believe him, ask Doug Crockford. Most of this stuff is going to remain a mess for the next 20 years, unless another genius like Tim Berners-Lee comes along and invents something new. However, the good part about it being a mess is that we all have jobs.

One of the biggest things they're trying to do with HTML 5 is not breaking backward compatibility. Other working groups at the W3C don't share this philosophy, hence the reason they don't have browser vendors participating. Many of the ideas for HTML 5 game from Gears and Ajax Framework developers like John Resig. All this will make things less messy, especially with the help of browser vendors.

Developers like the ubiquitous web and are pushing the mobile web. Mike thinks everyone just needs to get a life (big applause). For mobile, SVG has already been a big success. You will see significant great things with SVN happen in major browsers by next fall. If you're a web developer, you should spend some time experiment with SVG. It will payoff for you. If it doesn't pay off for you and you see Mike next year at Web Directions North, you can punch him in the face.

Location-aware applications will be big as well. Browser vendors are implementing the Geo Location API. It's implemented in Opera, Firefox, WebKit and Gears. Video on the web will be significant as well. The SVG working group pioneered video support into standards, before HTML 5. Many of the problems they face are related to video codecs. The only way to solve the problems with video on the web is with money and lawyers. Very specifically, there's no royalty-free codec for video. This is nothing that standards bodies can solve. The most promising is that Sun Microsystems is developing an open codec and spending money to make sure they're not infringing on patents.

Not only is the HTML Working Group improving markup in HTML, they're also working on coming up with new APIs that give you access to features. If you have ideas that aren't included in HTML 5, the group is definitely interested in hearing about them.

After each panelist talked, John asked them questions about what's the biggest thing they'd like to see implemented by everyone (open video codec, geo location api were the winners). Mike also did some complaining about XML and how broken it is because there's no failure mechanism. There was some audience banter with Chris about SVG in IE.

Conclusion
This was a very interesting session, especially to hear from the people who are building/supporting the future of the web. I liked Scott's talk on what Adobe's hearing from their users. I also liked hearing Mike (TM)'s opinionated thoughts on XML and his non-marketing approach to most everything related to the web. Lars from Opera had a marketing-ish presentation, but it was nevertheless interesting to hear what Opera's working on. Good stuff.

Choosing an Ajax Framework

This past week, my colleagues and I have been researching Ajax Frameworks. We're working on a project that's following SOFEA-style architecture principles and we want the best framework for our needs. I'm writing this post to see 1) if you, the community, agree with our selection process and 2) to learn about your experiences with the frameworks we're evaluating. Below is the process we're following to make our choice.

1. Choose a short list of frameworks to prototype with.
2. Create an application prototype with each framework.
3. Document findings and create a matrix with important criteria.
4. Create presentation to summarize document.
5. Deliver document, presentation (with demos) and recommendation.

For #1, we chose Ext JS, Dojo, YUI and GWT because we feel these Ajax libraries offer the most UI widgets. We also considered Prototype/Scriptaculous, jQuery and MooTools, but decided against them because of their lack of UI widgets.

For #2, we time-boxed ourselves to 3 days of development. In addition to basic functionality, we added several features (i.e. edit in place, drag and drop, calendar widgets, transitions, charts, grid) that might be used in the production application. We all were able to complete most of the functionality of the application. Of course, there's still some code cleanup as well as styling to make each app look good for the demo. The nice thing about doing this is we're able to look at each others code and see how the same thing is done in each framework. None of us are experts in any of the frameworks, so it's possible we could do things better. However, I think it's good we all started somewhat green because it shows what's possible for someone relatively new to the frameworks.

For #3, we're creating a document with the following outline:

Introduction

Ajax Framework Candidates
(intro and explanation)

  Project Information
  (history)
  (license / cost)
  (number of committers)
  (support options)
  (mailing list traffic (nov/dec 2008))

Matrix and Notes

Conclusion

For the Matrix referenced in the outline above, we're using a table with weights and ranks:

Our strategy for filling in this matrix:

• Customer adjusts the weight for each criteria (removing/adding as needed) so all weights add up to 1.
• We rank each framework with 0, .5 or 1 where 0 = doesn't satisfy criteria, .5 = partially satisfies, 1 = satisfies.

The list of criteria provided to us by our client is as follows (in no particular order).

• Quality of Documentation/Tutorials/Self Help
• Browser support (most important browsers/versions based on web stats)
• Testability (esp. Selenium compatibility)
• Licensing
• Project health/adoption
• Performance
• Scalability
• Flexibility/extensibility
• Productivity (app dev, web dev)
• Richness of widget/component library
• Charting capability
• Ability to create new widgets
• Match to existing Java team skill-set
• Ease of deployment (on Ops, QA, Users)
• Degree of risk generally
• Ability to integrate with existing site (which includes Prototype)
• Easy to style with CSS
• Validation (esp. marking form elements invalid)
• Component Theme-ing/Decoration
• CDN Availability (i.e. Google's Ajax Libraries API or Ext CDN)

What do you think? How could this process be improved? Of course, if you have framework answers (0, .5 or 1) for our matrix, we'd love to hear your opinions.

2008 - A Year in Review

In 2005 and 2006, I did "A Year in Review" entries. 2007 was the year I got divorced, which probably motivated me to write a bit less. This year I'm back and ready to spend the next few hours writing, copying/pasting and linking like a madman. Hope you enjoy!

2008 was the year I traveled the world and developed a true passion for skiing. In January, my good friend Jason Miller moved back to Denver after quitting his job at Bear Stearns in NYC. We spent the first weekend in Nebraska working on Cletus's feedlot. The next week, my car stereo got stolen and I wondered if my bad knee would make it through the ski season (the good news is not only did I ski the rest of the season, but my knee healed itself over the summer).

At the end of January, the kids and I hiked to the top of Green Mountain and Don Brown made Maven not suck. Then I wondered if there was room for both Rails and Grails at a company and quickly learned both.

February started fantastically with a 14" Powder Day at Steamboat. I wondered if there is no "best" web framework and reviewed Grails and Rails books. After spending an awesome weekend in Tahoe, I took the kids on The Ski Train and learned more about Selenium at Google.

This brings us to one of my favorite posts of all time. On February 28th, Jack got a bead stuck in his nose. After taking him to the ER and paying $800, we found out magic recipe for bead removal is to "hold one nostril and give him a CPR-type breath/blow into his mouth". The reason I love the post so much is it's solved the problem for other frantic parents when they Google for "bead stuck in nose". Whenever I get a new comment, it always makes me smile.

March started out with a Powder Day at Whistler. I thoroughly enjoyed the rest of the weekend with good friends Jarvis and Korn Dog. After returning to Denver, I was allowed to blog about building a UI Frameworks Team at LinkedIn and posted my thoughts on Grails vs. Rails.

In mid-March, I achieved an all-Mac family and traveled to Lake Chelan for my sister's birthday. Shortly after, The AppFuse Primer was released. At the end of the month, I attended TSSJS in Vegas and moderated a Web Framework Smackdown.

In April, the LinkedIn Denver office opened and we all celebrated by attending the Rockie's Home Opener. The ski season came to an end and I wrote a howto for configuring Apache with mod_proxy and SSL on OS X. Then I discovered the JavaOne parties and wrote about running Spring MVC Web Applications in OSGi.

April ended with 82°F and May started with snow. I attended JavaOne (or at least the parties), released AppFuse 2.0.2 and figured out how to do extensionless URLs with the UrlRewriteFilter. The kids and I spent an afternoon in Rocky Mountain National Park and I did some coding in my backyard.

On Memorial Day, I enjoyed a liver-wrenching, Rockies-filled weekend with my sister her girlfriend Mya and Mr. Miller. I also contemplated making AppFuse Struts 2-specific.

June started with some mountain bike riding, planning some excellent vacations and getting a dream machine. I rode the annual trip to Big Head Todd at Red Rocks with Matt and Bruce. I took the kids on their first camping trip for Father's Day and had a blast. It took us several hours to find the campsite and my car kept starting all night long. It's sure to be a family tradition from now on.

The next weekend, I attended the American Craft Beer Fest in Boston. To end the month, I embarked upon Raible Road Trip #12 with Abbie, Jack and my Dad.

In July, the bus project began and I posted pictures of the trip to Montana. This year, I hope to spend the whole month of July at the cabin. I bought an iPhone (one of my best technology-related purchases to date). OSCON was fun but the week after wasn't.

August revealed my favorite birthday present. I didn't blog much the rest of the month, revealing why later.

Jack's Birthday Weekend was an outstandingly fun mixture of old friends and good Colorado beer. In September, I went to see the bus at MotorWorks, Abbie lost her first tooth and co-workers and I performance tested Memcached.

What followed was wonderful. Miller and I headed to Oktoberfest for the Best. Vacation. Ever. We still talk about how much fun we had on that vacation. October finished with the Colorado Software Summit and a hunting trip to the cabin.

November was a crazy month. I got laid off and celebrated Abbie's birthday on the same day. Jack got a mohawk and I traveled coast-to-coast in the same week. To close the month, I announced what's next and headed to Costa Rica.

I had a fantastic time in Costa Rica and was impressed to see Abbie is a blue skier shortly after. I did a Dojo/Comet Research Project for a week and enjoyed the location of my newest client last week. A small adventure turned into a scary adventure and I enjoyed telling my stories to fellow Java Enthusiasts in Portland.

Phew! It's been quite a year. For 2009, I'm still hoping for what I tweeted shortly after Costa Rica. I'd like to visit 3 foreign countries, take 3 months of vacation and spend 1 month in Montana. I have technology goals too, but those aren't nearly as much fun to dream about.

Happy New Year!

AppFuse Light converted to Maven modules, upgraded to Tapestry 5 and Stripes 1.5

This past week, I stayed up a couple of late nights to do some of the AppFuse Light work I wrote about in October. I converted all web frameworks to Maven modules, as well as made them inherit from the appfuse-web project. Below is what the new module structure looks like:

At this point, the project is ready to import into AppFuse's SVN project. Here's a list of other changes I made:

• Modules now depend on AppFuse's backend and allow you to use Hibernate, JPA or iBATIS as the persistence framework. Implementations for Spring JDBC, OJB and JDO have been removed.
• Upgraded to JWebUnit 2.1, which now uses HtmlUnit under the hood and has much better JavaScript support. It also has Selenium support, but I've yet to try it.
• Ajaxified Body integrated into all frameworks. You can easily turn it off by modifying the global.js file.
• Prototype and Scriptaculous loaded from Google's Ajax Libraries CDN.
• Upgraded to Tapestry 5. Mad props to Serge Eby and his tapestry5-appfuse project for showing me how to do this. Serge became a committer on AppFuse recently, so hopefully we'll continue to see great things from the Tapestry 5 support. I really like the clean URLs and minimum configuration required in Tapestry 5. It's testing framework is nice too, but I believe it could be improved.
• Upgraded to Stripes 1.5. This was easy and painless. I'm definitely a fan of Stripes and look forward to reading the Stripes book on my bookshelf.
• Dropped support for: Struts 1.x, WebWork, Spring MVC + Velocity.

If you want to try any of these applications, you can create archetypes using the following commands:

svn co https://appfuse-light.dev.java.net/svn/appfuse-light/trunk appfuse-light
cd appfuse-light/preferred-web-framework
mvn archetype:create-from-project
cd target/generated-sources/archetype
mvn install
cd ~/dev
mvn archetype:generate # The new archetype should show up as an option

Next steps include figuring out a way to flatten the inherited dependencies and plugins so archetype:create-from-project can create truly standalone projects. Please let me know if you have any questions.