Présentation donnée au Google Developer Day à Nantes

1. DNG Consulting
http://www.dng-consulting.com
GWT et HTML 5 pour
le mode Offline
Introduction & Présentation
v1.0

2. Speaker : Sami JABER
 Fondateur de la société DNG Consulting
 Auteur du livre "Programmation GWT 2" paru aux
éditions Eyrolles
Seconde édition en librairie depuis Septembre 2012 avec la couverture
de GWT 2.5
 DNG Consulting : Société de conseil et de formation
spécialisée sur les technologies JEE et
.NET
Projet en mode agile pour plusieurs grands comptes
Forte expertise autour de GWT depuis 6 ans
2

3. Un rappel sur GWT
 Projet initialement créé par une petite équipe chez
Google (qui assure encore la gouvernance)
 Proposé en Open Source en 2006 (licence Apache)
 Très large communauté
Projet hébergé à l’adresse http://code.google.com/webtoolkit/
De nombreux livres, conférences et littérature sur le sujet
De plus en plus d’applications sont en cours de migration vers GWT
(Silverlight et Flash disparaissent peu à peu du marché)
 Téléchargé plus d’un million de fois (version 1.5 à 2.4)
 La plupart des entreprises du CAC 40 commencent à s’y
intéresser de près comme par exemple JCDecaux, Orange,
LVMH…
3

4. La philosophie de GWT
 Pour GWT, un Developpeur Web ne doit pas être un
gourou de Javascript, HTML ou CSS
 GWT s’appuie sur un modèle de composants graphiques
similaires aux applications clients lourds classiques
 GWT transforme ensuite de manière (quasi) transparente
pour le développeur la génération du code JS/HTML à partir
de Java
 GWT a été conçu pour être multi-navigateurs, le
développeur ne se soucie pas des détails techniques de tel
ou tel navigateur
 JavaScript devient une sorte d’assembleur du Web
(optimisé, crypté et compressé) 4

5. 10 lignes de code pour convaincre
Code Java
public class MyFirstProject implements EntryPoint {
public void onModuleLoad() {
final Label l = new Label("Mon Label");
Button b = new Button("Changer libellé");
b.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
l.setText("Libellé modifié");
}});
RootPanel.get().add(l);
Après click RootPanel.get().add(b); Génère
}
}
Code JS
5

