Upload
normandy-jug
View
2.393
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Présentation HTML 5 par Alain Duval et Cédric Beurtheret AU Normandy JUG
Citation preview
NORMANDY JUGHTML5 EN PROJETLa révolution maintenant!
Alain Duval (@aduval93)Cédric Beurtheret (@cbe317)14 Décembre 2010
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
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
Nouveautés HTML 5
Nouvelles balises http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Che
at-Sheet.pdf Dépréciation
<applet>, <frame>, <font>, <center>… Doc Type & CharSet simplifié
<!DOCTYPE html> <meta charset="utf-8">
querySelector & querySelectorAll Structuration sémantique du contenu
Simple & intuitif Facilité de parsing
Normandy Jug - 14/12/2010
HTML 5 Forms
Nouveaux type de champs de saisie… number, tel, url, email Date & Color Picket 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
HTML 5 Samples
Normandy Jug - 14/12/2010
Multimédia
<canvas> Permet de dessiner en JAVASCRIPT (image, animation,
graphes…) & d’être mis en forme en CSS Dessin 2D, 3D Affranchissement à terme des plugins (Flash, VML, Silverligt)
Support natif du SVG Balises <audio> & <video>
Standardisation de la lecture de flux multimédias (sans plugin) Codecs audios: AAC, MP3, OGG VORBIS Codecs videos: H264, VPM &OGG THEORA
Normandy Jug - 14/12/2010
Multimédia
Normandy Jug - 14/12/2010
API JS
12/10/2010 - 9
Drag Drop Pour le déplacement d’objet du bureau vers le navigateur Try GMAIL attachments…
Geolocalisation Récupération d’une coordonnée géographique Autorisation nécessaire Précision dépendante du provider (GPS, WIFI, Réseau IP…)
Web Socket Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du
protocole HTTP vers protocole WEB SOCKET) Implémentation serveur nécessaire & pas encore standard
Offline Web Cache d’application pour le stochage HTML, CSS, JS
Device API Accès à la caméra, charge de batterie…
API JS
12/10/2010 - 10
HTML5 en projet…
WEB WORKERS CROSS WINDOW MESSAGING WEB STORAGE
Normandy Jug - 14/12/2010
Contexte projet
Application de gestion de la relation client à usage des commerciaux Application nomade devant supporter le mode déconnecté Architecture 3 niveaux avec réplication de données
Internet3G Edge Network
Tablet PC
Tablet PC
Tablet PC
CHROMEGWT 2 + HTML 5
(WebWorkers, Cross Window Messaging, Web Storage)
TOMCATSQL SERVER
AS/400DB2/400
Normandy Jug - 14/12/2010
Démo Jug
Web Storage + Cross Windows Messaging + Web Workers in action…
Normandy Jug - 14/12/2010
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
Web Workers (code)
Code exécuté pour créer et lancer un Workerworker = new Worker('worker_twitter.js');worker.onmessage = function(event) {
trace('Worker recieved : ' + 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 'erreurthrow event.data
};
// On démarre le worker.worker.postMessage({'user' : user, 'count' : count});
Normandy Jug - 14/12/2010
Web Workers (code)
Code du Workeronmessage = function(event) {
//Reçoit le message de démarrage...
};
function send(obj) {// Envoi un objet ou une String à l’appelantpostMessage(obj);
}
Normandy Jug - 14/12/2010
Cross Window Messaging
API pour la communication de messages (texte, objet) entre windows, tabs & iframe Une des solutions au problème du Same Origin Policy
Dans notre contexte projet, utilisé pour transmettre un contexte applicatif entre les fenêtres principe de portail : séparation menu/habilitation des modules
fonctionnels) Bénéfices
Modularisation applicative 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
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 iframevar 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
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
Web Storage
Pour le stockage de données sur le navigateur 3 niveaux:
SessionStorage: Volatile (durée de la session client) LocalStorage: Persistant mais limité en taille (HashMap) WebDatabase: Basée sur SQLLite ou IndexDb
Dans notre contexte projet, réplica de la base relationnelle de niveau 2, réduite à 1 utilisateur
Bénéfices Gestion du mode déconnecté Moins de roundtrip sur le serveur pour l’échange de contexte entre modules applicatifs Plus la limite de taille des cookies (4k par domaine)
Attention! Sécurité à prendre en compte (hachage de données) Usage de l’API asynchrone pour les accès aux données (moins pénalisant)
Normandy Jug - 14/12/2010
Web Storage (code)
var db = null;try { if (window.openDatabase) {
db = openDatabase("Twitter", "1.0", "Twitter Feed", 200000); }
} catch(err) { }
Normandy Jug - 14/12/2010
Web Storage (code)
//Create tablefunction init() { 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
Web Storage (code)
//Read function read() { db.transaction(function(tx) { tx.executeSql("SELECT id, usertimeline, username, creationdate, text, avatar
FROM status where usertimeline = ? ORDER BY id DESC", [usertimeline], function(tx, result) {
//Utiliser les données lues },
function(tx, error) {//Erreur
return; }
); }); }
Normandy Jug - 14/12/2010
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
Support navigateurs
IE Firefox Safari Chrome Opera
Eléments HTML5 9.0 (Partiel) 4.0 (Partiel) 5.0 6.0 10.60
Canvas 9.0 2.0 3.0 1.0 9.64
SVG 9.0 3.0 4.0 1.0 9.64
Drag-Drop 8.0 3.5 5.0 6.0 10.60
Edition 8.0 (Partiel) 3.0 4.0 1.0 9.64
Applications déconnectées 9.x (?) 3.5 4.0 4.0 10.60
Stockage local 8.0 3.0 4.0 4.0 10.50
Base de données locale 9.x (?) 4.0 (IndexedDB) 4.0 (SQL) 4.0 (SQL) / 7.0 (IndexedDB) 10.50 (SQL)
Web workers 9.x (?) 3.5 4.0 4.0 10.60
Géolocalisation 9.x (?) 3.5 5.0 4.0 10.50
Web sockets Non 4.0 5.0 4.0 Non
Server Sent Events Non Non Non Non 9.64
Cross Window Messaging 8.0 3.0 4.0 2.0 9.64
File API Non 3.6 Non 6.0 Non
Capture API Non Non Non Non NonNormandy Jug - 14/12/2010
Support navigateurs
iPhone Android IE Firefox Safari Chrome Opera
Ogg Theora ✓(3.5) ✓(5.0) ✓(10.5)
WebM ✓ (9.0*) ✓ (4.0) ✓ (6.0) ✓ (10.6)
H.264 ✓ (3.0) ✓ (2.0) ✓ (9.0) ✓ (3.0) ✓ (5.0)
Ogg Vorbis ✓ ✓ ✓
MP3 ✓ ✓
AAC ✓ ✓ ✓ ✓ ✓ ✓ ✓
* Si le codec est installé sur la machine
Normandy Jug - 14/12/2010
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: Degrade gracefully (avec du code en +) Option 2: Code JS pour émuler les fonctions HTML5
Lecteur « Sublim Video » Librairie Javascript Kaazing 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
Ressources
http://dev.w3.org/html5/spec/Overview.html http://diveintohtml5.org http://www.html5rocks.com http://html5doctor.com http://html5test.com http://html5boilerplate.com http://html5demos.com Pro HTML 5 Programming (P. Lubbers) HTML 5 Up & Running (M. Pilgrim)
Normandy Jug - 14/12/2010
Questions
?
Normandy Jug - 14/12/2010