Patrick Chanezon de Google est passé en France pour présenter l’évolution du développement Web et de la plate-forme lors de la conférence « Innovation Web » en décembre 2009. Cette conférence est organisée par l’association étudiante GET. Celle-ci a pour but la promotion des technologies Google auprès des étudiants et plus largement, des développeurs.
Patrick est évangéliste pour les API chez Google. Nous nous sommes croisés à Devoxx en novembre 2009, et c’est un très bon souvenir. Lors de cette conférence il a présenté les dernières évolutions du côté HTML5, qui devient une plate-forme de développement à part entière.
HTML5 devient une standardisation des capacités avancées des navigateurs. Depuis 2008, et l’arrivée des navigateurs modernes comme Safari, Chrome ou Firefox, le nombre de développement sur la plate-forme Web s’accélère très rapidement. Depuis un an, la plus part des navigateurs ont ajouté le support des nouvelles technologies, ce que l’on regroupe dans le terme HTML 5.
Les performances des machines virtuelles JavaScript ont augmenté d’un facteur 100 depuis le 3ème trimestre 2008. Patrick explique que Google a introduit un nouveau moteur JavaScript open-source appelé V8, et utilisé entre autre par Chrome. Là où Java grâce à un typage fort, permet des optimisations et donc de bonnes performances, JavaScript souffre d’un handicap lié à son caractère dynamique et faiblement typé.
JavaScript is a dynamic programming language: properties can be added to, and deleted from, objects on the fly. This means an object’s properties are likely to change. Most JavaScript engines use a dictionary-like data structure as storage for object properties – each property access requires a dynamic lookup to resolve the property’s location in memory. This approach makes accessing properties in JavaScript typically much slower than accessing instance variables in programming languages like Java and Smalltalk. In these languages, instance variables are located at fixed offsets determined by the compiler due to the fixed object layout defined by the object’s class. Access is simply a matter of a memory load or store, often requiring only a single instruction. (from Google V8 design page)
V8 va plus loin en générant du code machine directement sans passer par la génération de bytecodes. Le moteur dispose aussi d’un ramasse-miettes (Garbage Collector) afin de suivre finement le cycle de vie des objets. Cela me rappelle un problème de mémoire insoluble sur le moteur JScript d’Internet Explorer que nous avions trouvé en 2007, lié aux références circulaires. C’est l’une des raisons pour lesquelles il faut rester prudent avec GWT et les vieux navigateurs comme IE6.
HTML5 est une spécification comme explique Patrick Chanezon, qui ajoute un ensemble de nouvelles balises et de nouveaux attributs pour les balises existantes.
[…[HTML5 introduit huit nouvelles APIs qui pourront aider à créer des applications web et qui peuvent être utilisées ensemble avec de nouveaux éléments introduits pour les applications dont :
– une API de dessin 2D utilisé avec la nouvelle balise canvas;
– une API pour jouer des vidéos et des sons/musiques utilisé avec les nouvelles balises video et audio;
– une API utilisée pour les applications hors-lignes;
– une API d’édition en combinaison avec le nouvel attribut contenteditable;
– une API de drag and drop en combinaison avec l’attribut draggable;
– une API qui permet l’accès à l’historique et permet aux pages d’en ajouter pour prévenir les problèmes de bouton retour-en-arrière.Extrait de l’article HTML5 de Wikipedia
Pour les possibilités de tout ce qui est 2D avec la balise Canvas, Patrick montre le travaille de Paul Rouget, TechnoEvangelist pour Mozilla Corporation, et dont le site est une belle vitrine des possibilités des nouveaux navigateurs, capable de supporter HTML5.
Si vous avez Firefox, allez essayer vous-même ici l’application développée par Paul, qui est assez bluffante. Cette page donne une liste complète des différentes démonstrations HTML5.
Patrick explique ensuite les problèmes de droits dans les codecs vidéos et audios. Mozilla ne peut pas implémenter H264 par exemple, ou il faudrait verser des royalties. Le tag video est plus ou moins supporté selon les navigateurs. Patrick parle de Marc Pilgrim qui a écrit un article assez long, détaillant les différences entre les codecs, sur les différents formats vidéos, le tout en rapport avec HTML5. La mauvaise nouvelle est qu’il n’existe pas pour l’instant de combinaison de conteneurs (OGG,MP4,AVI) d’une part, de codecs d’autre part (H.264, MPEG4-ASP, Theora) et de codecs audios (MP3, AAC) qui fonctionne dans l’ensemble des navigateurs. Il faudra donc prévoir différentes combinaisons afin d’être certain que sa vidéo fonctionne dans la plupart des navigateurs.
Patrick montre alors la démonstration où l’on voit Tristan Nitot sur un fond vert. Regardez cette démonstration avec Firefox, vous verrez que Tristan est détouré en temps réel sur le deuxième Canvas. C’est cool non ?
Il y a d’autres démonstrations dans cet article si vous voulez tester par vous même.
Le code suivant suffit à transformer en pixel transparent, l’ensemble des pixels dans la gamme de couleur « vert-pomme » :
var processor = {
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
var self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
var self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
var l = frame.data.length / 4;
for (var i = 0; i < l; i++) {
var r = frame.data[i * 4 + 0];
var g = frame.data[i * 4 + 1];
var b = frame.data[i * 4 + 2];
if (g > 100 && r > 100 && b < 43)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}
};
(Adresse du code source : http://www.mozbox.org/pub/green/main.js)
Ce script utilise la fonction drawImage afin de dessiner pixel par pixel, chacun des pixels. La variable frame est un tableau rgb-alpha. Lors de l'itération, si le pixel actif est dans une plage de couleur correspondant au vert pomme, alors le pixel actif est transformé en transparent. Le code RGB du vert utilisé est ici 100,100,43. Et le tout en JavaScript bien entendu.
Patrick remonte ensuite une démonstration avec de la musique. Cela me rappelle il y a 15 ans et les démos sur Amiga, Atari ST et CPC6128. Là je passe pour un vieux, mais j'assume à fond.
Aujourd'hui il serait possible de refaire des démos, mais directement dans le navigateur Web.
Il nous montre ensuite des démos en 3D et du texture Mapping avec les fonctions 2D et des Canvas tirées d'un site Japonais. Il y a de la réflexion de texture, des effets de lumières, bref du lourd.
Concernant la 3D il y a 2 spécifications : O3D et WebGL. La première est une proposition de Google, et elle fonctionne grâce à un plugin. La deuxième, WebGL, fonctionne avec les dernières fonctions de Firefox. Pour l'instant il n'y a pas de standards, mais Google pousse O3D.
Le site Google O3D donne un bon nombre d'exemples tous assez impressionnant. J'ai installé le plugin O3D et je vous conseille la démo Beach.
Il montre ensuite une démo où le détecteur de mouvement du Mac, l'accéléromètre, est lié à une propriété d'un Canvas. Patrick bouge son Mac et nous voyons les rectangles d'une page Web se mettre à tourner. C'est plus une démonstration technique, que quelque chose de réellement utile.
La dernière démonstration de Paul Rouget est vraiment impressionnante. L'article complet de Paul détaille le fonctionnement, je vous laisse tester avec une version récente de Firefox.
Patrick parle aussi de Chrome Frame pour Internet Explorer. Ce plugin permet d'utiliser le moteur JavaScript de Chrome dans Internet Explorer, ce qui permet de ne pas changer ses habitudes (ah ah ah) et de conserver ce bel outil qu'est Internet Explorer (ah ah ah je me plie en 4). Bon...
Fin de la présentation de Patrick Chanezon.
Merci beaucoup !
Conclusion
L'apport d'un standard comme HTML5 va accélérer le déploiement d'applications complètes. Il reste encore des points à régler concernant les codecs vidéos, audios et les formats. La balise Canvas permet de faire réellement de la 2D sans plugins externes dans le navigateur. Les moteurs JavaScript proposent aujourd'hui des performances bien supérieures à ce qui se faisait il y a encore 2 ans.
Je pense qu'il ne faut pas enterrer la solution Flash d'Adobe, open-source depuis quelques années. Des outils libres existent (swfmill, motion-twin action script compiler, le site OSFlash) qui permettent de développer librement en Flash. J'ai le sentiment que le développeur n'a jamais vraiment regardé Flash et le langage ActionScript. Et il semble découvrir dans l'univers HTML5 et le JavaScript des fonctions qui existent dans le monde Flash depuis 3 ans. D'un autre côté, avoir un standard libre et ouvert est une excellente nouvelle. J'espère seulement que la compétition entre les navigateurs respectera les standards, afin de ne pas retomber sur des problèmes de compatibilité cross-navigateur comme il y a 10 ans. Je dirai aux développeurs Java de regarder la plate-forme Flex, qui offre déjà de quoi construire des applications d'entreprise. HTML5 ne proposera des solutions standards et outillés d'ici 2 ans je pense. Nous en sommes encore à la phase exploratoire. Nous n'avons pas encore attaqué la pente des early-adopters et des sites HTML5.
Tout reste à faire.
Références
- La vidéo de la conférence enregistrée le 11 décembre 2009 à l'EFREI
- Site officiel du projet V8, moteur Javascript open-source : http://code.google.com/intl/fr/apis/v8/intro.html
- Le site de Mark Pilgrim est une mine d'explication sur HTML5 : http://diveintohtml5.org
- A voir avec Firefox 3.6 : le site des démonstrations HTML5 par Paul Rouget sur Mozilla.org
On retrouve la plupart des vidéos de Paul sur cette page J’aime bien la démo de « Dynamic content injection ». Pour la compatibilité x-browser des vidéos, NetTuts a récemment pulié un article intéressant qui explique comment supporter
multi browser en conservant la compatibilité flash.Merci pour tout 🙂
Concernant la balise canvas lié à l’accéléromètre du macbook, je pense que ça peut être utile sur des pc-tablet ou des tablettes (bien que cela soit géré nativement je pense)