Présentation HTML 5 par Alain Duval et Cédric Beurtheret AU Normandy JUG

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

5. http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

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

8. HTML 5 Samples Normandy Jug - 14/12/2010

10. Permet de dessiner en JAVASCRIPT (image, animation, graphes…) & d’être mis en forme en CSS

11. Dessin 2D, 3D

12. Affranchissement à terme des plugins (Flash, VML, Silverligt)

13. Support natif du SVG

14. Balises <audio> & <video>

15. Standardisation de la lecture de flux multimédias (sans plugin)

16. Codecs audios: AAC, MP3, OGG VORBIS

17. Codecs videos: H264, VPM &OGG THEORANormandy Jug - 14/12/2010

18. Multimédia Normandy Jug - 14/12/2010

20. Pour le déplacement d’objet du bureau vers le navigateur

21. Try GMAIL attachments…

22. Geolocalisation

23. Récupération d’une coordonnée géographique

24. Autorisation nécessaire

25. Précision dépendante du provider (GPS, WIFI, Réseau IP…)

26. Web Socket

27. Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du protocole HTTP vers protocole WEB SOCKET)

28. Implémentation serveur nécessaire & pas encore standard

29. Offline Web

30. Cache d’application pour le stochage HTML, CSS, JS

31. Device API

34. CROSS WINDOW MESSAGING

35. WEB STORAGENormandy Jug - 14/12/2010

37. Application nomade devant supporter le mode déconnecté

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

44. Une des solutions au problème du SameOrigin Policy

45. Dans notre contexte projet, utilisé pour transmettre un contexte applicatif entre les fenêtres

46. principe de portail : séparation menu/habilitation des modules fonctionnels)

47. Bénéfices

48. Modularisation applicative

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

53. 3 niveaux:

54. SessionStorage: Volatile (durée de la session client)

55. LocalStorage: Persistant mais limité en taille (HashMap)

56. WebDatabase: Basée sur SQLLite ou IndexDb

57. Dans notre contexte projet, réplica de la base relationnelle de niveau 2, réduite à 1 utilisateur

58. Bénéfices

59. Gestion du mode déconnecté

60. Moins de roundtrip sur le serveur pour l’échange de contexte entre modules applicatifs

61. Plus la limite de taille des cookies (4k par domaine)

62. Attention!

63. Sécurité à prendre en compte (hachage de données)

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

69. Support navigateurs 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

72. 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

73. Questions ? Normandy Jug - 14/12/2010