# The GWT context 💎

GWT是强大的工具，但有时这种力量可能会被视为复杂性。

GWT诞生于2006年，此后网络生态系统的发展一直令人赞叹，即使在GWT内部，也发生了许多变化，替代方案，并且第三方创建了惊人的解决方案来管理大型客户端Web APP。

From 2006 to 2012 GWT was actually called "Google Web Toolkit", and it was an all-in-one solution. But since June 2012, Google handed control to the steering committee and rename the project as "GWT". Since then, GWT has been evolving into a more open tool and most of the architectural solutions embedded into GWT itself, have been overcome by third-party alternatives. Nowadays, the number of solutions is enormous, and at this point, GWT is really just the core, and it is not biased in how you should organize your code. So, GWT is no longer a web toolkit, no longer client-side framework, it is just a transpiler with a giant ecosystem around it.

For example, nowadays if you want to choose a client architectural pattern, you must choose between gwt-activities, gwtp, errai, react4j, vue-gwt, nalu, and more! or if you are looking for a transport layer you should choose between gwt-rpc, request-factory, resty-gwt, gwtp-rest-dispatch, autorest, and more!

1. you have a senior Java team that already know Java and Web development (HTML5, CSS3, ES6). To develop with GWT you must know browsers, you don't need to be a JavaScript expert, but you need to know a lot around the web world (MDN is your friend).
2. you must want to share Java logic, libs, and tools that you are already using in Java (servers or Android) with the client-side or even iOS with J2ObjC). This is the whole point with GWT, sharing code between platforms. This is useful and it solves a logic-duplication, e.g. whenever you edit a field, you frequently validate with some rules, but then this is sent to the server and should be validated again. This simple but extremely common use case is beautifully solved with GWT. You write your validator code, and you use it exactly the same validation code on all platforms, giving you the responsiveness in the client side and also the security of the server side (cross-platform example).

# The starting guide ☝️

1. create a micro client-only APP, so no transport and no view components. Frequently guides start with a client-server app, it is much more complex and when you start with GWT you tend to confuse/mix the client and server sides as just one unique magic virtual machine. Although everything is java, and you can run the same java code in the client or in the server, both are independent runtime environments and this concept should be clear.

Also, if you create a client only APP the guide gets much smaller, and you can play with it easier. Even more, I strongly encourage to find micro-games or micro-apps written in JS or TypeScript and migrate it to GWT. This is a pretty good exercise to get used to GWT (this is, for example, a snake game I migrated from a JS project rxsnake-gwt).

2. it is managed with Maven, no IDE or plugin required, just java+maven. I'll use IntelliJ IDEA. We are not going to use any plugin, IntelliJ Ultimate has GWT support, Eclipse has a super nice plugin, but I personally prefer not to depend on any of that. Also, the problem with those plugins is that the project configuration (classpath mostly) is not easy to keep it exactly the same in the terminal or CI Vs the IDE plugin. So with this solution, Maven solution, you will be able to run, test and package your GWT in the same way in all those environments. IMO Maven is currently the easier strategy to compile GWT.

3. java 8, GWT already support Java 11, but it will be easier to make it work with Java 8 (which is still the most used version), so to keep it simple, please use JDK 8.

## 1. Maven basic archetype 💩

First, we create a minimal maven project. You might follow this guide or execute this command if you have maven already installed.

› mvn archetype:generate \
-DarchetypeRepository=https://repo.maven.apache.org/maven2 \
-DarchetypeGroupId=org.apache.maven.archetypes \
-DarchetypeArtifactId=maven-archetype-quickstart \
-DarchetypeVersion=1.4 -DinteractiveMode=false \


You can now open the created project in IntelliJ, just click open and go to the folder. IntelliJ detect maven automatically, and it will use the maven configurations to configure your project. I have reformated and removed comments, and also change the target/source java version to 1.8. Whenever you change something IntelliJ will ask you to "import changes", click it to update the project configuration. This is how it should look like:

Try again the mvn verify but this time use the IntelliJ maven menu. If you have various JDK installed, IntelliJ might be using the last one. In that case, and if you find any problem, configure JDK 8 for your project.

## 2. GWTify it 🌈

<dependency>
<artifactId>gwt-user</artifactId>
<version>2.8.2</version>
</dependency>
<dependency>
<artifactId>gwt-dev</artifactId>
<version>2.8.2</version>
</dependency>


<plugins>
<plugin>
<groupId>net.ltgt.gwt.maven</groupId>
<artifactId>gwt-maven-plugin</artifactId>
<version>1.0-rc-10</version>
<extensions>true</extensions>
<configuration>
<moduleName>me.App</moduleName>
<skipModule>true</skipModule>
</configuration>
</plugin>
</plugins>


<packaging>gwt-app</packaging>


package me.client;

public class App implements EntryPoint {

@Override
Text textNode = Document.get().createTextNode("Hello World!");
RootPanel.getBodyElement().appendChild(textNode);
}
}


<module>
<entry-point class="me.client.App"/>
<!--<source path="client"/>-->
<!--<public path="public"/>-->
</module>


This file is called a GWŤ module file. It is required so the GWT compiler knows which sources should be compiled, i.e. GWT does NOT compile everything that is in the classpath, it only compiles the sources indicated in the source tag. It is commented because the module adds those 2 lines implicitly. The source path="client" indicates that all java classes inside the package {module-package}.client will be included, and this is why we have moved App inside the client package. The inherits module is a dependency, this module depends on the gwt.user.User module and User source will depend on other modules recursively. The second line entry-point specify an entry point. So when the GWT final compilation is loaded in the web page, those entry points will be called. This is the onModuleLoad that we have created in the App class. This is the equivalent to the Main-Class manifest property for a jar file.

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GWT • Hello App</title>
<script type="text/javascript" src="me.App.nocache.js"></script>


