GWT ReloadedBuilding complex browser-based applications in Java 8

© 2016 by Marcin Szałomski

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

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!

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.

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?

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

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.

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.

More tech:

❏ JSInterop: @JSType and @JSPropertyinstead 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 .

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

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).

One App, Many Platforms

Java code reused ➤ Inbox Web uses GWT JsInterop ➤ Inbox iOS uses J2ObjC

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?

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

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

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, …

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

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

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)

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 .

GWT related links

❏ Conference slides❏ Sources ❏ Some videos:

GWT Meet-up 2015GWT.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