This document provides an overview of Google Web Toolkit (GWT), including its history and development, why it is still useful despite newer JavaScript frameworks, how it works, and examples of its use. Key points include: GWT started at Google but is now an open source project overseen by a committee including Google; it allows developing complex browser apps in Java that compile to optimized JavaScript; it enables strong typing and code reuse across platforms; major companies like Google use it for applications; and frameworks like Errai extend it for full-stack web development.

1. GWT Reloaded
Building complex browser-based applications in Java 8
© 2016 by Marcin Szałomski

2. Topics
❏ What is GWT and who stands behind it?
❏ GWT retrospection (2006-2016)
❏ The Future of GWT
❏ What about the popular JS frameworks?
❏ Why do we still need GWT?
❏ Who and how is using GWT?
❏ How to use GWT?
❏ Errai Framework - Java EE In The Browser.
❏ Useful links

3. Google Web Toolkit? Still Google?
It was originally created and developed by Google.
Now? Google - member of the GWT Open Source Project.
So who’s the boss? (late 2011-...)
GWT Steering committee : Google, Vaadin, Sencha, RedHat, Arcbees,
Bizo, Jetbrains, Thomas Broyer and Colin Alworth.
(to ensure that no particular individual, group or organization can gain
control over the project)
What’s changed? The project gets better!

4. Java to JavaScript compiler.
❏ open-source, completely free,
❏ the active community,
❏ still developed and maintained
❏ lots of tools and libs around
❏ GWT.create, GWTcon ,
conferences,
❏ used by thousands of
developers around the world,
❏ ...
GWT?
Development toolkit for building
and optimizing complex browser-
based applications. Its goal is to
enable productive development
of high-performance web
applications without the
developer having to be an expert
in browser quirks,
XMLHttpRequest, and JavaScript.

5. GWT in the Past
❏ ...was born in Google (2006)
❏ graduated to open source in
late 2011 (steering committee)
❏ in 2006 browsers and
JavaScript were far from
standards (jQuery just
announced for the first time!)
❏ almost lack of HQ alternative,
❏ The goal: browsers tricks
hidden for developers
Ok, but the web has changed over
the past decade. We have now a
lot of awesome front-end
frameworks like: Angular, Polymer
or React.
Do we still
need GWT?

7. Why do we still need GWT? [1 of 2]
JavaScript became lingua franca
of front-end applications.
But developers need better tools.
OK, we have: ES6+, CoffeeScript,
TypeScript, JSweet, Dart, …
Developers need stronger typing!
Weakly typed language may
produce unpredictable results!
Future of JavaScript?
❏ There was JavaScript in 1996,
❏ There was JavaScript in 2006
❏ There is JavaScript in 2016
❏ … who knows…
❏ ...the future? WebAssembly?
GWT alternative? Kotlin.js ,
Scala.js , Ceylon and more …
even other tools for Java.
such as the importance of the JavaScript has grown each year

8. Why do we need stronger typing?
Is JavaScript so bad? What about the EcmaScript 6 or TypeScript?
ES6 doesn’t support for types.
TypeScript offers support for types, but doesn’t support strong type system.
Strong typing guarantees your code is free of silly mistakes.
No more mixing up strings or numbers, forgetting what keys an object has,
or worrying about typos in your method names.
It also provides easy and reliable refactoring and reliable code completion.
* - This nice explanation has been taken from the Scala.JS site.

9. Why do we still need GWT? [2 of 2]
Principles: DRY and DIE! Reuse, reuse, reuse, ...!
Cross-platform approach. One Java code base, various platforms.
… mobile web, native targets like mobile devices
… and perhaps even the IOT... To reuse even Java Backend code …
...JAVA, JAVA, ...
...for native consider also:
Titanium4J (GWT),
Intel Multi-OS Engine or
Codename One...
Reuse: business logic,
model, validation, etc.
Titanium4J or
Codename One helps
you even with the UI.

10. More tech:
❏ JSInterop: @JSType and
@JSProperty
instead of JSNI or JSO,
❏ Super Dev Mode (edit-refresh),
❏ GSS Support ,
❏ J2CL (Java-to-CLosure aka
Jackal) - Closure Compiler ,
❏ Elemental 2.0, …
GWT in the Future // GWT 3.0
Simple summary:
❏ 2.8.0 beta already available,
❏ 3.0 in development,
What has changed:
❏ reinvented interoperability
with JavaScript,
❏ new improved compiler,
❏ Java 8 support!
For more please see this: presentation and the article .

