Sencha Inc. | HTML5 Apps

Blog

Getting Started with GWT Super Dev Mode

July 23, 2014 | Brandon Donnelson and Colin Alworth

Super Dev ModeIf you’ve been using GWT in the last few months, you’ve undoubtedly noticed that various browsers have been removing support for classic Dev Mode. This change has been a long time coming. It helps to ensure better performing browsers and plugins, but puts a kink in debugging GWT applications. The future is in Super Dev Mode, so we’ve been testing it regularly, making sure that GXT applications will work correctly in it, and improving the development process.

As of GWT 2.6.1, supported by GXT 3.1, Super Dev Mode works in all browsers on all operating systems. The next version of GWT will continue to streamline the development workflow, but until it gets here, we’ve been working on the Eclipse plugin to streamline getting Super Dev Mode running in your project.

Any project that uses Super Dev Mode must use a linker that supports it. Most projects use the default linker, and up until GWT 2.6.1, that is the ‘std’ linker, which loads the content of the application in an iframe. As of GWT 2.7, this default will change to xsiframe, but for now, we must modify our application to use it:

 
<!-- project.gwt.xml - enables SDM -->
<add-linker name="xsiframe"/>
 

Using Super Dev Mode or SDM means running two servers, one for the web application and one for the Code Server that compiles classes for SDM when the compile button is pushed on the web page or in the bookmark. So in the future, classic Dev Mode is being modified to include a
-superDevMode argument to start the SDM Code Server for SDM debugging. This means having classic Dev Mode arguments but with SDM debugging all in one launch configuration package. To back port this feature in Google Plugin for Eclipse, a legacy jar is being added and used to override current Dev Mode bootstrapping to provide a seamless transition to the SDM experience.

Start by right clicking on a project and running the “Web Application (GWT SDM)” shortcut, which will create a new launch configuration.

Super Dev Mode

This produces a Development Mode tab that contains a quick link to load the browser for debugging.

Super Dev Mode

Once the browser initializes, it will start the first Super Dev Mode compiling.

Super Dev Mode

While the Code Server provides bookmarks for “Dev Mode on”, “Dev Mode off” and “Compile”, there is a new compile button overlayed on the application that can conveniently compile the application after a change. It’s found in the lower right hand corner of the App. This will recompile and reload the application, and the output can be viewed in Eclipse console.

Super Dev Mode

Changing around launch configuration is done by editing the application launch configuration. Both “Super Development Mode” or “Classic Development Mode“ can be used to debug the application, although Classic Dev Mode will have to use the older browsers.

Super Dev Mode

At this point, you can make changes to your application code and see them in the browser by clicking the “GWT” compile button again. You can also simply refresh the page to reload it without recompiling — handy for testing the app when you aren’t actively making code changes.

Check out this screencast demonstrating the steps above:

At the time this article was written, this new addition to the plugin hadn’t yet shipped, but it will be going out soon. The improvements will make it easier to get started with Super Dev Mode in 2.5.x to 2.6.x+ and streamlines the transition to Super Dev Mode. GWT 2.7 also has more changes to enhance the performance and development experience as well.

Written by Brandon Donnelson and Colin Alworth
Brandon is a member of the Sencha GXT team and enjoys interacting with the GWT community. His passion is helping developers get their jobs done. He has development experience in Java, Eclipse Plugin, IDEA Plugin, GWT, Cloud, Sencha GXT and more.

Colin is a member of the Sencha GXT team and has worked in the community for a number of years. He has experience in JavaScript, GWT and Sencha GXT.

Share this post:
Leave a reply

There are 18 responses. Add yours.

Dave

5 months ago

The last time I tried I could not get SuperDev Mode to work correctly.  Thanks for this article but it doesn’t help me much as I don’t use Eclipse.  Can you show an example using just Maven and/or Maven with IntelliJ?

Colin Alworth

5 months ago

@Dave IntelliJ 13 already has some built-in support for SDM, though it isn’t yet quite as smooth as this. There is a checkbox in the Dev Mode run config dialog that you can activate to run Super Dev Mode, but it does not start a webserver for your app. That’s the principle new thing that we’re talking about introducing here - hopefully we can work with the folks at JetBrains to get this into the next version of IntelliJ IDEA as well.

With just Maven it should be pretty easy: mvn gwt:run-codeserver seems to work in all cases I’ve tried so far. Again, this won’t start a webserver for your actual app, you need to do that on your own.

