gwtgwt-material-design

GWT Google Material Design out of memory


I created a wesbite with GWT 2.8.1 and try to use GMT. I followed Getting Started from the GMT demo website but without using the archetype. This is my pom:

<?xml version="1.0" encoding="UTF-8"?>
<project
    xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
    http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>
<groupId>de.sample.sampleproject</groupId>
<artifactId>gwt-project</artifactId>
<packaging>war</packaging>
<version>1.0</version>
<name>Maven Archetype for GWT</name>

<properties>
    <gwtVersion>2.8.1</gwtVersion>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt</artifactId>
            <version>${gwtVersion}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <dependency>
        <groupId>com.google.gwt</groupId>
        <artifactId>gwt-servlet</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>com.google.gwt</groupId>
        <artifactId>gwt-user</artifactId>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>com.google.gwt</groupId>
        <artifactId>gwt-dev</artifactId>
        <scope>provided</scope>
    </dependency>

    <dependency>
        <groupId>com.github.gwtmaterialdesign</groupId>
        <artifactId>gwt-material</artifactId>
        <version>2.0-rc5</version>
    </dependency>

    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.11</version>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/classes</outputDirectory>
    <finalName>gwt-project</finalName>

    <plugins>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>gwt-maven-plugin</artifactId>
            <version>${gwtVersion}</version>
            <executions>
                <execution>
                    <goals>
                        <goal>compile</goal>
                        <goal>test</goal>
                        <goal>generateAsync</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <extraJvmArgs>-Djava.io.tmpdir=${project.build.directory}\tmp</extraJvmArgs>
                <runTarget>SampleModule.html</runTarget>
                <modules>
                    <module>de.sample.sampleproject.SampleModule</module>
                </modules>
                <copyWebapp>true</copyWebapp>
            </configuration>
        </plugin>
    </plugins>
</build>

and this is my .gwt.xml:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='SampleModule'>
    <inherits name='com.google.gwt.user.User'/>

    <!--<inherits name='com.google.gwt.user.theme.standard.Standard'/>-->
    <inherits name="gwt.material.design.GwtMaterialDesign"/>

    <entry-point class='de.sample.sampleproject.client.SampleModule'/>
    <source path='client'/>
    <source path='shared'/>
</module>

If I run this and start the browser (Opera in my case, but tried FF and Edge too), it runs into an out of memory. If I inherit com.google.gwt.user.theme.standard.Standard instead of gwt.material.design.GwtMaterialDesign, the app runs fine.

I compared my pom with the one from the GMT archetype and the main differences are the additional plugins like GIN, GWTP and so on. Does GMT have a dependency on these or am I missing something else?

Edit

This is the console output, before and after the browsers OOM:

