Raible Designs

Raible Road Trip #13

Matt Raible — Mon, 29 Jun 2009 06:46:04 -0600

Another year has passed and it's time for the annual trek to The Cabin for the 4th of July. Last year, we took the route through Yellowstone. This year, we're going to shake things up a bit and head through Mount Rushmore.

One of the highlights of this trip is sure to be Fairmont Hot Springs. We're staying their tomorrow night and I'm sure Abbie and Jack will love it.

After 3 weeks at The Cabin, we'll be heading to Clint and Autumn's wedding reception in Idaho. Having so much time off from work is sure to be strange, but I'm sure I'll get used to it.

Happy 4th everyone!

Bandwidth saved by RSScache.com

The good ol' Job Hunt

Matt Raible — Fri, 26 Jun 2009 15:30:42 -0600

Just over two years ago, I wrote about the good ol' job hunt. Today, I find myself in a very similar situation. My Evite gig ends in a couple hours and I'm heading to The Cabin on Monday for a month of vacation. Similar to last time, there are opportunities out there, but most of them come through recruiters.

I have to admit - it seems like I got lucky the last couple times I tried to find a gig. I simply blogged I was looking and found myself negotiating with companies a few days later. Getting laid off from LinkedIn was awesome in that a few companies contacted me about hiring the whole team the next day. The ability to blog-and-get-a-gig was a great way to cut out the middle-man.

Unfortunately, I think I got spoiled by my blog-and-get-a-gig success. I figured it would happen again this time...

Not so much.

I don't know if it's because of the down economy or because I took the year off from speaking at conferences. Regardless, I'm in an interesting situation since I signed a 1-year lease on an office in downtown Denver. It's easy to market to companies in Denver, but if I land a gig here, there's a good chance the client is going to want me in the office everyday. That leaves me wondering: what's the best way to market to companies outside of Colorado? My ideal contract is one that 1) allows me to work remotely and 2) only requires me to travel once or twice a month.

I believe my ideal gigs are out there, but I think it's difficult to convince companies I'm a good remote worker. In an attempt to convince them otherwise, I'd like to offer recommendations from my last two clients.

"Matt contributed dramatically to the engineering practice at Evite, both directly and indirectly. Directly, he lead the effort to define and prove a successful new web UI architecture for us. Indirectly, he brought senior engineering talent into the organization, and energized the existing team. We are significantly better positioned to deliver on our Product goals as a result of having worked with Matt. I'd love to work with him again someday." David Thomas, VP of Technology, Evite

"Matt has unique abilities in the realm of software engineering. He brings great energy, an amazing breadth of knowledge in UI technologies, along with a can-do attitude that's refreshing to interact with. He is a great leader and communicator. In addition, Matt can apply his deep understanding of the technologies in question pragmatically to the engineering problem at hand, leading his team in execution and delivery. He's an excellent technical visionary to complement any team." Arnold Goldberg, Vice President Platform Engineering, LinkedIn

If you're looking to hire someone with my skills, let me know - there's a good chance you'll be glad you did.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

How to use GWT 2.0 with Maven and Generate SOYC Reports

Matt Raible — Thu, 25 Jun 2009 23:45:04 -0600

One of the most interesting features coming in GWT 2.0 is code splitting and the ability to use GWT.runAsync() to reduce the size of your application's initial download. This week, I learned how to use GWT 2.0 with my GWT 1.6/Maven project. Below are instructions on how to build and use the latest GWT with Maven.

Checkout GWT and setup GWT_TOOLS.
Set a GWT_VERSION environment variable to 2.0.0-SNAPSHOT (export GWT_VERSION=2.0.0-SNAPSHOT).
Build GWT with the ant command.

After building completes, install the GWT artifacts into your local Maven repository using the following commands:

mvn install:install-file -DgroupId=com.google.gwt \
-DartifactId=gwt-user -Dversion=2.0.0-SNAPSHOT \
-Dpackaging=jar -Dfile=build/lib/gwt-user.jar

mvn install:install-file -DgroupId=com.google.gwt \
-DartifactId=gwt-servlet -Dversion=2.0.0-SNAPSHOT \
-Dpackaging=jar -Dfile=build/lib/gwt-servlet.jar

mvn install:install-file -DgroupId=com.google.gwt \
-DartifactId=gwt-dev -Dversion=2.0.0-SNAPSHOT \
-Dclassifier=mac -Dpackaging=jar -Dfile=build/lib/gwt-dev-mac.jar

mkdir temp
tar -zxf build/dist/gwt-mac-2.0.0-SNAPSHOT.tar.gz -C temp
cd temp/gwt-mac-2.0.0-SNAPSHOT
zip -0 gwt-mac-2.0.0-SNAPSHOT.zip lib*.jnilib
cd ../..

mvn install:install-file -DgroupId=com.google.gwt \
-DartifactId=gwt-dev -Dversion=2.0.0-SNAPSHOT \
-Dclassifier=mac-libs -Dpackaging=zip \
-Dfile=temp/gwt-mac-2.0.0-SNAPSHOT/gwt-mac-2.0.0-SNAPSHOT.zip

Thanks to Jason for his help with this script.

Modify the pom.xml of your GWT project to use the the gwt-maven-plugin from Codehaus. Of course, you'll need to modify the <runTarget> to fit your project.

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>gwt-maven-plugin</artifactId>
    <version>1.1</version>
    <configuration>
        <runTarget>org.appfuse.gwt.mvc.${entry.point}/${entry.point}.html</runTarget>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
                <goal>test</goal>
            </goals>
        </execution>
    </executions>
</plugin>

Modify your dependencies to match the ones below. With the Codehaus plugin, dependencies are much more concise.

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-servlet</artifactId>
    <version>${gwt.version}</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-user</artifactId>
    <version>${gwt.version}</version>
    <scope>provided</scope>
</dependency>

Add <gwt.version>2.0.0-SNAPSHOT</gwt.version> to the properties section of your pom.xml.
At this point, you should be able to compile your project with mvn gwt:compile and run it in hosted mode using mvn gwt:run.

Generate SOYC Reports
In Google's code splitting documentation, it mentions The Story of Your Compile (SOYC). From the documentation:

To obtain a SOYC report for your application, there are two steps necessary. First, add -soyc to the compilation options that are passed to the GWT compiler. This will cause the compiler to emit raw information about the compile to XML files in an -aux directory beside the rest of the compiled output. In that directory, you will see an XML file for each permutation and a manifest.xml file that describes the contents of all the others.

The second step is to convert that raw information into viewable HTML. This is done with the SoycDashboard tool.

The first step is not currently possible with the gwt-maven-plugin, so I created a patch for it.

If you patch the gwt-maven-plugin and install it locally, make sure and change the version in your pom.xml to 1.2-SNAPSHOT.

To use the SoycDashboard tool, you'll need to install the gwt-soyc-vis.jar.

mvn install:install-file -DgroupId=com.google.gwt \
-DartifactId=gwt-soyc-vis -Dversion=2.0.0-SNAPSHOT \
-Dpackaging=jar -Dfile=build/lib/gwt-soyc-vis.jar

