DNG Consultinghttp://www.dng-consulting.com GWT et HTML 5 pour le mode Offline   Introduction & Présentation              ...
Speaker : Sami JABER Fondateur de la société DNG Consulting Auteur du livre "Programmation GWT 2" paru aux  éditions Eyr...
Un rappel sur GWT  Projet initialement créé par une petite équipe chez Google (qui assure encore la gouvernance)  Propos...
La philosophie de GWT Pour GWT, un Developpeur Web ne doit pas être ungourou de Javascript, HTML ou CSS GWT s’appuie sur...
10 lignes de code pour convaincre                                                                       Code Java         ...
Multi-navigateurs et multicanal             Un seul code qui génère ensuite               plusieurs scripts JavaScript    ...
GWT et HTML 5 GWT intègre les nouvelles API du standard HTML 5   AppCache (possibilité d’utiliser une application en mode...
Focus sur l’Offline  De plus en plus d’applications Web nécessitent une utilisation déconnectée    La 3G n’offre pas touj...
Application Cache Possibilité de « surfer » sur un site en local sans aucun aller/retour réseau   Le chargement est insta...
Un linker pour générer le Manifest                               Genérateur de code A chaque ajout d’une ressource statiq...
Evènements Application Cache La spécification propose plusieurs états et évènementspour détecter l’état du cache :  publi...
Le stockage de données Offline De nombreuses spécifications HTML 5 ont été crééespour répondre au problème de base de don...
Spécificités du LocalStorage Limitation de la taille maximum de la base à 5 Mo(paramétrable…mais pas toujours) Sérialisa...
GWT et l’Offline : duo parfait  GWT supporte les deux spécifications HTML5 Offline    Unifie le fonctionnement de l’AppCa...
Problématique de sérialisation JSon n’est pas une solution viable si l’on souhaitesupporter d’anciens navigateurs tels qu...
Problématique de sérialisation Pour contourner la limitation de Json.Stringify(), nousavons opté pour le format de sérial...
Contrats de services homogènespublic class SearchClientAction implements Action {                                         ...
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 ...
GWT, les mobiles et l’offline  GWT intègre nativement des outils pour le mobile  Mais aussi les principaux évènements mo...
Exemple d’application GWT                            Projet Cobra --Arkadin                            Projet Cobra Arkadi...
Prochain SlideShare
Chargement dans…5
×

Présentation GWT et HTML 5 pour l'Offline

2 395 vues

Publié le

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

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 395
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Entreprise JavaBeans 3.0
  • Entreprise JavaBeans 3.0
  • Entreprise JavaBeans 3.0 GWT est une techologie catalysée par AJAX et qui part du principe qu’un développeur Web doit pouvoir concevoir une application AJAX sans être être un expert JavaScript
  • Entreprise JavaBeans 3.0
  • Présentation GWT et HTML 5 pour l'Offline

    1. 1. DNG Consultinghttp://www.dng-consulting.com GWT et HTML 5 pour le mode Offline Introduction & Présentation v1.0
    2. 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. 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. 4. La philosophie de GWT Pour GWT, un Developpeur Web ne doit pas être ungourou de Javascript, HTML ou CSS GWT s’appuie sur un modèle de composants graphiquessimilaires aux applications clients lourds classiques GWT transforme ensuite de manière (quasi) transparentepour le développeur la génération du code JS/HTML à partirde Java GWT a été conçu pour être multi-navigateurs, ledéveloppeur ne se soucie pas des détails techniques de telou tel navigateur JavaScript devient une sorte d’assembleur du Web(optimisé, crypté et compressé) 4
    5. 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. 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. 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 pourl’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. 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. 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 demé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. 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. 11. Evènements Application Cache La spécification propose plusieurs états et évènementspour 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 à jourwindow.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. 12. Le stockage de données Offline De nombreuses spécifications HTML 5 ont été crééespour 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. 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. 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. 15. Problématique de sérialisation JSon n’est pas une solution viable si l’on souhaitesupporter 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érialisationdans 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 fournissantune implémentation JPA par-dessus LocalStorage 15
    16. 16. Problématique de sérialisation Pour contourner la limitation de Json.Stringify(), nousavons 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. 17. Contrats de services homogènespublic 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. 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. 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. 20. Exemple d’application GWT Projet Cobra --Arkadin Projet Cobra Arkadin 20

    ×