GWT 2.8.x - 3.0.x provides a Java alternative to JavaScript for building web applications. It has evolved over time from addressing issues with early JavaScript and browsers to embracing modern JavaScript. GWT 3.0 will focus on the JavaScript ecosystem through a new compiler called J2CL that transpiles Java to JavaScript for better integration. This positions GWT to remain relevant for building frontend applications by leveraging the large Java and modern JavaScript ecosystems.

1. GWT 2.8.x - 3.0.x
The Java alternative to Javascript
Manolo Carrasco
+ManuelCarrascoMonino
@dodotis

2. About me

3. Agenda
● A little bit of context of Vaadin
● Spooky JS
● History of GWT
● Present of GWT
○ LTM projects
○ Modern web
● Is GWT dead
○ State of the Frontend
○ J2CL the future

4. FIGHT FOR SIMPLICITYthinking of U and I

5. - Vaadin is a development platform for web
applications that prioritizes ease of development
and uncompromised end user experience.
- The Vaadin platform consists of a comprehensive
set of web components, a Java web framework,
configurable themes, tools and a set of app
templates.
Vaadin

6. Architecture
Developer Space
Provided by Vaadin
JVM
Browser

7. Java Lang JVM
ecosystem
libs, IDEs ...
Developer space GWT vs Vaadin
Java Lang JVM
ecosystem
libs, IDEs ...
Scala, Groovy...

8. MillStone 3.0
IT Mill 4.0
IT Mill 5.0
2002
2007
2008
2018
2013
2009
Vaadin 6.0
Vaadin 7.0
2017
Vaadin 8.0
Vaadin 10
Vaadin: a 18y whisky

9. Next Generation Architecture

10. Spooky JavaScript

11. JS: What is the issue here?
idx might be a String

12. "0" == 0
"0" === 0
[] == []
[] == ![]
![]
+[]
2 == [2]
+[2]
[2] + ''
+([2] + '')
+[2,3]
+[2,3] + ''
'2' + 1
'2' - 1
'2' - - 1
+true
+false
true + true
parseInt(2)
parseInt('2')
parseInt('aaa')
parseInt(9999999999999999)
typeof NaN
0.1 + 0.2 == 0.3
'I am String' instanceof String
String('I am String') instanceof String
3 > 2
2 > 1
3 > 2 > 1
3 > 2 >= 1
1 < Number.MAX_VALUE
-1 < Number.MAX_VALUE
-1 < Number.MIN_VALUE
Number.MAX_VALUE
Number.MIN_VALUE
Math.max(1,2,3)
Math.min(1,2,3)
Math.max() > Math.min()
Math.max()
Math.min()
String instanceof String
Math instanceof Math
typeof null
null instanceof Object
JS: Crazy type conversion

14. GWT's mission is to radically improve the web experience
for users by enabling developers to use existing Java tools
to build no-compromise AJAX for any modern browser.
GWT Mision
A high-level language allows the Developer not to miss out
on low-level details and reuse existing ecosystem
GWT Productivity 2006

15. 2006 Context
- Browsers
- No Debug tools
- IE6, FF 1.5, Safari 2, Opera 9, No Chrome
- Incipient CSS (No animations, No rounded …)
- No RIA, No SPI
- No Smartphones
- Low performance PCs (256Mb, Single Core ...)
- JavaScript
- ES-3, No Standard XHR, No DOM traversing
- No IDE. No Refactoring, No Tests, No Libraries, No packaging ...
- No Runtime (V8)
- Java 1.4, no generics, no annotations

16. 2006 Context
- Compiling to JavaScript was not a thing
- GWT pioneered the idea.
- Then came: CoffeeScript, Dart, TypeScript, …

17. Advantages of a Compiler
Separate the maintainability of the code from the
effectiveness of the executable.
- The handwritten JS was verbose and slow
- The solution is not to look for conventions in the javascript code
written by hand, it is to create a level of separation so that both are
not compromised (maintainability, effectiveness).
Remove the bad parts while keeping the good stuff

18. Advantages in Compile Time
- Common errors are correctable at compile time and
not in execution time.
- Functionalities can be injected.
- Peculiarities / Hacks for each browser
- Assets bundling and compression
- Code Splitting and async loading
- Conversion and obfuscation server objects ↔ client
- Versioning, Minimisation