Now you can generate SOYC reports with mvn gwt:compile -Dgwt.compiler.soyc=true. You can also add <soyc>true</soyc> to the <configuration> section of the gwt-maven-plugin.

The second step (converting the raw information into viewable HTML) is possible using java from the command-line, or by using the exec-maven-plugin. Here's the (lengthy) command-line version:

java -Xmx1024m -cp /Users/mraible/.m2/repository/com/google/gwt/gwt-soyc/2.0.0-SNAPSHOT/gwt-soyc-2.0.0-SNAPSHOT.jar:/Users/mraible/.m2/repository/com/google/gwt/gwt-dev/2.0.0-SNAPSHOT/gwt-dev-2.0.0-SNAPSHOT-mac.jar com.google.gwt.soyc.SoycDashboard -resources ~/.m2/repository/com/google/gwt/gwt-soyc/2.0.0-SNAPSHOT/gwt-soyc-2.0.0-SNAPSHOT.jar -out target/soyc-report target/extra/org.appfuse.gwt.mvc.MVC/soycReport/stories0.xml.gz target/extra/org.appfuse.gwt.mvc.MVC/soycReport/dependencies0.xml.gz target/extra/org.appfuse.gwt.mvc.MVC/soycReport/splitPoints0.xml.gz

In this example, I'm using the files from stories0.xml.gz, dependencies0.xml.gz, splitPoints0.xml.gz. In the soycReport output directory, there's 5 of each these files and I'm not sure what the difference between reports is. Hopefully someone on the GWT team can elaborate. The exec-maven-plugin version is as follows:

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.1</version>
    <configuration>
        <executable>java</executable>
        <arguments>
            <argument>-cp</argument>
            <argument>
                ${settings.localRepository}/com/google/gwt/gwt-soyc/2.0.0-SNAPSHOT/gwt-soyc-2.0.0-SNAPSHOT.jar:${settings.localRepository}/com/google/gwt/gwt-dev/2.0.0-SNAPSHOT/gwt-dev-2.0.0-SNAPSHOT-${platform}.jar
            </argument>
            <argument>com.google.gwt.soyc.SoycDashboard</argument>
            <argument>-out</argument>
            <argument>target/soyc-report</argument>
            <argument>-resources</argument>
            <argument>
                ${settings.localRepository}/com/google/gwt/gwt-soyc/2.0.0-SNAPSHOT/gwt-soyc-2.0.0-SNAPSHOT.jar
            </argument>
            <argument>${project.build.directory}/extra/org.appfuse.gwt.mvc.MVC/soycReport/stories0.xml.gz</argument>
            <argument>${project.build.directory}/extra/org.appfuse.gwt.mvc.MVC/soycReport/dependencies0.xml.gz</argument>
            <argument>${project.build.directory}/extra/org.appfuse.gwt.mvc.MVC/soycReport/splitPoints0.xml.gz</argument>
        </arguments>
    </configuration>
</plugin>

After configuring this plugin in your project, you should be able to run mvn gwt:compile exec:exec and open the generated report (at target/soyc-report/SoycDashboard-index.html). Currently, there doesn't seem to be much documentation on SOYC. Fred Sauer's recent presentation talks a bit about SOYC and GWT.runAsync(), but that's about it.

To figure out how to use GWT 2.0 with Maven, I used my GWT MVC Example project. The first SOYC report I generated said the initial download was 108,967 KB. To integrate GWT.runAsync(), I modified all the project's controllers so their handleEvent() methods changed from this:

public void handleEvent(AppEvent event) {
    onViewHome(event);
}

To this:

public void handleEvent(final AppEvent event) {
    GWT.runAsync(new RunAsyncCallback() {
        public void onFailure(Throwable throwable) {
            Window.alert(throwable.getMessage());
        }

        public void onSuccess() {
            onViewHome(event);
        }
    });
}

When I generated a new SOYC report, the initial download size was reduced to 56,718 KB. Furthermore, I was able to see that my "Leftovers code" consisted of 63,175 KB. I'm sure there's better ways to split my project using GWT.runAsync(), but I'm happy to see I was able to reduce the initial download by 50%.

If you'd like to try GWT 2.0, you can can download my gwt-mvc example project. To build/run this project, you'll need to 1) build and install GWT, 2) patch gwt-maven-plugin and 3) run mvn gwt:compile exec:exec to generate the SOYC report. In an ideal world, the gwt-maven-plugin can be enhanced to generate the SOYC report (rather than using the exec-maven-plugin). In the meantime, I think it's pretty cool that you can try out GWT 2.0 features while they're still being developed.

Bandwidth saved by RSScache.com

JSON Parsing with JavaScript Overlay Types in GWT

Matt Raible — Wed, 24 Jun 2009 09:52:49 -0600

A reader recently asked:

I would love to see a snippet of how to eval the JSON coming from RequestBuilder into the OverlayTypes. What is the mapping like? I used OverlayTypes to read in static data that I render into the head section of the hosted page, which is pretty easy and fast, but I don't know how to do this "reading" dynamically at runtime.

If you're not familiar with GWT's Overlay Types (added in 1.5), see Getting to really know GWT, Part 2: JavaScript Overlay Types. In our project, we're using Overlay Types to simplify JSON parsing and make our application lean-and-mean as possible.

First of all, we have a JSOModel class that acts as our overlay type:

import java.util.HashSet;
import java.util.Set;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.core.client.JsArrayString;

/**
 * Java overlay of a JavaScriptObject.
 */
public abstract class JSOModel extends JavaScriptObject {

    // Overlay types always have protected, zero-arg constructors
    protected JSOModel() {
    }

    /**
     * Create an empty instance.
     * 
     * @return new Object
     */
    public static native JSOModel create() /*-{
        return new Object();
    }-*/;

    /**
     * Convert a JSON encoded string into a JSOModel instance.
     * <p/>
     * Expects a JSON string structured like '{"foo":"bar","number":123}'
     *
     * @return a populated JSOModel object
     */
    public static native JSOModel fromJson(String jsonString) /*-{
        return eval('(' + jsonString + ')');
    }-*/;

    /**
     * Convert a JSON encoded string into an array of JSOModel instance.
     * <p/>
     * Expects a JSON string structured like '[{"foo":"bar","number":123}, {...}]'
     *
     * @return a populated JsArray
     */
    public static native JsArray<JSOModel> arrayFromJson(String jsonString) /*-{
        return eval('(' + jsonString + ')');
    }-*/;

    public final native boolean hasKey(String key) /*-{
        return this[key] != undefined;
    }-*/;

    public final native JsArrayString keys() /*-{
        var a = new Array();
        for (var p in this) { a.push(p); }
        return a;
    }-*/;

    @Deprecated
    public final Set<String> keySet() {
        JsArrayString array = keys();
        Set<String> set = new HashSet<String>();
        for (int i = 0; i < array.length(); i++) {
            set.add(array.get(i));
        }
        return set;
    }

    public final native String get(String key) /*-{
        return "" + this[key];
    }-*/;

