1. NormANDY JUGHTML5 en projet La révolution maintenant! Alain Duval (@aduval93) Cédric Beurtheret(@cbe317) 14 Décembre 2010
2. Qui sommes nous ? OBJECTIF, spécialiste de l’ingénierie projet JAVA EE Alain Duval, Directeur Technique Cédric Beurtheret, Expert JAVA EE Normandy Jug - 14/12/2010
3. HTML5 genèse Une longue attente depuis 1998 (HTML 4) … Une spécification qui a démarrée en 2004… & qui ne sera finale que dans plusieurs années (2012 ?) Un triple effort (W3C, IETF, WHATWG) Une vision basée sur la compatibilité, l’utilité, & l’intéropérabilité End of party for plugins … and javascript code to enforce the rules! Une révolution dixit les grands acteurs du WEB & JAVA Un support grandissant de la plupart des navigateurs Pourquoi attendre encore ? HTML 5, c’est maintenant! Normandy Jug - 14/12/2010
7. HTML 5 Forms Nouveaux type de champs de saisie… number, tel, url, email Date & ColorPicket Slider … apport des navigateurs Nouveaux attributs PlaceHolder, AutoComplete, AutoFocus… Gestion de la validation (attributs & API) Ne peut pas remplacer complètement la validation serveur! Réel effort de compatibilité Si le browser ne supporte pas les nouveaux types, ils sont dégradées en type TEXT Normandy Jug - 14/12/2010
38. Architecture 3 niveaux avec réplication de donnéesInternet 3G Edge Network Tablet PC Tablet PC Tablet PC AS/400 DB2/400 TOMCAT SQL SERVER CHROME GWT 2 + HTML 5 (WebWorkers, Cross Window Messaging, Web Storage) Normandy Jug - 14/12/2010
39. Démo Jug Web Storage + Cross Windows Messaging + Web Workers in action… Normandy Jug - 14/12/2010
40. Web Workers API pour lancer des scripts JS en tâche de fond Dans notre contexte projet, utilisé pour effectuer des tâches de synchronisation de données à intervalle régulier Bénéfices Parallélisation des tâches Evite de faire une multitude de timer Normandy Jug - 14/12/2010
41. Web Workers (code) Code exécuté pour créer et lancer un Worker worker = new Worker('worker_twitter.js'); worker.onmessage = function(event) { trace('Workerrecieved : ' + event.data); // event.data contient le message envoyé par le Worker : // - soit une String // - soit un objet. ... }; worker.onerror = function(event) { // event.data contient le 'erreur throwevent.data }; // On démarre le worker. worker.postMessage({'user' : user, 'count' : count}); Normandy Jug - 14/12/2010
42. Web Workers (code) Code du Worker onmessage = function(event) { //Reçoit le message de démarrage ... }; functionsend(obj) { // Envoi un objet ou une String à l’appelant postMessage(obj); } Normandy Jug - 14/12/2010
49. Sécurité des échanges: le message contient le domaine de l’émetteur, le récepteur peut réagir en conséquenceNormandy Jug - 14/12/2010
50. Cross Window Messaging (code) Code dans la fenêtre principale // Création de la fenêtre secondaire (ici une windows, //mais ça aurait pu être une iframe var consoleWindows = window.open( "http://localhost:90/demo_jug/debug.html", "Debug", "menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes"); function trace(info) { // Envoi un message à la fenêtre secondaire. if (consoleWindows != 'undefined') { consoleWindows.postMessage(info, "*"); } } Normandy Jug - 14/12/2010
51. Cross Window Messaging (code) Code dans la fenêtre secondaire // Reception du message // Pour répondre à la fenêtre principale, il faut utiliser // e.sender.postMessage() window.addEventListener("message", function(e){ document.getElementById("debug").innerHTML = document.getElementById("debug").innerHTML + "<br/>" + e.data; }, false); Normandy Jug - 14/12/2010
64. Usage de l’API asynchrone pour les accès aux données (moins pénalisant)Normandy Jug - 14/12/2010
65. Web Storage (code) var db = null; try { if (window.openDatabase) { db = openDatabase("Twitter", "1.0", "TwitterFeed", 200000); } } catch(err) { } Normandy Jug - 14/12/2010
66. Web Storage (code) //Create table functioninit() { db.transaction(function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, usertimeline TEXT, username TEXT, creationdate TEXT, text TEXT, avatar TEXT)", [], function(result) { //Par exemple lire le contenu de la table }, function(tx, error) { //Traiter l'erreur } ); }); } Normandy Jug - 14/12/2010
67. Web Storage (code) //Read functionread() { db.transaction(function(tx) { tx.executeSql("SELECT id, usertimeline, username, creationdate, text, avatar FROM statuswhereusertimeline = ? ORDER BY id DESC", [usertimeline], function(tx, result) { //Utiliser les données lues }, function(tx, error) { //Erreur return; } ); }); } Normandy Jug - 14/12/2010
68. Web Storage (code) //insert function(arStatus, callback) { var status = arStatus.pop(); var sql = "INSERT INTO status (id, usertimeline, username, text, creationdate, avatar) VALUES (?,?,?,?,?,?)"; db.transaction(function (tx) { tx.executeSql( sql, status, function(tx, result){ //Continuer }, function(tx, error){ //Erreur } ); } ); } Normandy Jug - 14/12/2010
70. Support navigateurs * Si le codec est installé sur la machine Normandy Jug - 14/12/2010
71. HTML5 maintenant! Pourquoi se priver de ces fonctions dès lors que l’on maîtrise le navigateur. Si on ne maîtrise pas le navigateur: Option 1: Degradegracefully (avec du code en +) Option 2: Code JS pour émuler les fonctions HTML5 Lecteur « SublimVideo » Librairie JavascriptKaazing pour les WebSockets (flash) Librairie Jstorage pour le stockage des données Modernizr (librairie de détection des fonctionnalités supportées) HTML5 Boilerplate => rassemble l’ensembles des librairies d’émulation, et de bonnes pratiques HTML5 … Normandy Jug - 14/12/2010