0

I'm new to GWT and am having a difficult time understanding the fundamental differences between a Module and a ClientBundle. Both seem to be one in the same thing in some areas of the GWT documentation, whereas in other areas it is clear that they are not the same.

My understanding is that a Module is the client-side code that gets deployed to your user's browsers. This is a ZIP file containing HTML, CSS and JS.

My understanding is that a ClientBundle is similar to a Module, but that it only contains static resources such as images.

If these understandings are correct, then why the need to distinguish between the two? Aren't HTML/CSS/JS static resources as well?!? And if I'm way off-base, please help me understand what the differences are, and perhaps provide a concrete example of each and when it is appropriate to use each. Thanks in advance!

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
IAmYourFaja
  • 55,468
  • 181
  • 466
  • 756

1 Answers1

5

You've got the right idea about a Module - it describes (on the development side) the java source paths to use, the entrypoint(s) to start the compile from, and various properties (browsers, locales) to use when compiling. After compiling, the module represents the output as well - the javascript and any associated other compiled files, be they logs, images, stylesheets, etc.

In contrast, ClientBundle is one of the ways that a developer can tell the compiler that certain resources in the java source path will be used after compiling. CssResource comes with additional checks that css style names are used (and if not, they should be removed to minimize the compiled output), ImageResource makes sure the file exists when compiled, and both output these files in the best optimized way for each browser. Images for most browsers are actually included in the massive JS file to minimize the number of calls to the server, and for those that don't support this, they are automatically sprite'd together.

By declaring a ClientBundle interface and invoking GWT.create(MyClientBundle.class), you are asking the compiler to deal with the ClientBundle specifics of making those referenced files and classes available in your app. How it does that has to do with GWT Generators, a much more advanced topic than can be addressed in a SO answer...

Yes, ClientBundles describe static resources that are needed by the running app, and yes, a compiled module consists of various static resource, but I would rephrase your understanding to put it this way: ClientBundle is one of the ways that static content can be included in a GWT Module in such a way as to make it load as efficiently as possible.

Colin Alworth
  • 17,801
  • 2
  • 26
  • 39
  • Thanks @Colin Alworth for an awesome answer (+1) - however I am still not *quite* seeing the "forest through the trees" here...perhaps sticking with your example of `CssResource` or `ImageResource`, can you please show me a directory structure including both a module and one of these ClientBundles inside the same project, and relate them to the final output that gets sent back to the client browser? Thanks again! – IAmYourFaja Aug 22 '12 at 16:33
  • 1
    The structure is pretty easy - declare the CssResource subinterface, then make a ClientBundle type in the same package as a bunch of images and css files, with @Source annotations mapping ClientBundle methods to files. Output is harder, since especially for images it varies by browser, but CSS is always baked into the final compiled JS itself, and only injected when needed. I like https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle as a discussion of how to use it as well as some examples - if this isn't clear enough, I'll amend the answer. – Colin Alworth Aug 22 '12 at 20:36