    public final native String get(String key, String defaultValue) /*-{
        return this[key] ? ("" + this[key]) : defaultValue;
    }-*/;

    public final native void set(String key, String value) /*-{
        this[key] = value;
    }-*/;

    public final int getInt(String key) {
        return Integer.parseInt(get(key));
    }

    public final boolean getBoolean(String key) {
        return Boolean.parseBoolean(get(key));
    }

    public final native JSOModel getObject(String key) /*-{
        return this[key];
    }-*/;

    public final native JsArray<JSOModel> getArray(String key) /*-{
        return this[key] ? this[key] : new Array();
    }-*/;
}

This class alone allows you to easily parse JSON returned in a callback. For example, here's an example of parsing Twitter's User Timeline in my OAuth with GWT application.

private class TwitterApiCallback implements RequestCallback {
    public void onResponseReceived(Request request, Response response) {
        if (response.getStatusCode() == 200) {
            JsArray<JSOModel> data = JSOModel.arrayFromJson(response.getText());
            List<JSOModel> statuses = new ArrayList<JSOModel>();
            for (int i = 0; i < data.length(); i++) {
                statuses.add(data.get(i));
            }

            // populate textarea with returned statuses
            for (JSOModel status : statuses) {
                payload.setValue(payload.getValue() + status.get("text") + "\n\n");
            }
            
            Label success = new Label("API call successful!");
            success.setStyleName("success");
            form.add(success);
        } else {
            onError(request, new RequestException(response.getText()));
        }
    }

    public void onError(Request request, Throwable throwable) {
        Window.alert("Calling API failed. " + OAuthPage.STANDARD_ERROR + "\n\n" + throwable.getMessage());
    }
}

To simply things even more, we created a BaseModel class that can be extended.

import java.util.Map;
import java.util.HashMap;

import com.google.gwt.core.client.JsArrayString;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.DOM;

public abstract class BaseModel {

    protected JSOModel data;

    public BaseModel(JSOModel data) {
        this.data = data;
    }

    public String get(String field) {
        String val = this.data.get(field);
        if (val != null && "null".equals(val) || "undefined".equals(val)) {
            return null;
        } else {
            return escapeHtml(val);
        }
    }

    public Map<String, String> getFields() {
        Map<String, String> fieldMap = new HashMap<String, String>();

        if (data != null) {
            JsArrayString array = data.keys();

            for (int i = 0; i < array.length(); i++) {
                fieldMap.put(array.get(i), data.get(array.get(i)));
            }
        }
        return fieldMap;
    }

    private static String escapeHtml(String maybeHtml) {
        final Element div = DOM.createDiv();
        DOM.setInnerText(div, maybeHtml);
        return DOM.getInnerHTML(div);
    }
}

You can extend this class and create model objects that represent a more Java-like view of your data. For example, I could create a Status class with the following code:

public class Status extends BaseModel {
    
    public Status(JSOModel data) {
        super(data);
    }

    public String getText() {
        return get("text");
    }
}

Then I could change my JSON parsing in TwitterApiCallback to be:

    private class TwitterApiCallback implements RequestCallback {
    public void onResponseReceived(Request request, Response response) {
        if (response.getStatusCode() == 200) {
            JsArray<JSOModel> data = JSOModel.arrayFromJson(response.getText());
            List<Status> statuses = new ArrayList<Status>();
            for (int i = 0; i < data.length(); i++) {
                Status s = new Status(data.get(i));
                statuses.add(s);
            }

            // populate textarea with returned statuses
            for (Status status : statuses) {
                payload.setValue(payload.getValue() + status.getText() + "\n\n");
            }

            Label success = new Label("API call successful!");
            success.setStyleName("success");
            form.add(success);
        } else {
            onError(request, new RequestException(response.getText()));
        }
    }

    public void onError(Request request, Throwable throwable) {
        Window.alert("Calling API failed. " + OAuthPage.STANDARD_ERROR + "\n\n" + throwable.getMessage());
    }
}

That's how we're doing lightweight JSON parsing with GWT. I've updated my GWT with OAuth demo with this code. You can also download the source. Please let me know if you have any questions.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

A Fun Father's Day at Great Sand Dunes

Matt Raible — Tue, 23 Jun 2009 23:28:13 -0600

Our Father's Day trip started out a bit rocky when my Dad's flight got delayed an entire day. Fortunately, it ended up being a blessing in disguise. As Doug commented, Friday night was wet and Saturday wasn't much better. Our friends, Jenny and Jeff, left early Saturday morning and arrived in time for a couple hours of rain. At 3:00 on Saturday afternoon, it cleared up and was beautiful for the rest of the weekend.

We showed up at 8:30 on Saturday night and stayed through Monday morning. If you asked Abbie and Jack, they'd say the best part was driving on the road past the Point of No Return. My favorite moment was when they climbed to the top of a dune with me. The mosquitoes were mean and plentiful, but the campground was well equipped and had excellent views.

If you ever get a chance to take your kids to Great Sand Dunes, you should jump at the opportunity. This place is simply awesome. For more pictures, see my Great Sand Dunes 2009 set on Flickr.

Bandwidth saved by RSScache.com

Going to the Great Sand Dunes for Father's Day

Matt Raible — Fri, 19 Jun 2009 15:57:01 -0600

Last year's Father's Day Camping Trip was quite the debacle. Regardless, we had a lot of fun and I'm committed to making it a tradition. This year, we're going camping at the Great Sand Dunes in Southern Colorado. The last time I went camping at the Sand Dunes was before Abbie was born, so I'm very much looking forward to it. It's really an amazing place that's somewhat indescribable with words. It's one of those places you have to see to believe.

The funny part of this year's trip is it's already looking like we might have some good adventures. My dad was supposed to fly into Denver today at 3:00. It's a 4-hour drive to the dunes, which puts us arriving around 7:30. That's probably enough time to pitch a tent and have a beer or two. Instead, his flight is delayed. Arriving in the dark w/o a campsite seems like a bad idea, so I made a reservation at the KOA Campground in Alamosa. I'm somewhat disappointed we won't be camping at the dunes tonight, but we'll get to see the dunes first thing in the morning.

To all the dads out there - I hope you have a great Father's Day weekend!

Update @ 5:45 PM: My dad just called and said United cancelled his flight. Apparently, they'll put him on the same flight tomorrow. That means we won't get to the dunes until 7:30 tomorrow night.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

Implementing OAuth with GWT

Matt Raible — Thu, 18 Jun 2009 13:59:13 -0600

I've heard about OAuth for quite some time, but never had an opportunity to implement it on a project. For a good explanation of what OAuth is, see its Introduction. Here's an excerpt:

...it allows you the User to grant access to your private resources on one site (which is called the Service Provider), to another site (called Consumer, not to be confused with you, the User). While OpenID is all about using a single identity to sign into many sites, OAuth is about giving access to your stuff without sharing your identity at all (or its secret parts).

The reason I needed OAuth was to interact with the Google Contacts API. I've always hated how sites make you import all your contacts from Gmail. I wanted to develop a system that'd let you simply read your contacts from Google in real-time.