The first 2 lines is a "strong" recomendation. Title just optional, and the unique actual interesting line is the script. This will bootstrap the GWT transpiled code, and after some steps, it will end up calling your onModuleLoad entry point! yeah! As you can see, the name of the file is {moduleName}.nocache.js. The nocache is just an easy convention in GWT, the compiler generates various files, and some of them contain .nocache. and others contains .cache.. Files with .nocache. should NEVER be cached and .cache. can be cached FOREVER. This makes trivial to add filters to the server to add cache headers, this is called GWŤ perfect caching™.

## 3. Package, Run and Debug 🔥

GWT将代码转换为JS，并查看结果，您需要在浏览器中将其打开。 但是首先，您需要编译和打包项目。 跑：

mvn package


## 4. Spice it up 🌮

Ëlemental2 is a Google library that exposes the whole Browser API in Java. The unique minor problem with this library is that in some cases the API is not javaish enough, specifically, events and element creation requires casts which is not common in the Java world. So, although we will use this library behind scenes, we are going to depend directly on a super small RedHat library called Ëlemento that add those missing parts. This library is a handcrafted API for elements and events, a beautiful library that gives us the power of JS with the type-safety of Java.

[RxGWT is a set of utilities to use RxJava in GWT, i.e. same as RxAndroid but for GWT. RxGWT depends on [RxJava GWT, a thin GWT adapter library over RxJava. Yep, ok, you cannot depend directly on RxJava, but if you go to the repo you will see that there are just a few minor changes and configurations to make it work in GWT, almost 98% of the actual RxJava source-code is the same.

<?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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>me</groupId>
<artifactId>hello-app</artifactId>
<packaging>gwt-app</packaging>

<name>hello-app</name>

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

<dependencyManagement>
<dependencies>
<dependency>
<artifactId>gwt</artifactId>
<version>2.8.2-rx1</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>

<dependencies>
<dependency>
<artifactId>gwt-user</artifactId>
</dependency>
<dependency>
<artifactId>gwt-dev</artifactId>
</dependency>
<dependency>
<groupId>org.jboss.gwt.elemento</groupId>
<artifactId>elemento-core</artifactId>
<version>0.9.1-gwt2</version>
</dependency>
<dependency>
<groupId>com.intendia.gwt.rxgwt2</groupId>
<artifactId>rxgwt</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>com.intendia.gwt</groupId>
<artifactId>rxjava2-gwt</artifactId>
<version>2.2.10-gwt1</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>net.ltgt.gwt.maven</groupId>
<artifactId>gwt-maven-plugin</artifactId>
<version>1.0-rc-10</version>
<extensions>true</extensions>
<configuration>
<moduleName>me.App</moduleName>
<skipModule>true</skipModule>
</configuration>
</plugin>
</plugins>
<pluginManagement>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
</plugins>
</pluginManagement>
</build>

<repositories>
<repository>
<id>rxjava-gwt-repo</id>
<url>https://raw.githubusercontent.com/intendia-oss/rxjava-gwt/mvn-repo/</url>
</repository>
</repositories>
</project>


<inherits name="com.intendia.rxgwt2.RxElemento"/>
<inherits name="org.jboss.gwt.elemento.Core"/>


package me.client;

import org.jboss.gwt.elemento.core.Elements;

public class App implements EntryPoint {

@Override
}
}


package me.client;

import com.intendia.rxgwt2.elemento.RxElemento;
import elemental2.dom.HTMLElement;
import org.jboss.gwt.elemento.core.Elements;

import static elemental2.dom.DomGlobal.document;
import static org.jboss.gwt.elemento.core.EventType.mousemove;

public class App implements EntryPoint {

@Override
HTMLElement el = Elements.span().style("font-weight: bold;").get();
RxElemento.fromEvent(document, mousemove)
.subscribe(ev -> el.textContent = ev.clientX + ", " + ev.clientY);
}
}


# Conclusion 👋

There is a project to start with GWT using a spring boot approach. I personally prefer a manual approach as explained in this guide because the spring boot approach adds many dependencies and make you feel a bit like you have loose control. But if you like it, then you will love this project gwt-boot-samples and it is even easier to start with. Anyway, this project has various modern popular solutions, so even if you don't use the dependencies itself, you can get inspired and configure it manually.

• stackoverflow gwt - pretty obvious, but yep, the best place to standard problems
• gitter gwt - gitter chat, this is pretty active, if you have no idea or have a quick question this is the best place
• groups gwt here there are a lot of old questions, also there are various specific groups for contributors, steering committee, various classic GWT libs, and more

Those 3 places should be enough. But, if you want to find more things, maybe some surprise, then go to awesome gwt where there are an infinite list of useful GWT resources, tutorial, libs, videos, blogs, and more!

from: https://dev.to//ibaca/modern-gwt-first-steps-509k

• 0
点赞
• 0
评论
• 0
收藏
• 扫一扫，分享海报

08-01 8463
03-07 141
11-26 770
12-01 165
11-23 804
08-20 7743
10-25 148
11-04 1319
06-13
07-12
01-02 1166
06-18 1072