11. Additional
references:
GWT and Java 8
GWT 2.8 allows us to enjoy Java 8. Further benefits are eg. FRP (Reactive).
Actually it's nothing new, but lot of projects stucked in the previous GWT
version. The reason to switch? Please see this presentation (starting from
slide #20). One of the key features - lambda expressions:
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
@Override
public void execute() {
$(image).css("display", "block");
}
});
Scheduler.get().scheduleDeferred(() -> $(image).css("display", "block"));
JAVA 7
JAVA 8

12. Who is using GWT?
GWT is used by many products at
Google, including:
AdWords, AdSense, Flights, Hotel
Finder, Offers, Wallet, Blogger,
Google Sheets, Parts of Maps and
Google Inbox (May 28, 2015 -
officially opened).

13. One App, Many Platforms
Java code reused ➤ Inbox Web uses GWT JsInterop ➤ Inbox iOS uses J2ObjC

14. Recently Google announced that has rewritten the AdWords UI using Dart .
So what does it mean for GWT? I’ve compared both after reading the
interview with primary technical lead: Explained with the details here .
[x] Dart [x] GWT transpiles well to Javascript
[_] Dart [x] GWT switch tech stacks easily
[_] Dart [x] GWT stronger type checking
[_] Dart [x] GWT fast edit refresh
[x] Dart [x] GWT new js interop
[x] Dart [x] GWT being terse
[x] Dart [x] GWT frameworks available
[_] Dart [x] GWT native apps
What about the AdWords?

15. Who else is using GWT?
Please find “The Future of GWT
Report 2015” here .
Mostly for large-scale web
applications like:
❏ Internal and External business
applications,
❏ Content-rich websites…
Why?
❏ maintainability of the code is
important

16. How to use GWT?
Presentation - building Polymer
Elements powered app with
Vaadin Framework: .
Presentation introducing Errai
Framework .
Btw. it’s worth mentioning that
GWT can be also used to create
non browser based apps using
Node.js, since it’s Java to JS
compiler.
Errai Framework?
❏ building full-stack web apps,
❏ type-safe and declarative,
❏ “It's better to have less code
that clearly expresses intent”
❏ convention over configuration,
❏ Share code between the client
and the server,
❏ DRY: Reuse your data model,
validation and business logic,...
boilerplate is bad

17. Errai Framework
❏ Client-side dependency
injection (consistent with CDI)
❏ Client-side templating
❏ 2-way data-binding
❏ Dynamic runtime module
support (using JsInterop)
❏ qualifier annotations to
determine what dependencies
a bean satisfies,
❏ Constructor field and setter
injections,
❏ More CDI and EJB features:
@Alternative, @Specializes,
@Produces, scopes, CDI
Events, JPA, ...
❏ injecting native JavaScript
objects into IoC beans with JS
interop,
❏ Support for native DOM-based
UI,
❏ Support for GWT 2.8 + Java 8.
… loose coupling, easy reuse, …

18. Errai - how to cook with it (Errai UI example)
❏ bind Java class elements to
elements in an HTML template,
❏ template files can be HTML
fragments or full pages,
❏ the HTML file is the template,
❏ the Java class is a templated
bean.
❏ data fields can be @Bound to
the model and automatically
updated.
MyForm.html

19. Errai - Data Binding
The name and dob fields are @Bound
They are kept in sync by binder.
This class is @Bindable with two properties
Going the other direction

20. More Errai examples?
Presentation introducing Errai
Framework .
Getting started
Reference
Please watch this 6 minutes
movie showing Errai in action
(TODO List app creating).
(referers to the quite old Errai version but it’s still worth watching)

21. GWTP (video), Tessell (video),
MVP4G, and more …
How about the UI?
GWT Polymer (tutor, showcase),
Vaadin (demo), Sencha GXT (doc),
native apps in Titanium4J (videos)
GWTMaterialDesign (demo #1,
demo #2, demo #3, demo #4),
Smart GWT (showcase),
GwtBootstrap3 (demo), jqm4gwt
(jQuery Mobile showcase), ...
What if not Errai?
GWT 3 way of using UI. Widgets
will be depreciated. Using the
new JSInterop and Elemental it
should be now possible to simply
use any 3rd
party JavaScript UI
library or integrate with
frameworks like React/Redux
or Angular .

22. GWT related links
❏ Conference slides
❏ Sources
❏ Some videos:
GWT Meet-up 2015
GWT.create 2015
❏ GWT Project site
Interesting articles:
❏ Build Powerful JavaScript
Front Ends Using Java
❏ What happened in 2015/2016
for GWT ?
❏ Java mobile tech overview