Présentation DevoxxFR 2015 sur GWT

@samijaber#GWT

Le retour en force de GWT

@samijaber#GWT

Speaker

@samijaber

@samijaber#GWT

Le retour en force de GWT

• Plus que jamais une techno d’avenir

• Les nouveautés de GWT 2.7

• Les applications hybrides

• Les performances

• GWT 2.8

• Support de Java 8, JSInterop

• Elemental, Mobile, Collections…

• Singular

@samijaber#GWT

On m’a dit que GWT était mort ?

• Technologie retenue pour Google Inbox (Gmail V2)

• Technologie retenue pour Google Spreadsheet

• Mais aussi AdWords, Google Groups, Hotel Finder,

Moderator, Google Flight, Google Checkout, Gerrit, Angry

Birds, Google Web Font, Google Blogger, Google Offers,

Google TakeOut, Google PageSpeed, Fusion Table, App

Script Editor …

• Et en dehors de Google ?

http://www.gwtproject.org/developer_spotlight.html

@samijaber#GWT

Nouveau logo, nouveau site

• Un nouveau logo et un nouveau site (intégrant la

documentation) ont été créés cette année

• Une communauté de plus de 100.000 utilisateurs à travers

le monde

• Des grands noms de l’industrie Google, Redhat, …

@samijaber#GWT

Nouveau site Web

http://www.gwtproject.org

@samijaber#GWT

Les performances ?

856

736

GWT

JS

223

213

GWT

JS

1031

638

GWT

JS

796

820

GWT

JS

DeltaBlue

Splay

RayTrace

Richards

Benchmark Octane (V8)

Exécutions par seconde

Source : https://plus.google.com/111111598146968769323/posts/7LRV7hBKgGH

@samijaber#GWT

En taille de code généré ?

@samijaber#GWT

La version actuelle ?

• GWT 2.7 sortie en Décembre 2014

• Nouveauté majeure : SuperDevMode, la compilation

JavaScript instantanée (Compile on Refresh)

• Intégration avec SourceMap

• Eclipse : SDBG

• IntelliJ : Natif

• Bug fixes + améliorations des performances (String,

Arraylist, Hashmap, ….)

@YourTwitterHandle@YourTwitterHandle@samijaber#gwt

Di, ci pas li dimo mitinant?

@samijaber#GWT

JSInterop

• S’intégrer à JavaScript n’a jamais été aussi simple

function SomeType(){}

SomeType.prototype.doStuff = function(){};

SomeType.prototype.value = 3;

@JsTypeinterface SomeType {

void doStuff();

@JsPropertyint value();

@JsPropertySomeType value(int v);

}

@samijaber#GWT

Héritage JavaScript/Java

• Une classe GWT s’intègre dans la chaîne d’héritage

JavaScript sans contrainte

@samijaber#GWT

WebComponent

• Avec JSInterop, GWT bénéficiera des Framework

JavaScript disponibles : Polymer, Etag, …

<script src=”/polymer/webcomponentsjs/webcomponents.js”></script><import rel=”import” href=”/polymer/paper-elements/paper-elements.html” />

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'xmlns:gwt='urn:import:com.google.gwt.user.client.ui'><gwt:HTMLPanel>

<paper-button ui:field=”button” raised=””>Click me!</paper-button></gwt:HTMLPanel>

</ui:UiBinder>

@YourTwitterHandle@YourTwitterHandle@samijaber#gwt

Di, ci pas li dimo mitinant?

@samijaber#GWT

Elemental mon cher ami

• JAR permettant d’utiliser en JAVA les dernières

fonctionnalités de HTML 5

• Extrait les définitions WebIDL du standard et génère les

fichiers JSInterop (et la javadoc)

• Plus qu’à ouvrir son IDE et à utiliser en Java « Push

Notification » « FullScreen », « WebStorage », « Offline »

ou « WebRTC »

@samijaber#GWT

ExempleWindow $win = Browser.getWindow();

