présentation devoxxfr 2015 sur gwt
TRANSCRIPT
![Page 1: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/1.jpg)
@samijaber#GWT
Le retour en force de GWT
![Page 2: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/2.jpg)
@samijaber#GWT
Speaker
@samijaber
![Page 3: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/3.jpg)
@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
![Page 4: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/4.jpg)
@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
![Page 5: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/5.jpg)
@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, …
![Page 6: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/6.jpg)
@samijaber#GWT
Nouveau site Web
http://www.gwtproject.org
![Page 7: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/7.jpg)
@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
![Page 8: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/8.jpg)
@samijaber#GWT
En taille de code généré ?
![Page 9: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/9.jpg)
@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, ….)
![Page 10: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/10.jpg)
@YourTwitterHandle@YourTwitterHandle@samijaber#gwt
Di, ci pas li dimo mitinant?
![Page 11: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/11.jpg)
@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);
}
![Page 12: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/12.jpg)
@samijaber#GWT
Héritage JavaScript/Java
• Une classe GWT s’intègre dans la chaîne d’héritage
JavaScript sans contrainte
![Page 13: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/13.jpg)
@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>
![Page 14: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/14.jpg)
@YourTwitterHandle@YourTwitterHandle@samijaber#gwt
Di, ci pas li dimo mitinant?
![Page 15: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/15.jpg)
@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 »
![Page 16: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/16.jpg)
@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()
![Page 17: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/17.jpg)
@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)
![Page 18: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/18.jpg)
@samijaber#GWT
Exemple GSS
Génère
Style.gssStyle.css
<set-configuration-property name=CssResource.enableGss value=true />
![Page 19: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/19.jpg)
@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é
![Page 20: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/20.jpg)
@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
![Page 21: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/21.jpg)
@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 !”
![Page 22: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/22.jpg)
@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)
![Page 23: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/23.jpg)
@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() }
![Page 24: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/24.jpg)
@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
![Page 25: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/25.jpg)
@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,…)
![Page 26: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/26.jpg)
@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
![Page 27: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/27.jpg)
@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
![Page 28: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/28.jpg)
@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
![Page 29: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/29.jpg)
@YourTwitterHandle@YourTwitterHandle@YourTwitterHandle#YourSessionHashtag
En résumé
![Page 30: Présentation DevoxxFR 2015 sur GWT](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a8ed271a28abae2b8b4744/html5/thumbnails/30.jpg)
@YourTwitterHandle@YourTwitterHandle@YourTwitterHandle#YourSessionHashtag
Q & A