Since the application I'm working on uses GWT, I chose to implement an OAuth client in GWT. After googling for "gwt oauth", I found two examples. Unfortunately, neither worked out-of-the-box.

The good news is I did manage to create a working solution. The bad news is it only seems to work at random. That's right folks, I created a solution that only works 50% of the time. I'm somewhat embarrassed to post it here, but I also realize the power of open source and community. By sharing, I hope we can find the flaws in my logic and come up with a solution for all GWT applications.

The best project for OAuth libraries seems to be oauth on Google Code. However, you'll notice that there is no JavaScript implementation listed on the homepage. I did look at the Java implementation, but quickly realized it wouldn't be usable in GWT. Therefore, I opted for the JavaScript implementation.

OAuth consists of several steps. The following diagram explains the authentication flow nicely.

In a nutshell, you have to complete the following steps:

Get a token from the service provider.
Redirect user to service provider to grant access and redirect back to application.
Request access token to access protected resources.
Access protected resources and pull/push data.

To access a service provider's OAuth service, you'll likely need to start by registering your application. For Google, OAuth Authentication for Web Applications is an excellent resource. Google's OAuth Playground is a great way to with the Google Data APIs after you've registered.

Now that you know how OAuth works, let's look at how I implemented it with GWT. I started by adding the necessary JavaScript references to my *.gwt.xml file.

<script src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"/>
<script src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"/>

Next, I needed a way to sign the request. I tried to use Sergi Mansilla's OAuth.java for this, but discovered issues with how the parameters were being written with GWT 1.6. I opted for Paul Donnelly's makeSignedRequest function instead. By adding this to my application's HTML page, I'm able to call it using the following JSNI method:

public native static String signRequest(String key, String secret, String tokenSecret, String url) /*-{
    return $wnd.makeSignedRequest(key, secret, tokenSecret, url);
}-*/;

After the URL is signed, it needs to be sent to the provider to get a request token. To do this, I used GWT's RequestBuilder and created a send() method:

protected void send(RequestCallback cb, String URL) {
    RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL);
    builder.setTimeoutMillis(10000);
    builder.setCallback(cb);
    
    Request req = null;
    try {
        req = builder.send();
    } catch (RequestException e) {
        cb.onError(req, e);
    }
}

If you try this with Google's Request Token URL in GWT's hosted mode, nothing will happen. Compile/browse to Safari and you'll still see nothing. Try it in Firefox and you'll see the following.

To workaround browsers' Same Origin PolicyI added a proxy servlet to send the requests. I started with Jason Edwards's ProxyServlet and modified it to fit my needs. I then registered it in both *.gwt.xml and web.xml.

<servlet path="/google/" class="org.appfuse.gwt.servlet.AlternateHostProxyServlet"/>

Now, before calling the send() method, I replace the start of the URL so the request would be routed through the servlet.

public void getToken(RequestCallback cb) {
    String url = signRequest(provider.getConsumerKey(), 
                             provider.getConsumerSecret(), 
                             "", provider.getRequestTokenURL());
    url = url.replace("https://www.google.com/", "/google/");
    send(cb, url);
}

When the request returns, I create two cookies by calling a createOAuthCookies() method with the payload returned:

public static String[] createOAuthCookies(String data) {
    String oauth_token = data.substring(data.indexOf("oauth_token=") + 12);
    oauth_token = oauth_token.substring(0, oauth_token.indexOf("&"));

    String oauth_token_secret = data.substring(data.indexOf("oauth_token_secret=") + 19);

    Cookies.setCookie("oauth_token", URL.decode(oauth_token));
    Cookies.setCookie("oauth_token_secret", URL.decode(oauth_token_secret));
    return new String[]{oauth_token, oauth_token_secret};
}

The next step is to authorize the token. This is where things got tricky with my proxy servlet and I had to add some special logic for GWT. Google was sending back a 302 with a Location header, but it wasn't hitting the onResponseReceived() method in my callback. For this reason, I had to change it to a 200 status code and add the redirect location to the body. I also discovered that sometimes they'd return an HTML page with a <meta http-equiv="refresh" ...> tag. When using Twitter, I discovered the full HTML for the allow/deny page was returned. Below is the callback I'm using. WindowUtils is a class I got from Robert Hanson and the gwt-widget project.