$win.newEventSource(“http://...”).setOnMessage(e->...);

$win.newSpeechRecognition().start();

$win.newFileReader().readAsDataURL(...);

$win.getComputedStyle(e, null).getPropertyValue();

$win.getOpener().postMessage(...);

$win.getConsole().log(...);

$win.getHistory().pushState(...);

$win.getPerformance().getNow();

$win.getCrypto().getRandomValues(...);

$win.getUserMedia()

@samijaber#GWT

GSS

• Google Style Sheets

• Support et Extension de CSS3 (un peu comme Less ou

Sass)

• Possibilité d’utiliser des variables, des conditions, mixins

• Minification/compilation, RTL, réduction des styles non

utilisés

• Remplace CssResource (conversion à la volée de vos Css

vers Gss)

@samijaber#GWT

Exemple GSS

Génère

Style.gssStyle.css

<set-configuration-property name=CssResource.enableGss value=true />

@samijaber#GWT

Evalué à la compilation

• Les fonctions et conditions sont évaluées à la compilation

• On n’embarque que ce qui est nécessaire au navigateur

utilisé

@samijaber#GWT

GWT 2.8

• Supportera Java 8

• JsInterop en version 1

• Une meilleure expérience de debug

• Le support de GSS par défaut

• La compilation encore plus rapide

• Des collections encore plus rapides

@samijaber#GWT

Support du JDK 8

• Lambdas, référence de méthode & méthodes par défaut

(defender methods)

• Imp. des méthodes dans l’interface (méthodes statiques aussi) + support de java.util.functional

interface MaClasse {default void run() {

System.out.println(get());}

static void accept(int value) { … }

String get() { … }}

MaClasse example = () -> “Les lambdas c’est génial !”;

Runnable r = example::run;

r.run(); // Affiche “Les lambdas c’est génial !”

@samijaber#GWT

Des collections plus rapides

• Optimisation des collections : ArrayList.get(i)

• Intégration plus étroite avec les types natifs JS (plutôt que

de passer par des itérateurs)

• Annotation @IterateAsArray

• Elimination de l’auto-boxing

• Mapping du type java.lang.Number vers le type natif

number de JS

• Utilisation des types natifs JS de ES6 (Map et Set)

@samijaber#GWT

Comparaison avec JS

• Java aussi concis que JavaScript

Java 7

Runnable task = new Runnable() {@Overridepublic void run() {

doSomething();}

};

Javascript

var task = function() { doSomething() }

Java 8

Runnable task = () -> doSomething();

Javascript

var task = function() { doSomething() }

@samijaber#GWT

Service Workers & DeltaJS

• Un client possède la version 1.2 de son application, il

demande la dernière version (1.3 située sur le serveur)

• Le serveur calcule un VCDIFF et envoie le patch

correspondant seulement au delta entre la 1.2 et 1.3

• Le Client met en cache en local la nouvelle version et

lance l’application

• Utilisé par Inbox

• Support de ES6

@samijaber#GWT

GWT 3.0

• Attention, quelques ruptures de compatibilité (aucune

rupture majeure depuis presque 10 ans!)

• JSInterop V2

• Elemental V2

• Ancien DevMode supprimé

• Collections encore plus rapides

• Support de DeltaJS, ServiceWorker

• Support de ES6 (modules, classes,…)

@samijaber#GWT

AngularJS

• Les avantages d’AngularJS : Productivité, Structuration du

code, MVC

• Les inconvénients : les performances, le scan permanent

du DOM au runtime, la boucle de $digest, difficile

d’optimiser le fonctionnement via un compilateur

• Réponse de Google => Singular

@samijaber#GWT

Qu’est-ce que Singular ?

• Pas un portage d’Angular en Java

• Réécriture complète d’un Framework Java basé sur

certains concepts d’Angular

• Parsing des templates à la compilation

• Résolution des directives à la compilation

• Pas de Dirty Checking

• Tire partie du compilateur GWT pour réduire la taille des

scripts

• Monte en charge pour les grosses applications

@samijaber#GWT

Singular

• API cross-plateformes

• Un template UI par

plateforme

• Web => HTML

• Android => Fichiers XML

• iOS => UiBuilder

• Partage des controleurs

sur toutes les plateformes

@YourTwitterHandle@YourTwitterHandle@YourTwitterHandle#YourSessionHashtag

En résumé

@YourTwitterHandle@YourTwitterHandle@YourTwitterHandle#YourSessionHashtag

Q & A