6. Multi-navigateurs et multicanal
Un seul code qui génère ensuite
plusieurs scripts JavaScript
(les "permutations« )
Un seul
code
Mycode.java
Optimisé sans artifices
du type :
If (browser=FF) faire ceci
If (browser=IE) faire cela
6

7. GWT et HTML 5
 GWT intègre les nouvelles API du standard HTML 5
AppCache (possibilité d’utiliser une application en mode déconnecté)
Offline Storage (possibilité de stocker des données dans la base Offline)
CSS 3, les animations, les layout, …
 D’autres intégrations sont en cours, notamment :
WebGL (il existe un Quake développé en GWT)
Canvas
 Le projet « Elemental » vise à fournir un binding pour
l’ensemble des API HTML 5 pour GWT
Un pré-processeur extrait les contrats d’interface du standard HTML 5
pour générer des stubs GWT
Permet de prendre en compte en temps réel les évolutions HTML 5
7

8. Focus sur l’Offline
 De plus en plus d’applications Web nécessitent une
utilisation déconnectée
La 3G n’offre pas toujours la bande passante suffisante, notamment lors
d’un usage mobile
Plus l’application est importante, plus les scripts JS à télécharger sont
importants, coût au chargement
Coder pour l’offline sans passer par HTML revient à cibler 3 plateformes
différentes (Android, iOS, WinPhone)
 Avec un marché de plus en plus morcelé, HTML 5 devient
une nécessité économique
La spécification AppCache pour le chargement applicatif
La spécification LocalStorage pour la base de données déconnecté
8

9. Application Cache
 Possibilité de « surfer » sur un site en local sans aucun
aller/retour réseau
Le chargement est instantané, le serveur n’est plus sollicité pour des
échanges graphiques
 En mode Online, le navigateur s’appuie sur un fichier de
métadonnées listant les fichiers à pré-télécharger
La liste des ressources de ce fichier est
téléchargée dans le cache du navigateur
qui les stocke jusqu’à changement du fichier manifest
9

10. Un linker pour générer le Manifest
Genérateur de code
 A chaque ajout d’une ressource statique dans le projet,
une entrée est automatiquement ajoutée au fichier Manifest
Même dans le cas d’interfaces ClientBundle !
Les regroupements d’images (ImageBundle) sont également ajoutés en
phase de post compilation
10

11. Evènements Application Cache
 La spécification propose plusieurs états et évènements
pour détecter l’état du cache :
public enum Type {{
public enum Type
UNKNOWN("unknown"), CHECKING("checking"), CACHED("cached"),
UNKNOWN("unknown"), CHECKING("checking"), CACHED("cached"),
NO_UPDATE("noupdate"), DOWNLOADING("downloading"),
NO_UPDATE("noupdate"), DOWNLOADING("downloading"),
PROGRESS("progress"), UPDATE_READY("updateready"),
PROGRESS("progress"), UPDATE_READY("updateready"),
OBSOLETE("obsolete"), ERROR("error");
OBSOLETE("obsolete"), ERROR("error");
 Possibilité d’automatiser les mises à jour
window.applicationCache.addEventListener('updateready', function(e) {{
window.applicationCache.addEventListener('updateready', function(e)
if (window.appCache.status == appCache.UPDATEREADY) {{
if (window.appCache.status == appCache.UPDATEREADY)
// Un nouvel appCache est dispo, On le recharge
// Un nouvel appCache est dispo, On le recharge
window.applicationCache.swapCache();
window.applicationCache.swapCache();
if (confirm(Nouvelle version disponible! Reload?')) {{
if (confirm(Nouvelle version disponible! Reload?'))
window.location.reload();
window.location.reload();
}}
11

12. Le stockage de données Offline
 De nombreuses spécifications HTML 5 ont été créées
pour répondre au problème de base de données locale
IndexedDB : une sorte de base hiérarchique à base de fichier plat
- Support très faible de la part des navigateurs
Web SQL : une sorte de sqlite embarqué dans le navigateur
- Le W3C a abandonné cette spécification par manque d’alternative
Files API, Cookies, … : Pas ou peu de support dans IE
Web Storage et LocalStorage : support très large et mature
 Gagnant : LocalStorage, un simple dictionnaire textuel
localStorage.setItem(‘myKey', myValue);
localStorage.setItem(‘myKey', myValue);
var maValeur = localStorage.getItem(‘myKey');
var maValeur = localStorage.getItem(‘myKey');
localStorage.removeItem(‘myKey‘)
localStorage.removeItem(‘myKey‘)
12

13. Spécificités du LocalStorage
 Limitation de la taille maximum de la base à 5 Mo
(paramétrable…mais pas toujours)
 Sérialisation des objets complexes délicate, nécessité
de passer par un format de description tel que JSon
 Excellent support par les navigateurs
13

14. GWT et l’Offline : duo parfait
 GWT supporte les deux spécifications HTML5 Offline
Unifie le fonctionnement de l’AppCache sur la plupart des navigateurs
(grâce au Deferred Binding)
Rend consistant l’API LocalStorage pour prendre en compte les
spécificités (ou les bugs) des navigateurs (IE8 lance une exception dans
certains cas et ne supporte pas totalement le mécanisme standard)
Les types sérialisés côté clients sont les mêmes types que ceux stockés
côté serveur (le même POJO Java)
 La sérialisation est le sujet sensible de l’Offline
Avec LocalStorage, tout est chaîne de caractère, quel format choisir ?
JSon ? XML ? Du text plain ?
Comment unifier la sérialisation sachant que les services sont souvent
semblables en Offine et Online ? les entités serveur et clients aussi…
14

15. Problématique de sérialisation
 JSon n’est pas une solution viable si l’on souhaite
supporter d’anciens navigateurs tels que Firefox 3.6
Il n’est pas possible d’utiliser la méthode native JSON.Stringify() avec
certaines versions de Firefox 3.6 (limitation)
AutoBeans (API introduite dans GWT 2.1 et RequestFactory) n’utilise
pas Stringify() mais s’avère trop verbeux (les noms des propriétés
sont stockés dans le protocole)
 Les performances lors de la désérialisation/sérialisation
dans le localStorage peuvent être pénalisantes
Parfois nécessaire d’optimiser les requêtes côté client en créant des
index (comme une base de données)
 Petite parenthèse : Jboss Errai est un outil fournissant
une implémentation JPA par-dessus LocalStorage
15

16. Problématique de sérialisation
 Pour contourner la limitation de Json.Stringify(), nous
avons opté pour le format de sérialisation GWT-RPC 1.0
Fiable, performant et surtout ne nécessite aucun ajout de bibliothèque
supplémentaire côté client (Gson, gwt-json,…)
Les Custom Field Serializers sont générés en fonction des contrats
d’interface, cela alourdit la permutation mais simplifie les développements
Un générateur de code parcourt les interfaces de services et génère les
classes de sérialisation/désérialisation
16

17. Contrats de services homogènes
public class SearchClientAction implements Action {
ClientManagerServiceAsync
ClientManagerServiceAsync
private SearchClientCondition condition;
private AbstractAsyncCallback<SearchClientPagingResult> callback;
public void execute() {
if(ApplicationStateManager.get().isOnline()){
ServiceLocator.getSearchClientService().searchClient(condition, callback);
} else {
ServiceLocator.getLocalClientManager().searchClient(condition, callback);
}
}
public SearchClientAction initCallback() {
this.callback = new AbstractAsyncCallback<SearchClientPagingResult>("SearchClientAction") {
@Override
public void success(SearchClientPagingResult result) {
callback.onSuccess(result);
} Un seul et même
Un seul et même
@Override
public void failure(Throwable caught) { Contrat de service pour l’online et l’offline ! !
Contrat de service pour l’online et l’offline
callback.onFailure(caught);
}
}; return this;
}
public SearchClientAction setCondition(SearchClientCondition condition) {
this.condition = condition;
return this; 17
}}

18. Et les requêtes en Offline ?
 Il n’existe aucun langage de requête
On est logé à la même enseigne que les bases NoSQL
 Comment implémenter les mécanismes de jointure ?
 Comment s’assurer de la cohérence et de l’unicité des
clés (il n’y a pas de séquence partagée) ?
 Comment créer des projections ? Des regroupements ?
Tout est à faire manuellement !
Ne pas sous-estimer la charge
18

19. GWT, les mobiles et l’offline
 GWT intègre nativement des outils pour le mobile
 Mais aussi les principaux évènements mobiles
Touch Sensitive (zoom à deux doigts, déplacement, …)
Le click de souris est traité comme une activation du doigt (TouchEvent)
 L’implémentation des spécifications offline respecte ceux
des navigateurs (Safari sur iOS, Webkit sur Android)
19

20. Exemple d’application GWT
Projet Cobra --Arkadin
Projet Cobra Arkadin
20