public void onResponseReceived(Request request, Response response) {
    String text = response.getText();
    if (response.getStatusCode() == 200 && response.getText().startsWith("http")) {
        WindowUtils.changeLocation(response.getText());
    } else {
        // look for meta-tag that refreshes and grab its URL
        if (text.contains("";
            String url = text.substring(text.indexOf(tokenToStartWith) + tokenToStartWith.length());
            url = url.substring(0, url.indexOf(tokenToEndWith) + tokenToEndWith.length());
            WindowUtils.changeLocation(url);
        } else {
            // Twitter returns a full HTML page, so redirect to the authorize URL manually
            if (provider instanceof Twitter) {
                String url = provider.getAuthorizeTokenURL();
                url = url.replace("$1", OAuthRequest.getAuthToken());
                url = url.replace("$2", DefaultRequest.getCurrentLocation());
                WindowUtils.changeLocation(url);
            } else {
                onError(request, new RequestException(text));
            }
        }
    }
}

public void onError(Request request, Throwable caught) {
    Window.alert("Calling authorize token failed. " + OAuthPage.STANDARD_ERROR + "\n\n" + caught.getMessage());
}

The 3rd step is to get an access token. The most important thing to remember when you do this is to include the "oauth_token_secret" value when signing the request.

signRequest(provider.getConsumerKey(), provider.getConsumerSecret(), 
            getAuthTokenSecret(), url);

After this completes with a 200, I create the cookies again (since oauth_token and oauth_token_secret are returned in the body), then call the API to get a list of contacts. The ContactsRequests class is responsible for making the call. The DefaultRequest class contains the send() method as well as utility methods to get the cookie values of the oauth tokens.

public class ContactsRequest extends DefaultRequest {
    private static final String GOOGLE_CONTACTS_URL = 
        "http://www.google.com/m8/feeds/contacts/default/thin?oauth_token=$1";
    private OAuthProvider provider;

    public ContactsRequest(OAuthProvider provider) {
        this.provider = provider;
    }

    public void getContacts(RequestCallback cb) {
        String url = GOOGLE_CONTACTS_URL.replace("$1", getAuthToken());
        url = signRequest(provider.getConsumerKey(), provider.getConsumerSecret(), 
                          getAuthTokenSecret(), url);

        String proxiedURLPrefix = "/contacts/";
        // allow for deploying at /gwt-oauth context
        if (WindowUtils.getLocation().getPath().contains("gwt-oauth")) {
            proxiedURLPrefix = "/gwt-oauth" + proxiedURLPrefix;
        }

        url = url.replace("http://www.google.com/", proxiedURLPrefix);

        send(cb, url);
    }
}

If all goes well, the response contains the data you requested and it's used to populate a textarea (at least in this demo application). Of course, additional processing needs to occur to parse/format this data into something useful.

This all sounds pretty useful for GWT applications, right? I believe it does - but only if it works consistently. I sent a message to the OAuth Google Group explaining the issues I've had.

I'm trying to use the JavaScript API to authenticate with OAuth from a GWT application. I've got it working with both Google and Twitter's OAuth implementations. However, it seems to fail to sign the URL at random. In other words, it works 1 out of 3 times. ... Any idea why this could be happening?

I received a response with a cleaner makeSignedRequest() function. I tried it and, unfortunately, it seems to be equally unreliable. I suspect the problem is with the OAuth JavaScript implementation, GWT's interpretation of it, or that OAuth isn't as mature as it appears to be. I'd like to think one of the first two causes the problem.

To make it easier to create a robust example of GWT and OAuth, I created a gwt-oauth project you can download or view online. Please keep in mind the demo is likely to be flakey. If you're persistent and try enough times, it's likely to work. Firefox seems to succeed moreso than Safari or Chrome. If you have any suggestions for improving this example, please let me know.

Bandwidth saved by RSScache.com

[Ad] Los Angeles Mom Lost 47 lbs Following 1 rule!

I Cut Down 47 lbs of Stomach Fat In A Month By Obeying This 1 Old Rule

Enhancing Evite.com with GWT and Grails

Matt Raible — Mon, 15 Jun 2009 07:41:37 -0600

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.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

2nd Row at Red Rocks and Elephant Rock Ride

Matt Raible — Mon, 8 Jun 2009 22:54:15 -0600

This past weekend, I did a lot of traveling by 2 wheels. The weather was beautiful and - thanks to Bruce - we had 2nd row seats to the Big Head Todd concert at Red Rocks. We did our annual ride, leaving my house around 4 and arriving 30 minutes before the show began. Upon arrival, Bruce's odometer showed 21 miles.

The seats were awesome - 2nd row, just left of center. They were so close, it felt like a private show. In fact, I got a head-nod from Jeremy (keyboardist) because he could see my face in the crowd.

The show ended around midnight and we hopped on our bikes for the ride home. This time, it only took 1:40 (it took 3 hours for the trip out) and I was in bed by 2.

Sunday morning, I woke up at 7, looked up the Elephant Rock start times and hit snooze for an hour. The last start for the 25-mile off road ride was 9:30 and I left the starting gate at 9:28. I had a very enjoyable ride (temp was 65°F) and finished in 2.5 hours.

As you can imagine, I was pretty tired after 67 miles in 18 hours. I can't imagine what it'd be like to do 100 miles in a single day. Century riders are either impressive or crazy, I'm not sure which.

Bandwidth saved by RSScache.com

Creating a Facebook-style Autocomplete with GWT

Matt Raible — Fri, 5 Jun 2009 07:05:10 -0600

Have you used the "To:" widget on on Facebook or LinkedIn when composing a message? It's an autocompleter that looks up contact names and displays them as you type. It looks like a normal textbox (a.k.a. <input type="text">), but wraps the contact name to allow you to easily delete it. Here's a screenshot of what Facebook's widget looks like.

Last week, I was asked to create a similar widget with GWT. After searching the web and not finding much, I decided to try writing my own. The best example I found on how to create this widget was from James Smith's Tokenizing Autocomplete jQuery Plugin. I used its demo to help me learn how the DOM changed after you selected a contact.

GWT's SelectBox allows you to easily create an autocompleter. However, it doesn't have support for multiple values (for example, a comma-delimited list). The good news is it's not difficult to add this functionality using Viktor Zaprudnev's HowTo. Another feature you might want in a SelectBox is to populate it with POJOs. GWT SuggestBox backed by DTO Model is a good blog post that shows how to do this.

Back to the Facebook Autocompleter. To demonstrate how to create this widget in GWT, I put together a simple application. You can view the demo or download it. The meat of this example is in an InputListWidget. After looking at the jQuery example, I learned the widget was a <div> with a unordered list (<ul>). It starts out looking like this:

<ul class="token-input-list-facebook">
    <li class="token-input-input-token-facebook">
        <input type="text" style="outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"/>
    </li>
</ul>

I did this in GWT using custom BulletList and ListItem widgets (contained in the download).

final BulletList list = new BulletList();
list.setStyleName("token-input-list-facebook");

final ListItem item = new ListItem();
item.setStyleName("token-input-input-token-facebook");

final TextBox itemBox = new TextBox();
itemBox.getElement().setAttribute("style", 
        "outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;");

final SuggestBox box = new SuggestBox(getSuggestions(), itemBox);
box.getElement().setId("suggestion_box");

item.add(box);
list.add(item);

After tabbing off the input, I noticed that it was removed and replaced with a <p> around the value and a <span> to show the "x" to delete it. After adding a couple items, the HTML is as follows:

<ul class="token-input-list-facebook">
    <li class="token-input-token-facebook">
        <p>What's New Scooby-Doo?</p>
        <span class="token-input-delete-token-facebook">x</span>
    </li>
    <li class="token-input-token-facebook">
        <p>Fear Factor</p>
        <span class="token-input-delete-token-facebook">x</span>
     </li>
     <li class="token-input-input-token-facebook">
         <input type="text" style="outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"/>
     </li>
</ul>

To do this, I created a deselectItem() method that triggers the DOM transformation.

private void deselectItem(final TextBox itemBox, final BulletList list) {
    if (itemBox.getValue() != null && !"".equals(itemBox.getValue().trim())) {
        /** Change to the following structure:
         * <li class="token-input-token-facebook">
         * <p>What's New Scooby-Doo?</p>
         * <span class="token-input-delete-token-facebook">x</span>
         * </li>
         */

        final ListItem displayItem = new ListItem();
        displayItem.setStyleName("token-input-token-facebook");
        Paragraph p = new Paragraph(itemBox.getValue());

        displayItem.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent clickEvent) {
                displayItem.addStyleName("token-input-selected-token-facebook");
            }
        });

        Span span = new Span("x");
        span.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent clickEvent) {
                list.remove(displayItem);
            }
        });

        displayItem.add(p);
        displayItem.add(span);
        
        list.insert(displayItem, list.getWidgetCount() - 1);
        itemBox.setValue("");
        itemBox.setFocus(true);
    }
}

This method is called after selecting a new item from the SuggestBox:

box.addSelectionHandler(new SelectionHandler() {
    public void onSelection(SelectionEvent selectionEvent) {
        deselectItem(itemBox, list);
    }
});

I also added the ability for you to type in an e-mail address manually and to delete the previous item when you backspace from the input field. Here's the handler that calls deselectItem() and allows deleting with backspace:

// this needs to be on the itemBox rather than box, or backspace will get executed twice
itemBox.addKeyDownHandler(new KeyDownHandler() {
    public void onKeyDown(KeyDownEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            // only allow manual entries with @ signs (assumed email addresses)
            if (itemBox.getValue().contains("@"))
                deselectItem(itemBox, list);
        }
        // handle backspace
        if (event.getNativeKeyCode() == KeyCodes.KEY_BACKSPACE) {
            if ("".equals(itemBox.getValue().trim())) {
                ListItem li = (ListItem) list.getWidget(list.getWidgetCount() - 2);
                Paragraph p = (Paragraph) li.getWidget(0);

                list.remove(li);
                itemBox.setFocus(true);
            }
        }
    }
});