19. The basis of GWT
- The heart of GWT is the compiler, Java -> JavaScript
- Only supports a subset of the Java language
- The resulting code is JavaScript, single-threaded code.
- Creates a separated, obfuscated and optimised
JavaScript implementation for each supported browser.
- Takes into account browser specific features, bugs, issues and
performance optimizations
- But the toolkit has plenty of tools (dev, build, test, libs)

20. Innuvo
1.0.21
1.3.3 O.S
2005
2006
2007
2018
2010
2009
2.0 UIB OOPHM
2.1 MVP RF
2011
2.2 Designer
3.0 J2CL
GWT a 12y whisky
2012
Grid 2.4
2013
2.5 SDM
2017
2.8 J8 JSi E22014
2.6 J7

21. The present of GWT

22. GWT is Popular in the Java Web
2016
2012

23. Stable Platform

24. Reliable

25. Good Tools & Ecosystem

26. High Quality and Mature

27. Fast development cycles

28. For Big Teams & Big Projects

29. But

30. High Learning Curve

31. Outdated docs

32. Obsolete Stuff
↝ Generators
↝ Widgets, Elements, JSO
↝ RPC
↝ RF
↝ AutoBeans
↝ UiBinder
↝ JSNI
↝ Classic DevMode
↝ Ant
↝ Designer

33. Project Activity Deceleration

34. A project with few Contributors

35. Unmaintained libs
GWT spring react

36. Hard to Interact with JS
- Not Anymore
- JsInterop
- Elemental2

37. @JsType(isNative = true)
public abstract class JQuery {
@JsMethod(namespace=GLOBAL)
public native static JQuery $(String selector);
public native JQuery css(String prop, String val);
public native JQuery attr(String name, String val);
}
import static jquery.JQuery.$;
// ...
$("ul > li").css("color", "red").attr("data-level", "first");
Java
Java
Use native JsType to use any
existing JavaScript library.
Use it like JavaScript
JsInterop Consume

38. package foo;
@JsType
public class Bar {
public boolean bool = true;
public Bar() {}
public String foo() { return "Hello GWTCon!";}
}
var bar = new foo.Bar();
if (bar.bool) {
alert(bar.foo());
}
JavaScript
Expose your Object to
JavaScript world.
JavaScript can use your public
API of exposed Java objects.
Java
JsInterop Export

39. Elemental2 - new Browser API
public class SimpleApp {
public static void main(String[] args) {
window.addEventListener("load", evt -> install());
}
private static void install() {
final HTMLButtonElement button = (HTMLButtonElement) document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", evt1 -> {
button.parentNode.removeChild(button);
console.log("Button has been removed.");
});
document.body.appendChild(button);
}
}

40. Status of the current GWT
GWT 2.8.x
- Big Java artifacts (no split in modules)
- Stable & Long Term API Support
- No new Features planned
- Prepared for JS
- JsInterop
- Elemental2
- Large ecosystem
- 2.8 is stable and available for foreseeable future

41. Long Term Support Applications
LTS Apps

42. 2.8.x is perfect for Long Term Apps

43. - Avoid legacy modules
- Most Widgets, RPC, RF, etc
- Design with UIBinder and CSS3
- Use J8 syntax, collapse browser permutations.
- Select good 3rd party libs
- Gwt-material, Gwt-bootstrap, Gwt-query
- Use JsInterop for json data or Resty-GWT
Good Practices for LTS apps in 2.8.x

44. GWT is PWA

45. Decorate the host page with CSS3
App Shell

46. GWT nature is SPI and RIA
App Like Iterations

47. GWT History Tokens
Linkable

48. HTTPS: simply works
GWT linkers: unique random names
Secure & Fresh Updates

49. Responsive UI
- Permutation per device
- Responsive UI libs

50. - GWT already have
- Code splitting
- Code removal
- Permutations
Fast Loading

51. Offline
GWT is client side -> Works Offline

52. - Use Responsive Widgets
Gwt-bootstrap
Gwt-material
Gwt-polymer-elements
Recipe 1 - Responsiveness

53. - Re-use UI Componens: JsInterop
- Easier development and sharing
- Lazy load components when needed
- Cache components for ever
- Use the platform: Elemental 2.0
- Thanks to JsInterop, to interact with platform is easy
- Use Elements instead of Widgets
- Not need of gwt wrap libraries
Recipe 2 - Fast loading

54. - Add a static Web App manifest
- Generate service-worker
- Disable old browsers:
<set-property name="user.agent" value="safari,gecko1_8" />
- Don’t use permutations:
<collapse-all-properties value="true" />
- Avoid random JS names
<add-linker name="sso" />
- Use the sw-precache CLI
Recipe 3 - Offline first