Gary

5 months ago

In the last paragraph, you mention that the new feature hasn’t shipped yet. Do you mean just the refresh button feature? Should I be able to follow most of this instruction now?

Dave

5 months ago

Colin, it would be great if you could show the equivalent documentation for IntelliJ 13 (although maybe not as smooth as desired).  Until then to get around this problem I’ve installed Firefox 24.2 from the ESR update channel…which does support the ‘legacy’ DevMode debugging approach.

Colin Alworth

5 months ago

@Gary, that’s correct, this is a work in progress. There are two fronts we’re working on - Manolo Carrasco MoƱino is making SDM part of the DevMode main class to run the jetty webserver and adding the new refresh button (see https://gwt-review.googlesource.com/#/c/8150/). He has helped us to backport these changes to 2.5.1, 2.6.0, and 2.6.1, and Brandon incorporated it into the Google Plugin for Eclipse (GPE) changes above. We are now awaiting the GPE changes to be merged and shipped - we’d hoped this would be ready sooner, but wanted to go ahead with posting this article to hopefully start more discussion and see what people are thinking so far.

@Dave check out http://stackoverflow.com/questions/23841301/how-to-get-gwt-super-dev-mode-to-work-with-intellij for some basic steps and http://youtrack.jetbrains.com/issue/IDEA-120310 for a bug that was fixed to get it to work with GWT 2.6.x.

Gary

5 months ago

@Colin and @Dave, thank you very much for your hard work and communication. It is greatly appreciated.

Gary

5 months ago

Meant to say @Colin and @Brandon.

Matic Petek

5 months ago

Really thank you for great work! I hope now I will convince my coworker to start using SDM. Feature will probably also work with GXT 2.3.1a?
Regards,
  Matic

Oleg Cohen

5 months ago

Thank you for the info!

It wasn’t entirely clear from the post on how you got the SDM functionality into the Eclipse Plugin.

Would appreciate any info.

Thanks,
Oleg

Colin Alworth

5 months ago

@Matic: Thanks! Yes, we tested SDM itself with GXT 2.3.1a and found it to work - by the same token GXT 2.3.1 and GWT 2.5.1 should also work with SDM. Latest GXT 3 also works with it without any difficulty.

@Oleg - Brandon has been working for some weeks on modifying the Eclipse plugin to add this functionality. We’re in the process of working with the GPE team to get this merged and released - the blog post went out now to show what we had done so far, to get people excited about getting ready to try it, and to see if they had any feedback on the screenshots and video. I’ll certainly update these comments if we put together a beta version of the plugin to try, but we’re somewhat tied to the GPE team at Google to finish this work.

Fabien Cortina

5 months ago

I know it’s more a complain for GWT, but how about debugging inside the IDE?

Oleg Cohen

5 months ago

Thank you for the info, Colin. I am definitely excited and ready to try grin

Looking forward to the release!

Colin Alworth

5 months ago

@Fabien - check out the sdbg project, intended to bring JS+SourceMap debugging to Eclipse. Specifically written for GWT, based on earlier work intended for Dart, and should work for any sourcemap based project. I’d love to see it somehow getting along with the GWT debugging tools, but I don’t yet know of any efforts to make that happen. Note that it uses Chrome’s remote debugger APIs, so isn’t presently compatible with other browsers. http://sdbg.github.io/

See also http://remotedebug.org/ Somed.ay the JS world will have the tools that Java devs were used to a decade ago wink.

Matic

4 months ago

Yesterday was GPE update… sorry, no SDM yet…..

Brandon Donnelson

4 months ago

The SDM changes are in the pipeline and we will update folks when we start to see things move.

Gary E

3 months ago

Any movement on this? Looking forward to using it.

Colin Alworth

3 months ago

So are we! GPE just released an update with Luna, we got access to that code and have been updating the patch accordingly, and we’re again going through the code review process. Taking longer than we’d like, but we’ll get there!

Matic Petek

3 months ago

Why bother waiting for GPE update. Is not this the some as “Backporting faster SDM GWT < 2.7 backport” that you descripe on http://docs.sencha.com/gxt/3.1/getting_started/sdm/SuperDevMode_Eclipse.html page?
I’m using it now for week or two and it works great?.
P.S : thank you Colin for good documentation.
Regards,
  Matic

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.