if basic, sample GWT app takes 30sec to load in br

Question

I have a decent machine capable of running 64 bit Windows 7. So how come any time I stop a small sample GWT app in "development mode", edit it and restart it it takes 30 sec to become responsive in the browser, both in latest Firefox and latest Chrome?

Is that sort of molasses-based edit-compile cycle just the normal, expected thing for GWT developers nowadays?

Will it get much worse for more realistic apps or is the whole of those 30 sec just the framework overhead, and my own code would not make it much more bloated than that any time soon?

Can this problem be alleviated by using some other "mode" or by whatever other tweak solution?

Do Google people have much faster machines than I do on which this is less of a pain or do they suffer like the rest of us?

Answer 1

I guess my answer is in the form of a question, "Are you sure you're really needing to restart at all?"

Assuming you're running it hosted within the browser (which it sounds like you are) then most changes are "hot" almost as soon as you've finished them. I spent yesterday doing all kinds of changes to the main code file in a module and didn't have to restart the server for any of them.

I often had to reload the page within the browser to see the changes, but that's a different issue.

Answer 2

In GWT development mode every time you reload a page the dev server recompiles the GWT app's source. This enables you to just do some changes to your GWT code and just reload the page in browser to see the changes - no need to restart the dev mode server.

When you deploy your app on production server you deploy already compiled javascript files. So the delay you will see will be time to load those pages.

Answer 3

During development, a GWT application can be run in different modes, and there's often a bit of confusion about when it's necessary to

• restart the server,
• reload the server,
• refresh the browser,
• or just click somewhere in the web page.

Let's take a step back and look at all the differences between Development mode/Production mode on the one hand, and "With Debugger"/"Without Debugger" on the other hand. Of course, everybody using GWT has already heard of them...

Mode

Development mode

Runs the client side with a special browser plugin that attaches to a code server. You can always identify this mode easily by looking at the URL - it will contain something like ?gwt.codesvr=127.0.0.1:9997

The main advantage of Development mode is, that it doesn't require you to compile your code to JavaScript first - it runs the client side as Java bytecode in the code server. This is basically a JavaScript emulation - but it's so close, that most people don't notice the difference anymore (some even believe, that GWT compiles Java to JavaScript in Development mode, which is not the case.)

Since the code is run as Java bytecode, this mode also allows you to attach a debugger for the client side code, as we will see a little bit below (but you don't have to!)

Production mode

Runs the client side as compiled JavaScript. Before you can use it, you have to use the GWT Java to JavaScript compiler first (often known as gwtc, or "the one with the icon")

After it's finished (takes a while!) just start the GWT embedded server like in development mode, but this time remove the ?gwt.codesvr=127.0.0.1:9997 from your URL. (Alternatively, you can deploy the war to a separate server (e.g. Tomcat), and run it from there.)

The advantage here is, that a) you can test the real compiled result, and b) that browser refresh is very much faster than in Development mode.

Launching

"Without Debugger"

You can simply run the application without attaching a debugger (that's possible both in Development and Production mode). Use "Run As...", if you use Eclipse.

In Development mode, this means that you run a web server (embedded Jetty, usually on port 8888) and a code server (usually port 9997). In Production mode, you don't need the code server.

If you have client side changes, they will be reloaded when you refresh the browser. This is relatively fast - you don't have to restart the (code) server. But it's not as immediate as with a Debugger.

If you have server side changes, you will have to do a server web application reload (in Eclipse, you use the small yellow reload icon in the Development view) This is much faster than a full server restart, but once again, it's not as immediate as with a Debugger!

"With Debugger"

Both in Development and Production mode, you can run the application with an attached debugger. Use "Debug As...", if you use Eclipse.

For Development mode, the debugger attaches both to the client and the server side of the code - whereas in Production mode, it can only attach to the server side!

If you have client side changes with an attached debugger, code changes will take effect immediately, so all you have to do is to click somewhere in your web page that causes the code to run.

If you have server side changes with an attached debugger, likewise, code changes will take effect immediately, so all you have to do is to perform some action that causes the corresponding server call.

All of this is extremely fast, but the drawback is, that Java debuggers can cope only with certain kinds of code changes. If you have more severe changes, the debugger will exit, and you'll have to restart the server _{(I'm still looking for a way to just reload and reattach in this case - I think it should be possible, but does anyone already have a working solution?)}

Also, with debuggers, you'll have to be careful with the state of your application. Remember, that the changes to your code won't re-evaluate the existing state!

---

So you basically have four combinations

• Development mode without Debugger
  • Client change: Use browser refresh (medium)
  • Server change: Reload server (fast)
• Development mode with Debugger
  • Client change/server change: Just click on the web page (very fast). Restart server, if this fails (very slow).
• Production mode without Debugger
  • Client change: Recompile, then refresh browser (very slow)
  • Server change: reload server (fast)
• Production mode with Debugger (for the server side)
  • Client change: Recompile, then refresh browser (very slow)
  • Server change: Just click on the web page to cause a new server call (very fast). Restart server, if this fails (very slow).

Additional differences:

• A simple browser refresh in Production mode is much faster than in Development mode.
• GWT-RPC in Production mode is much faster than in Development mode.

Each combination has its own benefits and drawbacks for development speed and convenience. I like to use all of them, depending on the situation.

---

This post has become a bit long, but I have seen lots of questions around this topic, and I wanted to write it all down in one place. Thanks for reading :-)