HTML5 en projet

NormANDY JUGHTML5 en projet
La 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!

Nouveautés HTML 5
Nouvelles balises
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
Dépréciation
<applet>, <frame>, <font>, <center>…
Doc Type & CharSet simplifié
<!DOCTYPE html>
<metacharset="utf-8">
querySelector & querySelectorAll
Structuration sémantique du contenu
Simple & intuitif
Facilité de parsing

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

HTML 5 Samples

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

Multimédia

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

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
Internet
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)

Démo Jug
Web Storage + Cross Windows Messaging + Web Workers in action…

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

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});

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);
}

Cross Window Messaging
API pour la communication de messages (texte, objet) entre windows, tabs & iframe
Une des solutions au problème du SameOrigin 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équence

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, "*");
}
}

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);

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)

Web Storage (code)
var db = null;
try {
if (window.openDatabase) {
db = openDatabase("Twitter", "1.0", "TwitterFeed", 200000);
}
} catch(err) { }

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
}
);
});
}

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;
}
);
});
}

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
}
);
}
);
}

Support navigateurs

Support navigateurs
* Si le codec est installé sur la machine

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
…

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)

Questions
?

HTML5 en projet

by Normandy JUG

Accessibility

Upload Details

Usage Rights

1 Embed 134

Statistics

HTML5 en projet Presentation Transcript