Thursday, July 5, 2012

mgwt & super dev mode

This post is part of a series of blogposts that show the usage of  some mgwt / gwt-phonegap components.

GWT Super Dev Mode is a very nice way of seeing your changes on a mobile device very quickly.

Unfortunately it`s not that easy to use with a mobile browser. This is why I built a direct support for it into mgwt.

The basic idea:

The GWT Super Dev Mode consists of a so called code server which skips many of the standard GWT optimizations and thus is able to produce Javascript from Java very fast. You can run it alongside your nomal GWT Dev Mode. On browsers that support source maps you can even do Java debugging in their Javascript Debugger.

Right now the support in mgwt is considered experimental, because I might change some bits based on your feedback.

Setting it up:

Requirements


  • GWT 2.5 rc1 (or later) from here
  • latest mgwt trunk (1.1.2-SNAPSHOT) from here

Configure SDK in Eclipse

Go to Prefrences -> Google -> Web Toolkit. Click on the add button and browse to the GWT 2.5 installation directory:





After adding the SDK, make it your default SDK. You list should look something like this:





Setting up your gwt.xml file & Entrypoint

In your gwt.xml file you need to add the following lines:




<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<set-configuration-property name="mgwt.superdevmode" value="on" />

If you want to run your GWT CodeServer from a different host or port you also need to add:

<set-configuration-property name="mgwt.superdevmode_host" value="http://<yourhost>:<port>" />

In your Entrypoint you will have to add the following line, which will compile out if you turn off mgwt.superdevmode:


SuperDevModeUtil.showDevMode();

Setting up your Run Configuration to start Super Dev Mode

Inside Eclipse you need to create a Java Run Configuration. Go to your Run Configurations, select Java and press New:




On the first tab (Main) you can set a decent name and the project to use.
The main class you need to start is: com.google.gwt.dev.codeserver.CodeServer






In the arguments we need to pass a bindAddress as you know from a normal GWT dev mode, since with mobile devices we will not use it locally. Also we need to specify the Module to use. In my case it looks like this:
(Programm Arguments)
-bindAddress 0.0.0.0 com.googlecode.mgwt.examples.showcase.Showcase

In the VM Arguments make sure to give it some RAM, something along the lines of:
-Xmx1024m








In the class path tab you will need to add the gwt-codeserver.jar which you will find in your gwt installation directory and you will also need to add all folders with source code to the project. (The Codeserver operates on Java files)

You can add a folder by selecting User Entries, click on Advanced -> Add Folder and select the source folder of your project.






My classpath looks like this:





Now you can just start the code server. It will take some time but at the end it should print something like this:

The code server is ready.
Next, visit: http://:9876/





Compile your mgwt app once with the normal compiler

Now you need to compile your gwt module once the normal way and open it with your mobile phone / tablet. This is your normal gwt app that runs on the jetty server (http://yourpost:8888 by default) You should see something like:




If you click "Super Dev Mode On" you will see this:

Now you can hit compile, which will compile the app and reload the page:

Important: Super Dev Mode saves its state (turned on) inside session storage. So if you want to see the normal compiled app, you will need to hit "Super Dev Mode Off".



Round up

With this integration of Super Dev Mode into mgwt it will be much easier to test features on a device. I am seeing compile times less than 4s for many of my projects, which is a major improvement.
I am looking for feedback on this one. If you have some good suggestions on how to improve this, please let me know!






9 comments:

  1. Hi Daniel

    I got always "Can't find any GWT Modules on this page."

    Any suggestion to solve this problem?

    ReplyDelete
  2. lets discuss such issues on the mgwt mailing list: https://groups.google.com/group/mgwt

    we can`t post code here easily...

    ReplyDelete
  3. I got it running and I like thats its compiling in 7 seconds and only the one permutation it needs :)

    But what are the advantages right now? Do you use it already in your production environment, because either I am doing it wrong or debugging is back to logging in SuperDeathMode...?

    ReplyDelete
  4. your development will be inside your desktop browser using dev mode. (chrome or safari)

    only if you have a bug on device (lets say with styling) you will use this right now, but we are pushing hard for source maps support in iOS and android and they will be available at some point.
    If we have them we can easily debug this right away on the phone.

    btw: the 7 seconds are way to slow (compared to other projects). mgwt seems to trigger some weirdness in super dev mode, this is why it is so slow ...

    ReplyDelete
  5. nevermind my mindless comment, I just understood the power of sourcemaps and learned about watching expressions and breakpoints in Chromes Debugger.
    For my team it is more stable to debug right now in SDP, even in desktop browser, because the GWT Browser plugin seems to be unstable for us.

    compilation time averages now around 5,5 sec. ;)

    thanks!

    ReplyDelete
  6. I use the SuperDevMode on Phones and Tablets and it works very good. This is very powerful and have much advantages.
    At the moment this mode create one permutation on Browser. But on Android or IPhone APPs creates more permutations. I must look why this is so.

    ReplyDelete
  7. If you run the configuration and get the following kind of errors:

    WARN::failed org.mortbay.jetty.nio.SelectChannelConnector@...
    java.lang.NoSuchMethodError: org.mortbay.thread.Timeout.(Ljava/lang/Object;)V
    .....

    make sure that the GWT jar is refererenced ahead of the appengine jar in the build path (.classpath file)

    ReplyDelete
  8. Your article is very good and useful, thank you very much for this content. : usefull site

    ReplyDelete