Getting started with GWT

Google Web Toolkit (GWT) is a useful development framework intended for building complex javascript applications. It’s used fairly heavily in Google products, and if you’ve used different Google services in the past, it’s likely that at least a few were built using GWT.

One of the interesting things about GWT is that it allows you to build your web application in Java. This has its pluses and minus, but generally this means that you can you reap all the benefits of a language with a developed tool chain (ie Eclipse). This may not seem like much for a small project (and might even be overkill), but for complex projects it can be extremely useful. It makes it easier to build, maintain, refactor, and test your product – which can become tricky when working with a big js code base.

To bridge the world of Java and Javascript, GWT uses a compiler. Your Java application is compiled into minified and obfuscated javascript files. To handle cross browser compatibility, GWT generates multiple “permutations” of your compiled application: one version for each for each browser. When your application is loaded in a web browser, GWT is able to detect the user’s current browser and load the right one for you.

With me so far? Want to give GWT a whril? Heres a few steps to get you started with a development environment. For the most part, these are just streamlined instructions from GWT’s Getting Started documentation. I prefer working with Eclipse, so these steps will show you how to get setup with it.

1.) Download Eclipse
If you don’t have Eclipse installed yet, head on over to the Eclipse Download page. As of this writing I’m using Eclipse 3.7 for Java Developers.

2.) Download and Install the GWT SDK + Plugin within Eclipse
Once Eclipse is setup, your next step is to download and install the GWT SDK. You can do this entirely within Eclipse using their “Install new Software” dialog.

Click Help –> Install new Software

Next, enter the site that matches your version of Eclipse.

(Indigo) http://dl.google.com/eclipse/plugin/3.7
(Helios) http://dl.google.com/eclipse/plugin/3.6
(Galileo) http://dl.google.com/eclipse/plugin/3.5

Next, place checks next to “Google Plugin for Eclipse”, and the “Google Web Toolkit SDK” (You can download the others if you want – they can be useful if you intend to deploy your application to App Engine, but aren’t strictly needed)

Click Next and Finish the installation wizard. It will take a few minutes while Eclipse downloads the SDK and installs it. At the end, Eclipse will restart to finish the installation.

3.) Create an Empty GWT Project

Now that your environment is setup, it’s time to create a simply GWT application. In Eclipse, click on File –> New –> Web Application Project

In the new dialog uncheck “Use Google App Engine”, and check “Generate project sample code”.

With that, Eclipse should auto-generate a bare-bones GWT application for you. One thing to note is that it puts the sample code into 3 main packages:

client: All your gwt application code goes here. Everything here will be compiled to javascript.

server: This is server side code that may handle ajax requests from your application via gwt rpc. For example, if your application were to communicate with a backend to get data through a database, it would call a service you program here. This is pure java code and isn’t intended to be compiled into javascript. Keep in mind that you are not required to use gwt rpc or program a service here. You can just as easily have a server written in PHP and have your gwt application communicate via JSON (or not have any backend at all)

shared: This is intended for shared classes between the server and client. These classes will be available in your server side code AND will be compiled into javascript. This is where you would put classes and interfaces for objects that you are sending via gwt rpc.

4.) Run your application in Development Mode
When eclipse created your project, it should have setup a default run and debug configuration for you. To kick off your application, try run –> project_name

 

In a second or so, you should see “Development Mode” tab appear with a link that you can use to view your application in a browser. Go ahead and hit the link and you should see the application popup in your browser (you may be prompted to install a GWT development plugin first)

Protip: I recommend using Firefox here – the GWT plugin performs ~2x faster in Firefox than in Chrome due to the way the extension APIs are built for each.

 

Whats going on here? For development purposes GWT uses something special called “hosted mode“. Basically, during development GWT doesn’t bother fully compiling your java into javascript. Instead – it talks with your browser via a special plugin and creates the javascript on demand.

Why is this important? Basically it means you can change any of your java code in your client, save, hit refresh, and see the changes instantly in your browser. Just like when working with regular javascript and HTML.

In the early days of GWT you used to need to re-compile the application every time you wanted to see your changes. Theres no need to do that now – it just wastes precious time when your developing your application.

5.) Compile your Application
Ready for others to see your application? Since others won’t have hosted mode, you’ll need to actually compile everything into plain-ol’-javascript and HTML first. To do that:

Right Click on your project –> Google –> GWT Compile

Within the new dialog, simply click “Compile”

 

You’ll see GWT work while a while while it does it’s magic: obfuscating, minimizing, prunning dead code… (aren’t you glad you weren’t running this every time you wanted to see a change?)

When done, you’ll see it output your completed compiled project in your war/ folder. Want to runthe finished product? Just open the root .html file in any browser. When it’s time to deploy, simply upload your .html and project/ folder to your web server.

 

Next Steps?
Now that you have a bare-bones GWT development environment setup, you’re free to start building away!

Not sure how to start? Google has some decent documentation, though it can be sometimes be a bit daunting for a beginner.  If you want something easier – I’m planning on adding some more tutorials on programming in GWT here. Feel free to add a ping in the comment section if interested!

This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

Comments are closed.