demo-gwt-springboot

Build Status

Table of Contents

• Demo in Heroku
• Introduction
• Architecture
  • Model for Services and Domains
  • Architecture
  • Mock Mechanism
• Run the WebApp for Development
  • Server: Start the WebApp with Spring Boot
  • Client: Start GWT SuperDev Mode transpiler
  • Browser: Call the WebApp demo-gwt-springboot from a web browser
  • Heroku: Test the Webapp from Heroku
• Logging
  • Server: Logging at the Spring Boot Console
  • Client: Logging at the Browser Console
• Debugging
  • Server: Debugging Spring Boot
  • Client: Debugging with GWT SuperDev Mode
  • Client: Debugging with Eclipse SDBG
  • Client: Debugging with IntelliJ IDEA
• Unit and Integration Testing
  • Server: Spring Test
  • Client: GWT Mockito

Demo in Heroku

• Spring GWT Demo in Heroku

Introduction

This is an example Maven project for following frameworks:

• User Interfaces (Client):
  • GWT
  • GWTBootstrap3 for the UI
  • RestyGWT for the RESTful access to backend services
  • GIN for Dependency Injection
  • GWT Event Binder for event bus
  • GWT Mockito for UI logic test
• Controllers and Services (Server):
  • KissMDA
  • Spring Boot for business logic implementations
  • All the standard stuffs used by Spring Framework
• Domains (Server):
  • KissMDA
  • JPA with Hibernate

The idea of this project is to offer a simple application template for the mentioned frameworks above. If you need a more sophisticated GWT application framework you can use following frameworks:

• ArcBees GWT-Platform: Model-View-Presenter Framework for GWT
• JBoss Errai Framework
• Sencha GXT

The development is based on Maven so this project can be used with Eclipse, IntelliJ or NetBeans.

Architecture

Model for Services and Domains

There are two services: UserService and PersonService and two Entities: Person and Address. Following diagram shows the structure of the services and the domains.

Architecture

Following diagram shows the architecture of the Microservice Demo. The naming of the packages client, mock, server, shared and resource (not shown in diagram) is based on this architecture.

Client

All the GWT (UI and REST client) classes should be located in this package. GWT transpiles all the Java sources into JavaScript sources.

Mock

The package consists of the mock implementation of the REST services at the client side (GWT). Instead of calling the real REST services it will create the mock data. For this purpose you can use the development-mock profile of Maven. It will compile the mock package and uses the mock implementation to handle the services. If you want to call the real REST services you can use development profile and GWT transpiler will remove the mock part. Please take a look the mock mechanism below.

Shared

In this package you can put any classes which will be used from both sides: client and server. It is advisable to put constants and endpoints of the RESTful services so that they point to the same address. Also DTO (Data Transfer Objects) for RESTful services should be included in this package. GWT transpiles this package into JavaScript sources.

Server

All the controller, service, repository and domain classes - based on Spring Framework - should reside in this package. This package will not be included in GWT transpiler.

Resource

All the themes for GWTBootstrap3 and general Bootstrap themes like Bootswatch should be located in this package.

You can take a look the GWT configuration file to see which packages will be included in GWT transpiler.

Mock Mechanism

The idea is to be able to develop the UI without any dependencies to the functionality of the REST API. We should be able to mock the data which come from the REST API.

Following points are important to know:

• All the REST API call should be first implemented using POJO interface so this interface does not extend the RestyGWT RestService interface. Example: UserClient.java.
• Following is the mock implementation of MockUserClient.java and real implementation RestUserClient.java.
• We also need to do the same thing for the ServicePreparator class.
• We need a Maven profile development-mock. In this profile we call a special GWT module file which will be used to transpile the Java code:
  • Maven pom.xml with a profile: development-mock.
  • GWT Module DemoGwtDevelopmentMock. In this GWT module file we define the src path to transpile the mock package. Also we define what EntryPoint DemoGwtMockEntryPoint class we would like to use in this profile:
    • Real EntryPoint: DemoGwtEntryPoint.java
    • Mock EntryPoint: DemoGwtMockEntryPoint.java
  • In the Dependency Injection Gin module we instantiate the correct implementation for the "real - DemoGwtGinModule.java" or for the "mock - DemoGwtMockWebAppGinModule.java".

With this mechanism we can develop the UI very fast and we don't need to wait for the REST API to be implemented.

Run the WebApp for Development

Server: Start the WebApp with Spring Boot

Just run the class DemoGwtSpringbootApplication or if you are using Spring Tool Suite just run it with Spring Boot Dashboard:

Tips and Tricks

JRebel

• If you are using JRebel you need to put following parameter in VM Arguments, something like:

-javaagent:C:\progjava\jrebel\jrebel.jar

or the newer version of JRebel

-agentpath:C:\progjava\jrebel\lib\jrebel64.dll