55. - Use out-of-the-box solutions
- PouchDB + CouchDB
- Gwt-pouchdb
- Vaadin-pouchdb (via gwt polymer)
- Firebase
- Gwt-firebase (xplatform)
- Polymerfire (via gwt polymer)
Recipe 4 - Data Offline

56. - Inbox
- G Suite
- Google Docs
- Google Flights
- Closure
- Vaadin Flow internals
How uses modern GWT

57. GWT Transition path for the
Future

58. The Near future of GWT
GWT 2.9.x
- Modular (split in small artifacts)
- Parts might be transferred to, or taken by the community
- Expect changes and new Features in API
- Removing browsers, jsni, moving namespaces, etc
- Replacing generators with Annotation Processors
- But maintaining backwards compatibility
- Prepared for the JavaScript wild
- Expect tools for sharing with GWT 3.0

59. 2.9.x might be your Transition Path

60. - Use min set of modules, start with Core.gwt.xml
- Forget Classic Widgets and Element
- Replace classic DOM with Elemental2
- #useThePlatform as much as possible
- Check 3rd party modules not to import User.gwt.xml
- Design the UI using Js reusable widgets
- Web components (gwt-polymer)
- Html templates (elemento or polymer)
- Decouple business logic from UI
Best practices for the Transition

61. The Future of GWT

62. Frontend: State of the art

63. We are in the JavaScript Era

64. Popularity of Web Platforms

65. Huge ecosystem

66. Good dev tools in JS

67. JS also runs everywhere

68. How is GWT in this jungle

69. Lot of reactions, Is GWT Dead?

70. GWT reasons, not valid anymore
- For the Browser (2006)
- Huge diffs between vendors (IE6)
- memory limitations (256Kb RAM PCs)
- Related with JavaScript (2006)
- No way to debug JS
- No tooling for JS optimisation and obfuscation
- No way of modularising / managing dependencies
- No IDE. No Testing tools. Slow runtime.
- Java Specific (2006)
- Same language client/server
- More developers than JavaScript

71. - The Java Language is the strong Key of using GWT
GWT reasons nowadays

72. Embrace the JavaScript world

73. GWT 3.0 is for the frontend chaos
- New compiler and tooling
- J2CL
- Runtime JVM, Node or both?
- Build system bazel, maven, npm ?
- Big changes in API and emulated JRE
- Prepared for the platform
- JsInterop
- Elemental2
- Comes with a different DX paradigm

74. J2CL
Pronounced “Jackal”
Shares features with the GWT compiler
● JsInterop
● Java8
● Java standard library (JRE)
● Elemental2

75. J2CL
Source to source transpiler
- Takes Java 8 code as input and outputs readable ES6 with JsDoc
Closure style annotations
Transpiles one Java class at a time
Optimizations happen in Closure compiler
Code generation happen in Java annotation processors
Targeting modern Js features, blazing fast

76. Transpiler
@JsType
public class Hello {
public String message() {
return "GWTCon!";
}
public static String getMessage() {
return "Hello " + new Hello().message();
}
}
class Hello extends java_lang_Object {
/**
* @public
*/
constructor() {
super();
}
/**
* @return {?string}
* @public
*/
message() {
return "GWTCon!";
}
/**
* @return {?string}
* @public
*/
static getMessage() {
return "Hello " + new Hello().message();
}
};

77. J2CL - Sharing Code
Java JavaScriptJ2CL JavaScriptClosure
Optimized
JavaScript

78. J2CL + Closure → Optimisation

79. Two possible paths for J2CL
➔ Classic Java Development flow
◆ Java IDE
◆ Java dependency artifacts (.jar)
◆ Java Build tools mvn, gradle, j2cl, closure, linker
◆ JVM for server side and testing tools
➔ Just a transpiler to JavaScript
◆ Java IDE
◆ JS dependencies (.js)
◆ JS Build tools npm, closure-compiler-js
◆ node-js for server side
◆ JS testing tools

80. A java transpiler in the JS world
NODE
ECOSYSTE
M
npm,gulp,*.js
,
Java IDE
mvn, jar,
Java IDE
JVMJAVA NODE
npm, gulp,
*.js,
Java IDE
JAVA

81. Thanks
manolo@vaadin.com
+ManuelCarrascoMonino
@dodotis