"C:\Program Files\Java\jdk1.8.0_121\bin\java" -Dmaven.multiModuleProjectDirectory=D:\...\IntelliJ\gwt-project -Dmaven.home=D:\...\apache-maven-3.3.9 -Dclassworlds.conf=D:\...\apache-maven-3.3.9\bin\m2.conf -javaagent:C:\MyPrograms\Jetbrains\apps\IDEA-U\ch-0\171.4424.56\lib\idea_rt.jar=51493:C:\MyPrograms\Jetbrains\apps\IDEA-U\ch-0\171.4424.56\bin -Dfile.encoding=UTF-8 -classpath D:\...\apache-maven-3.3.9\boot\plexus-classworlds-2.5.2.jar org.codehaus.classworlds.Launcher -Didea.version=2017.1.3 clean gwt:run
[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Archetype for GWT 1.0
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ gwt-project ---
[INFO] Deleting D:\...\IntelliJ\gwt-project\target
[INFO] 
[INFO] >>> gwt-maven-plugin:2.8.1:run (default-cli) > process-classes @ gwt-project >>>
[INFO] 
[INFO] --- gwt-maven-plugin:2.8.1:generateAsync (default) @ gwt-project ---
[INFO] 
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ gwt-project ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 2 resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ gwt-project ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 6 source files to D:\...\IntelliJ\gwt-project\target\gwt-project\WEB-INF\classes
[INFO] 
[INFO] <<< gwt-maven-plugin:2.8.1:run (default-cli) < process-classes @ gwt-project <<<
[INFO] 
[INFO] --- gwt-maven-plugin:2.8.1:run (default-cli) @ gwt-project ---
[INFO] create exploded Jetty webapp in D:\...\IntelliJ\gwt-project\target\gwt-project
[INFO] Super Dev Mode starting up
[INFO]    [WARN] Can't create cache directory: D:\...\IntelliJ\gwt-project\target\tmp\gwt-cache-D16BCEB3891D540A576CEE39322956C5
[INFO]    workDir: D:\...\IntelliJ\gwt-project\target\tmp\gwt-codeserver-3472297847544186841.tmp
[ERROR] 2017-05-28 08:56:23.951:INFO::main: Logging initialized @1942ms
[INFO]    Loading Java files in de.sample.sampleproject.SampleModule.
[INFO]    Module setup completed in 16346 ms
[ERROR] 2017-05-28 08:56:39.681:INFO:oejs.Server:main: jetty-9.2.14.v20151106
[ERROR] 2017-05-28 08:56:39.711:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@63b84321{/,null,AVAILABLE}
[ERROR] 2017-05-28 08:56:39.739:INFO:oejs.ServerConnector:main: Started ServerConnector@2dc37227{HTTP/1.1}{127.0.0.1:9876}
[ERROR] 2017-05-28 08:56:39.739:INFO:oejs.Server:main: Started @17730ms
[INFO] 
[INFO] The code server is ready at http://127.0.0.1:9876/
[ERROR] 2017-05-28 08:56:40.028:INFO:oejs.Server:main: jetty-9.2.14.v20151106
[ERROR] 2017-05-28 08:56:40.339:INFO:oejsh.ContextHandler:main: Started c.g.g.d.s.j.WebAppContextWithReload@3b083d20{/,file:/D:/.../IntelliJ/gwt-project/target/gwt-project/,AVAILABLE}{D:\...\IntelliJ\gwt-project\target\gwt-project}
[ERROR] 2017-05-28 08:56:40.341:INFO:oejs.ServerConnector:main: Started ServerConnector@1c12cdcd{HTTP/1.1}{127.0.0.1:8888}
[ERROR] 2017-05-28 08:56:40.343:INFO:oejs.Server:main: Started @18334ms
[INFO] GET /clean/SampleModule
[INFO]    Cleaning disk caches.
[INFO]       Cleaned in 16ms.
[INFO] GET /recompile/SampleModule
[INFO]    Job de.sample.sampleproject.SampleModule_1_0
[INFO]       starting job: de.sample.sampleproject.SampleModule_1_0
[INFO]       binding: user.agent=safari
[INFO]       Compiling module de.sample.sampleproject.SampleModule
[INFO]          Unification traversed 21138 fields and methods and 2036 types. 2004 are considered part of the current module and 2004 had all of their fields and methods traversed.
[INFO]          Warnings in com/google/gwt/emul/java/util/Arrays.java
[INFO]             [WARN] Line 1782: [unusable-by-js] Type of parameter 'd1' in 'int Arrays.1methodref$compare$Type.compare(long, long)' is not usable by but exposed to JavaScript.
[INFO]             [WARN] Line 1782: [unusable-by-js] Type of parameter 'd2' in 'int Arrays.1methodref$compare$Type.compare(long, long)' is not usable by but exposed to JavaScript.
[INFO]          [WARN] Suppress "[unusable-by-js]" warnings by adding a `@SuppressWarnings("unusable-by-js")` annotation to the corresponding member.
[INFO]          Compiling 1 permutation
[INFO]             Compiling permutation 0...
[INFO]             Linking per-type JS with 1984 new/changed types.
[INFO]             Source Maps Enabled
[INFO]          Compile of permutations succeeded
[INFO]          Compilation succeeded -- 19,773s
[INFO]       Linking into D:\...\IntelliJ\gwt-project\target\tmp\gwt-codeserver-3472297847544186841.tmp\de.sample.sampleproject.SampleModule\compile-2\war\SampleModule; Writing extras to D:\...\IntelliJ\gwt-project\target\tmp\gwt-codeserver-3472297847544186841.tmp\de.sample.sampleproject.SampleModule\compile-2\extras\SampleModule
[INFO]          Link succeeded
[INFO]          Linking succeeded -- 1,484s
[INFO]       21,783s total -- Compile completed

Edit 2

Translation from left to right:

Task | Memory | CPU | Network | Process ID | JavaScript-Memory | CSS-Cache | Script-Cache | Image-Cache | GPU-Memory | SQLite-Memory

Chrome Taskmanager

As you can see in the image, Chrome is running a lot longer than opera. It crashes after more than 2GB.


Solution

  • Found a solution but not the reason.

    As I meantioned in the comments of the question, I used the quickstart archetype. I did not changed anything in my pom but in the .gwt.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <module rename-to='SampleModule'>
    <inherits name='com.google.gwt.user.User'/>
    
    <!-- DOES NOT WORK -->
    <!--<inherits name="gwt.material.design.GwtMaterialDesign"/>-->
    
    <!-- One of the following DOES work -->
    <!--<inherits name="gwt.material.design.GwtMaterialDesign"/>-->
    <inherits name="gwt.material.design.GwtMaterialBasicWithJQuery"/>
    
    <entry-point class='de.sample.sampleproject.client.SampleModule'/>
    <source path='client'/>
    <source path='shared'/>
    </module>
    

    Even that I did not use any of the GMT elements or styles, I have to load JQuery. So I guess it does rely on it. Unfortunately this is not mentioned in the docs. I always thought JQuery is optional.