• You also have to comment out the Spring Boot Dev Tools dependency in pom.xml.

        <!-- Use this Spring Tool for restarting the app automatically -->
        <!-- Only use this if you don't use JRebel! -->
        <!--
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        -->

• To be able to generate the rebel.xml you need to compile the project with Maven profile development.

Spring Boot Dev Tools

Spring Boot Dev Tools restarts the Spring Boot App automatically if your codes have changed. You have to deactivate JRebel if you want to use this tool. This Spring Boot Dev Tools dependency should be activated:

        <!-- Use this Spring Tool for restarting the app automatically -->
        <!-- Only use this if you don't use JRebel! -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

Client: Start GWT SuperDev Mode transpiler

To be able to test quickly you can use GWT SuperDev Mode. With this tool you can just recompile the changes in GWT Java codes into JavaScript codes without restarting the process.

Follow following steps:

Starting GWT SuperDev Mode

Starting GWT SuperDev Mode Compiler from command line or within the development environment with Maven:

mvn -P development gwt:run-codeserver

To start with Mock:

mvn -P development-mock gwt:run-codeserver

At the end you can see following message:

...
[INFO] The code server is ready at http://localhost:9876/
...

Bookmark Dev Mode On

Now you can go to the given address and boomark the Dev Mode On through drag and drop into your bookmark menu.

That's it. You can just push Dev Mode On to run the transpiler directly and the WebApp will be reloaded automatically.

Browser: Call the WebApp demo-gwt-springboot from a web browser

Go to the application URL with a web browser:

http://localhost:9014/demogwt/index.html

or just

http://localhost:9014/demogwt

Heroku: Test the Webapp from Heroku

The webapp is installed at Heroku PaaS and you can test it from this address: Demo Webapp

Logging

The GWT logging is activated (see configuration file) at both sides: Client and Server.

Server: Logging at the Spring Boot Console

Client: Logging at the Browser Console

Debugging

Server: Debugging Spring Boot

Debugging the Spring Boot part can be achieved easily by starting the Spring Boot with Debug mode.

Client GWT: Debugging with GWT SuperDev Mode

You need to update following file: configuration file for development

    <!-- Compiler agent - we only need to compile for one web browser in development -->
    <!-- If you want to use SDBG for debugging you need to use Chrome == safari -->
    <set-property name="user.agent" value="safari" />  

For all purposes of debugging you need to use Google Chrome as your browser.

Client GWT: Debugging with Eclipse SDBG

Debugging the GWT part with Eclipse should be done by using SDBG.

Tips and Tricks for Optimizing Transpiler Speed

There are two GWT configuration files: DemoGwtDevelopment.gwt.xml and DemoGwt.gwt.xml.

• DemoGwtDevelopment.gwt.xml: this config will be used to make the GWT compiling process faster. This only compiles for one web browser and use INFO as logging output.
• DemoGwt.gwt.xml: this config will be used for production transpilling. This is optimized for many many production purposes.

Client GWT: Debugging with IntelliJ IDEA

For debugging gwt with IntelliJ IDEA proceed the following stets.

Prequesites

• JetBrains IntelliJ 2016 Ultimate (Community doesn't support it)
• Chrome browser
• JetBrains IDE Support Chrome Browser Plugin
• Enabled GWT Plugin in IntelliJ

Overview

The following diagram shows the different parts of the setup:

Step by step

Open Project in IntelliJ

After this the project is loaded and the DemoGwtSpringbootApplication will be added to the RunConfigurations automatically.

Configure Web Facet

Open in the FileMenu the Project Structure

Add add under Facets a Web Facet to the project

Add the facet to the demo-gwt-springboot module:

The path must be set to src/main/resources/public and the context must be /demogwt.

Important

Do not add the web.xml to git. Just ignore it.

Do not generate Artifacts

Close the Project Structure with Ok and reopen it. Now the Web Facet can be selected in the GWT Module.

After this you should select only the GWT Module DemoGwtDevelopment

GWT Configuration

Add a new Run Configuration

And a GWT Configuration:

After this you start the "Spring Boot Project" first and after this the "GWT-Project" in Debug mode.

Codeserver

Now you have to repeat the steps to configure the code server (see above).

Running the debugger with the IDE Support Plugin

You should see the alert that the »JetBrains IDE Support« is running in debug mode.

If you have any trouble connecting the browser with the idea, please check the ports of the browser plugin and Intellij.

Right click on the Life Edit extension and choose Options:

The default port is 63342.

And check if the port in the Intellij IDEA debugger is configured on the same port.

Unit and Integration Testing

Server: Spring Test

Examples of unit test with POJO and Mockito:

• PersonImplTest.java
• PersonServiceImplTest.java

Examples of integration test with Spring and in memory database:

• PersonServiceImplIT.java

Client: GWT Mockito

We use GWT Mockito for writing the GWT user interface unit test. Following is an example of GWT Mockito unit test:

• MainPanelViewTest.java
• PersonPanelViewTest.java