I'm happy with the results, and grateful for the jQuery plugin's CSS. However, it still has one issue that I haven't been able to solve: I'm unable to click on a list item (to select it) and then delete it (with the backspace key). I believe this is because I'm unable to give focus to the list item. Here's the code that highlights the item and you can see the commented-out code that doesn't work.

displayItem.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent clickEvent) {
        displayItem.addStyleName("token-input-selected-token-facebook");
    }
});

/** TODO: Figure out how to select item and allow deleting with backspace key
displayItem.addKeyDownHandler(new KeyDownHandler() {
    public void onKeyDown(KeyDownEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_BACKSPACE) {
            list.remove(displayItem);
        }
    }
});
displayItem.addBlurHandler(new BlurHandler() {
    public void onBlur(BlurEvent blurEvent) {
        displayItem.removeStyleName("token-input-selected-token-facebook");
    }
});
*/

If you know of a solution to this issue, please let me know. Feel free to use this widget and improve it as you see fit. I'd love to see this as a native widget in GWT. In the meantime, here's the GWT Facebook-style Autocomplete demo and code.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

The End of the Colorado Software Summit

Matt Raible — Thu, 4 Jun 2009 14:39:20 -0600

It looks like the Colorado Software Summit has come to an end.

To Our Friends and Supporters,

In these challenging economic times, business has slowed, many companies have had to resort to layoffs and/or closures, and everyone has been tightening their belts. Unfortunately, Colorado Software Summit has not been immune to this downturn. As have so many companies and individuals, we too have experienced a severe decline in our business, and as a result we are not able to continue producing this annual conference.

This year would have been our 18th conference, and we had planned to continue through our 20th in 2011, but instead we must end it now. [Read More]

I first attended this conference in October 2005. I enjoyed it so much, I returned again in 2006, 2007 and 2008. As I mentioned last year, this was my favorite conference.

The reason I like it so much is because it's an annual gathering (this will be my 4th year) with friends and it's somewhat like a vacation, except you get to learn a lot.

While I'm sad to see it go, I completely understand Wayne and Peggy's decision. If you ever attended this conference, I encourage you to join the Colorado Software Summit LinkedIn Group. To see all my posts from the talks I attended at this conference, see my softwaresummit-tagged entries.

To Wayne and Peggy: thanks for all the great memories and for putting together such an excellent conference. Cheers to you both!

Bandwidth saved by RSScache.com

My Eye Surgery Experience

Matt Raible — Wed, 3 Jun 2009 00:46:18 -0600

On May 7, I visited my local TLC Laser Eye Center for eye surgery. I began looking into eye surgery way back in December. At that time, I wore my glasses for a week, then waltzed into my local TLC and tried to get it done the next day. I quickly found out that 1) it wasn't possible for 2 weeks and 2) I couldn't ski for a couple weeks afterward. Since we were in the midst of a great ski season, I decided to schedule it for May.

I failed the LASIK-eligibility and learned I'd have to have PRK instead. The scars on my right eyeball caused me to fail. I received these scars as a boy when a friend and I blew up a .45-70 bullet with a nail and sledgehammer. I was the one holding the nail and couldn't see for the next 3 days.

In a nutshell: with LASIK they cut a flap, lift it up and shoot the laser under it. It heals quickly and is relatively painless. PRK has been around since before LASIK. With PRK, they seem to shave your eyeball and then shoot a laser into it. PRK takes a lot longer to heal, but the results are often as good or better than LASIK. Wikipedia has a more technical PRK vs. LASIK reference.

The Procedure
My mom flew into town for my surgery and drove me to TLC's office on that Thursday morning. It took 2 hours to prep for surgery, with most of the time spent sitting around and talking to my mom. Finally, they asked her to sit in the lobby and took me back to a waiting area. When I walked in the room, there were 2 other patients with surgery gear (funny hat and booties) and masks. They were leaning back, looking at the ceiling with their masks on and eyes closed. I quickly became the 3rd person who looked like this. Right before they started putting drops in my eyes, I remember being terrified that I might never see daylight again. At the very least, I thought I wouldn't see anything but black for the next 3 days.

Right before they called me in, the previous patient walked out and muttered "Damn, that burns." Believe me, this is not what you want to hear right before it's your turn. I was led into the operating room, sat down and received numbing drops in my eyes. Less than a minute later, I was led over to the operating table.

The rest of the procedure lasted less than 5 minutes. They taped my left eye shut and told me to stare at the red light with my right eye. At this point, they used some contraption to shave my eyeball. It was slightly painful, similar to the mild pain you feel when getting a cavity drilled with Novocaine. After each stroke, the world would ripple like a pebble thrown into in a lake. After 10 strokes or so, they shot a laser into my eye for around 20 seconds. You don't actually see the laser (the red light looks the same), but you can smell your eyeball burning. Each eye only took a few minutes. My mom was able to watch the entire surgery on a television on the other side of a glass wall.

The Recovery
I was surprised to discover I was immediately able to open my eyes and see normally. Of course, my eyes felt heavy, so I didn't open them wide nor feel like I could. I was led back to the waiting room where I was given a Valium and sent home. I put my sunglasses on when we left and kept my eyes closed for the 5-minute drive home. After arriving at my house, I immediately downed some Tylenol PM and went to bed. It was hard to fall asleep and my eyes began tearing up. There was a dull pain in my eyes that kept the tears flowing for most of the afternoon. It took me 2 hours to fall asleep and I remember my eyes causing my nose to get stuffed up from all the tears.

When I woke up that evening, everything was blurry, but I was able to open my eyes and see better than I had previously w/o glasses. I didn't expect anything in the form of good vision and was mostly pre-occupied with trying to stop the pain (which wasn't terrible, but definitely present). I was prescribed Vicodin and started taking it on a regular basis. I was completely unable to watch TV at all that night. Viewing the computer screen was unthinkable.

The next morning, my vision was a lot better as evidenced by the tweet from my iPhone. Shortly after, my mom drove me to my eye doctor's office for a 1-day checkup. The results were surprising.

Friday night was one of the most painful. Saturday wasn't very painful, but my eyesight was very blurry. That afternoon, it was hard to keep my eyes open. Every time I tried to open them, I felt like I had to sneeze. Fortunately, I was able to watch the Nuggets game. I couldn't see players' numbers, but I was able to see Melo's last-second 3-pointer to win.

On Monday, I was able to drive to TLC for my 3-day checkup. Things were definitely blurry, but I didn't feel like it was dangerous for me to be behind the wheel. I was able to work on Monday, but I also had to increase my font sizes to 36pt and used a 30" monitor all day. OS X's Universal Access -> Zoom feature came in awful handy. That night, TV was a LOT clearer than the previous night, but it was still fuzzy.

What's it like now?
It's been almost 4 weeks and I'm very glad that I had the surgery done. I haven't felt any pain since the Sunday after surgery and I haven't had any issues with dryness. My vision does fluctuate from day-to-day. Some days I feel like I have super-hero vision and other days there's a halo around objects beyond 10 feet. According to my doctor, fluctuations are expected to continue for 6 months. I don't mind since it never gets bad enough to seem strange.

Now I enjoy not having to worry about glasses or contacts when traveling. I love waking up every morning and not having to do anything to improve my vision. I feel like I have more freedom in my life. Getting eye surgery is definitely one of the best things I've ever done.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

Ryan and Breanne's Wedding in Playa del Carmen

Matt Raible — Mon, 1 Jun 2009 21:53:44 -0600

Despite the warnings about Swine Flu, two weeks ago I flew to Cancun for my good friends' Ryan and Breanne's wedding. The night before leaving, I didn't get much sleep, but managed to get a good nap on the plane. We arrived in Cancun around 2:00pm and begin enjoying the beautiful weather of Mexico. We took a shuttle from CUN to the all-inclusive Paraiso Maya. Thanks to Swine Flu, we got upgraded twice and ended up paying $110/night for a place that's normally $450/night.

My two favorite parts of the trip were 1) the people and 2) the place. There was around 15 of us, many of us good friends since college. We stayed at the Paraiso Maya, which was a very nice hotel with beautiful pools, elaborate buffets and awesome beach access. We had a ton of fun at the pool bar, playing water basketball, jet skiing and playing beach volleyball. The dinners at the Steakhouses were great and The Galaxy (Star War themed) club created many good memories. It's great to travel with that many people, especially when the beer is flowing for (what seems like) free and you're partying with old friends.

My third favorite part of the trip was watching the Nuggets vs. Lakers games. We watched 3 games in the resort's "Sports Bar" and had a blast doing it. Since we had a couple Lakers' fans in the mix, it made things interesting.

We spent 3 days at the pool and on the beach before the wedding happened on Saturday. It was a very cool ceremony and enjoyed a Mariachi band for a good hour afterward. I've definitely become a big fan of beach weddings in the last 6 months.

After 5 days in Playa del Carmen, my buddy (Kevin Navarro) and I spent 2 days at The Westin in Cancun. This was a very nice resort; especially since we had an ocean-front room.

I had so much fun on this trip, I've been inspired to learn Spanish. I don't know when I'll carve out the time to do it, but I know I'll return to Mexico several times, so the sooner the better.

To see all my pictures from this trip, see my Mexico 2009 Collection on Flickr.

Bandwidth saved by RSScache.com

Life Update: New Treehouse, New Kittens and More

Matt Raible — Wed, 6 May 2009 07:19:59 -0600

It's been awhile since I wrote a life update post so here you go. After returning from Jason and Holly's Wedding in Florida, I took the next week off to "catch up on life". Having a vacation at home with no packing and lots of time to wipe my "to do" list clean was great. Not only that, but the weather was beautiful all week. If you ever get a chance to take a "catch up on life" vacation, I highly recommend it.

New Treehouse
I started out the week by doing something I've been telling the kids I'd do for the last year: building a treehouse. I used this tutorial as a guide for the "foundation" and had a lot of fun doing it. The best part was discovering my Dad had stocked my garage with many tools over the last couple years. I had to make several runs to Home Depot and Ace Hardware for building supplies, but rarely had to buy any new tools. My Dad has been a carpenter for over 30 years (he used to do it for a living in Montana). I was pleasantly surprised to discover some of his skills have rubbed off on me. We still need to build the structure on top of the platform, but everyone is happy with the results so far.

AppFuse
After finishing Phase 1 of the treehouse, I started working on the next version of AppFuse. I've made good progress so far:

Archetypes now include all the source from web modules.
Archetypes are now created using archetype:create-from-project, making things easier to maintain.
Switched Cargo from downloaded Tomcat to embedded Jetty, allowing for faster builds.
Upgraded to Struts 2.1.6 and Tapestry 5.0.18.

There's still lots of open issues, but I believe there's a lot of value in starting the "working on the next version" process. With the way things are shaping up, I'm considering bumping the version to 2.5 or 3.0 instead of 2.1. 3.0 might be a little ambitious, but there are going to be a lot of improvements.

New Kittens
Last weekend, I decided it was time to create some happy kids and get some pets in my house. On Saturday, we set out on a quest to find some kittens. We visited a couple shelters and a couple pet stores, but came home empty handed. We didn't look Sunday because we had more important things to do. On Monday, we hit up craigslist and found our kittens with a family in Thornton. Upon arrival, I figured they'd be good since the family had a 6-year old, a 4-year old and a 1-year old that was carrying a kitten around by the tail. At least their new home is slightly less chaotic than their last one.

Eye Surgery
Today is my last day wearing glasses. Tomorrow morning, I'm scheduled to receive PRK eye surgery at TLC Laser Eye Center. I'm nervous about the procedure and dreading the recovery. My mom is flying in tonight to assist me while I'm blind and in pain, so hopefully it won't be too bad. A co-worker has lots of books on tape that I'm borrowing to pass the time.

My life is showing no signs of slowing down anytime soon, but I will have lots of opportunities to relax. In two weeks, I'm heading to Cancun for a friend's wedding. Having a week on the sunny beaches of Mexico is always fun. My current contract expires a couple days after my return. I'm currently negotiating with a few potential clients and hope to have my summer work plans solidified before leaving for Mexico. More than anything, I'm looking forward to taking the entire month of July off and spending it at our cabin in Montana. My Dad is moving up there to work on The New Cabin and there's nothing I'd rather do than help him out.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

Ajax Framework Analysis Results

Matt Raible — Thu, 23 Apr 2009 20:34:44 -0600

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:

Choose a short list of frameworks to prototype with.
Create an application prototype with each framework.
Document findings and create a matrix with important criteria.
Create presentation to summarize document.
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.

Bandwidth saved by RSScache.com

Jason and Holly's Wedding was a blast!

Matt Raible — Tue, 21 Apr 2009 09:53:54 -0600

This past weekend, I experienced an incredible 4 days in West Palm Beach, Florida. When Julie and I got married there in April 2000, we had so much fun that we always wanted to do it again. We had a lot of good friends and family fly in for the wedding. If you've ever experienced a beach holiday with many good friends, you'll know what I'm talking about. Julie is Holly's sister and Jason (her new husband) is one of my fraternity brothers. That means I knew both sides of the wedding party and it very much resembled the reunion we always wanted.

I flew down on Thursday morning after a little bit of oversleeping. Because I flew into Orlando, I had to rent a car and drive 2 hours to West Palm. This wasn't so bad since I got hooked up with a convertible and it was a beautiful 80°F on the drive. That night, I picked up Abbie and Jack from "Grammy's" house and they spent the night with me in my hotel.

The next morning, we woke up and headed to Sailfish for a ride on a friend's boat. After a couple hours on the intercostal, we played in the pool, enjoyed the sun and started getting ready for the Rehearsal Dinner.

During the Rehearsal Dinner, a friend (Navarro) and I were bartenders while Abbie was in charge of making sure everyone's drinks were full. Below are some of my favorite pictures from Friday night.

After the rehearsal dinner, the party crowd headed to Rum Bar and had lots of laughs and played many games of "hook". On the wedding day (Saturday), we took another boat ride, hung out on the beach and enjoyed a beautiful ceremony on the beach.

The rest of the night was spent dancing and enjoying everyone's company. The party didn't end that night though. Sunday, Holly and Julie's mom had a brunch at her house where we all laid by the pool, played with the kids and sipped on many cold drinks. At sunset, we walked down to the beach so Mr. and Mrs. Harris could get some sand from their ceremony location.

It was a spectacular weekend with lots of good friends and a ton of great memories. Congratulations Jason and Holly!

For more pictures, see Flickr or Facebook.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

My Drunk on Software Interview

Matt Raible — Sun, 5 Apr 2009 22:23:57 -0600

Back in February, I met up with James Ward and Jon Rose for a Drunk on Software interview. We enjoyed some good beer and had a great conversation about SOFEA, open source and RIA. See larger video here.

Bandwidth saved by RSScache.com

Congratulations on Retiring Dad!

Matt Raible — Tue, 31 Mar 2009 16:46:47 -0600

Today is a very special day in my Dad's life. Today is his last day of work. Within the next hour, Joseph Edward Raible, Jr. will officially become retired and subsequently one of the happiest people I know. My dad has always had an interesting relationship with work. I've never met someone who hated working for The Man more, yet had such a strong work ethic.

Growing up in Montana, my dad always had the shittiest jobs. When I was a toddler, he used to walk several miles to work, often during the cruel Montana winters. As I got older, I remember him working as a carpenter, logger, trail crew specialist, firefighter, radio technician and even a programmer. The reason his jobs were so shitty is because he told us they were. I don't think he made over $5/hour until I was in the second grade.

He was able to turn his career around in impressive fashion in the early 90s. He'd always been a "computer guy" at the cabin. He even went to Graduate School for his Masters in Computer Science. When we moved to Oregon, he volunteered at my mom's new office as a Network Administrator. After 6 months, they hired him and he quickly moved up the ranks. I believe his current title is something fancy like Director of Wireless Communications. Over the last 19 years, he's worked for the BLM and done amazing things like setup radio networks in Honduras and Tanzania. He's turned into quite the world traveler.

The thing I remember the most is his perseverance. One winter when he couldn't find work, he built a barn. From scratch, mostly by himself.

The other thing I remember well is how much he complained about work. It was never the actual work that he complained about, it was the "stupid fuckin' idiots" that he had to work with (or for). This is the reason that this is such a special day. I can't help but think a huge weight is being lifted from his shoulders and he's going to much happier. Then again, you know how these things go - he might actually miss having people around to complain about.

One thing's for sure, I'm super pumped and happy for the guy. He plans on moving back to Montana for the summer to work on the New Cabin and it's likely I'll get to spend a lot more time with him in the coming years.

Congratulations and cheers to you Dad. You did it. I'm extremely proud of you today.

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com

New Office and New Bike

Matt Raible — Mon, 30 Mar 2009 23:51:39 -0600

Back in January, I moved into a new office to work on my current project. The following week, my bike was stolen. The next day I ran to work and decided to do it for a couple months.

My current goal is to run until April 1st or until I lose 20 pounds, whichever comes first.

The next week, my co-worker's bike was stolen and I knew I had to stick with my goal. The significance of April 1st was that our office lease expires on April 1st and we were planning on moving to a new office. While our office is nice, it is a large one-room office with no windows. The previous office was quite a bit cooler, but also cost twice as much.

A couple of weeks ago, we found a nice office near downtown. I signed a 1-year lease and moved in over the weekend. For folks in Denver, you might recognize the nice location.

I did my final run to work last Thursday, in the midst the Blizzard of 2009. While running to work was a great experiment and I enjoyed telling people I was doing it, it wasn't fun. I've been riding my bike to work for many years (first year was 1999). The one thing I've always enjoyed was the thrill of the ride in the morning. On a beautiful spring day, it's really a fantastic experience. It's easily been the best part of any job I've ever had.

With the new office secured and the running mission completed, I walked over to my favorite bike shop and picked up a Trek FX 7.5 yesterday. To research and figure out which bike to buy, I asked my network on LinkedIn.

As luck would have it, my first ride to the new office was today and we woke up to a morning snow storm. Even though the ride was cold and wet, I still had a blast. I've enjoyed riding since I traversed the hills on a BMX bike back in Montana. Getting back in the saddle today was simply awesome and I can't wait to ride again tomorrow, regardless of the weather. I know those nice spring days are just around the corner.

Bandwidth saved by RSScache.com

Optimizing a GWT Application with Multiple EntryPoints

Matt Raible — Wed, 25 Mar 2009 16:00:37 -0600

Building a GWT application is an easy way for Java Developers to write Ajax applications. However, it can be difficult to release a GWT application to production before it's finished. One of the most important things I've learned in Software Development is to get a new application into production as soon as possible. Not only does getting it from dev → qa → prod verify your process works, it also can do a lot to test the viability of the new application.

One of the biggest issues with GWT applications is size. The project I'm working on compiles Java to JavaScript and creates ~570K *.cache.html files (one for each modern browser). These files end up being around 180K gzipped. I believe this is an OK size for an entire application. However, if you're going to release early, release often with GWT, chances are you'll just want to release one feature at a time.

When the first feature was completed on my project, the *.cache.html files were around 300K. Rather than using branches to release to QA and UAT, bug fixes and new features were developed on trunk. Unfortunately, the QA and UAT process took several weeks longer than expected so by the time the feature was ready to release, the *.cache.html files had grown to around ~570K. The reason the file had grown so much was because it included all of the other features.

Earlier this week, while running to a dentist appointment, I thought of a solution to this problem. The basic idea was to optimize the compilation process so only the to-be-released feature was included. Even better, the solution didn't require more modularization. The results:

Before: *.cache.html -> 569K, gzipped 175K
After: *.cache.html -> 314K, gzipped 100K

According to my calculations, that's a 56% reduction in size. How did I do it?

Created a new FeatureName.java EntryPoint with only the to-be-released features imported.
Created a new FeatureName.gwt.xml that references the new EntryPoint.
Copied old (kitchen-sink) EntryPoint.html to FeatureName.html and changed the reference to the nocache.js file.
Created a Maven profile that allows using -PFeatureName to build a FeatureName-only module.

One downside to doing things this way is it's possible to create a WAR that has the same name and different features. Surely the Maven Overlords would frown upon this. Since this is just a temporary solution to release features incrementally, I'm not too worried about it. A possible workaround is to create different WAR names when a feature's profile is activated. I believe the true "Maven way" would be to make the "kitchen sink" application into a JAR and have several WAR modules with the different EntryPoints. Seems a bit complicated to me.

Other than this Maven publishing issue, the only other issue I can foresee is keeping the two EntryPoints and HTML files in synch. Then again, the separate files allow a feature to be customized for the release and can be deleted when its no longer needed.

What do you think? Do you know of a better way to compile a GWT application so it only contains certain features?

nimbb.com Webcam video recording in your browser!

Bandwidth saved by RSScache.com