Étude de cas – HTML5 dans deviantART muro

Mike Dewey
Mike Dewey

Introduction

Le 7 août 2010, deviantART a fêté ses 10 ans. Nous avons fêté notre anniversaire en lançant un outil de dessin HTML5 appelé deviantART muro. Cet outil peut être utilisé comme application Web autonome et comme outil de dessin léger pour ajouter des images aux commentaires sur un forum.

La communauté deviantART a accueilli ce nouvel outil de dessin avec beaucoup d'enthousiasme. Il génère désormais autant de trafic que certaines propriétés Web de taille respectable. Depuis son lancement, un nouveau dessin est envoyé à l'aide de deviantART muro toutes les cinq secondes environ. Il ne s'agit que du nombre de dessins terminés. De nombreux autres ont été commencés, mais pas enregistrés.

L'article suivant fournit des informations sur la façon dont nous utilisons le HTML5, pourquoi nous avons choisi d'utiliser les technologies que nous avons utilisées et les choses que j'ai découvertes en écrivant l'une des premières applications HTML5 complètes pour un site Web majeur.

Mon parcours

Fin 2005, j'étais l'un des développeurs responsables de l'outil de dessin utilisé par Draw Here. Il s'agissait d'un outil de "graffiti Web" lancé par un bookmarklet. Il permettait de dessiner des images sur n'importe quelle page Web. Draw Here a été créé à l'origine à l'aide de SVG (Firefox 1.5 bêta venait de sortir et était l'un des premiers navigateurs à prendre en charge SVG).

Dans Internet Explorer, nous créions des SVG en arrière-plan, mais nous affichions le dessin à l'aide de VML. WebKit n'était pas compatible avec le SVG à l'époque. J'ai donc porté notre code pour afficher le SVG à l'aide de canvas (qui était une nouvelle technologie que l'on ne voyait qu'à l'époque dans WebKit). À un moment donné, j'ai même créé un port pour que notre code SVG puisse être affiché dans les anciens navigateurs à l'aide d'un tas d'éléments div collés ensemble. (Bien sûr, il s'agissait plutôt d'une blague pour montrer que c'était possible, et c'était extrêmement lent à utiliser.)

À son apogée, Draw Here était utilisé pour créer environ 100 dessins par jour. Elle était suffisamment complète pour être considérée comme plus qu'un simple test, bien qu'elle n'ait pas la finition finale d'une application Web majeure. À la mi-2006, le projet a été abandonné, mais le site est toujours en ligne, principalement pour le plaisir.

Technologies utilisées par deviantART muro

En raison de mon expérience avec diverses technologies HTML5 à leurs débuts, j'ai été invité à devenir le développeur principal de deviantART muro. Toute personne lisant cet article peut probablement comprendre pourquoi nous avons choisi HTML5 plutôt qu'une technologie basée sur des plug-ins comme Silverlight ou Flash. Nous voulions un outil robuste qui utilisait des normes ouvertes.

Choisir entre Canvas et SVG

Nous avons décidé de créer la couche de dessin à l'aide d'un canevas. Certaines personnes peuvent se demander quand utiliser un canevas et quand utiliser un SVG. Les deux technologies présentent de nombreuses similitudes. Comme Draw Here l'a prouvé, les deux technologies peuvent être utilisées pour créer une application de dessin.

J'ai constaté que le format SVG est idéal si vous souhaitez conserver les poignées des objets que vous avez dessinés. Par exemple, si vous souhaitez que l'utilisateur puisse dessiner une ligne, puis faire glisser des éléments de la ligne pour en modifier la forme, cela serait assez simple à réaliser avec SVG. Mais la même chose est très malaisée avec le canevas.

Lorsque vous utilisez un canevas, vous y placez des éléments, puis vous les oubliez. Un canevas vierge et un canevas sur lequel on a dessiné pendant une heure se comportent exactement de la même manière dans le code et ont à peu près la même empreinte mémoire. Bien qu'un programme de dessin raster fonctionne généralement très bien avec la technologie "fire and forgets", il rend certaines choses difficiles. Par exemple, créer une fonction d'annulation rapide est beaucoup plus difficile dans un canevas que dans un SVG. Dans SVG, vous pouvez simplement conserver une poignée des dernières lignes que vous avez placées. Pour annuler, il vous suffit de retirer ces objets. Avec le canevas, une fois qu'une ligne a été peinte, vous ne savez pas ce qu'il y avait en dessous. Par conséquent, pour supprimer la ligne, vous devez redessiner la zone dans laquelle elle se trouvait.

Une fois que nous avons décidé d'utiliser HTML5 pour le canevas, nous avons décidé d'utiliser d'autres fonctionnalités HTML5 ici et là. Par exemple, nous avons utilisé localStorage pour suivre les paramètres du pinceau de l'utilisateur. Ainsi, une fois que l'utilisateur a configuré ses différents pinceaux comme il le souhaite, il peut revenir à ces paramètres la prochaine fois qu'il utilisera notre outil. Le localStorage nous permet de ne pas avoir à utiliser notre cookie ni à effectuer de requêtes au serveur pour obtenir ces préférences.

Utiliser Canvas

Canvas a beaucoup évolué au cours des cinq dernières années. Avec Draw Here, nous n'avons pas publié mon port de canevas, car les performances n'étaient pas bonnes. Je pense que vous pouvez affirmer sans risque que les performances sont probablement meilleures que vous ne le pensez. Effacer une grande partie du canevas et redessiner des formes complexes peut généralement se faire à une vitesse supérieure à la perception humaine. La seule chose que j'ai trouvée parfois trop lente est l'utilisation de getImageData() pour échantillonner des pixels. La vitesse de l'opération dépend évidemment de la taille du canevas, mais sur un canevas volumineux, effectuer une opération getImageData() au mauvais moment peut prendre suffisamment de temps pour qu'un utilisateur ait l'impression que l'application répond lentement.

Après avoir lu divers tutoriels sur le canevas, j'ai d'abord eu l'impression qu'il s'agissait d'un élément lourd qui devait être utilisé avec parcimonie, peut-être une ou deux fois par page. Je ne sais pas si tout le monde a ce sentiment, mais je l'ai eu, et je l'utilisais avec parcimonie lorsque nous avons commencé à coder deviantART muro. Cependant, au bout d'un certain temps, j'ai découvert que de nombreux petits éléments pouvaient être réalisés plus facilement avec un canevas. Par exemple, les modèles de notre application spécifiaient qu'un sélecteur de couleur devait être composé de deux triangles se chevauchant affichant les couleurs primaires et secondaires:

Sélecteur de couleur
Sélecteur de couleur

Mon premier réflexe a été de chercher un moyen de créer ce petit gadget d'interface utilisateur avec du code HTML et CSS traditionnel. Les experts en piratage CSS pourraient vous expliquer comment tout cela peut être fait avec CSS, mais la forme triangulaire des deux parties qui changent de couleur ne rend pas cela évident.

Lorsque j'ai pensé à utiliser simplement un canevas, j'ai créé le widget avec un seul élément DOM et quelques lignes de code JavaScript. deviantART Muro utilise des nœuds de canevas partout. Chaque calque est un canevas, et modifier l'ordre des calques ne consiste qu'à modifier l'indice Z. La palette de "navigateur" de zoom qui affiche une vue réduite de la zone de dessin n'est qu'un autre canevas qui appelle occasionnellement drawImage() à l'aide des canevas de calque comme images sources. Même le curseur de la zone de dessin (un cercle bicolore qui ajuste sa taille en fonction de la taille du pinceau et du zoom) est un canevas qui flotte sous la souris.

Nous avons été plus souples avec le canevas que pour les autres technologies HTML5, car la bibliothèque ExplorerCanvas de Google permet de simuler le canevas dans Internet Explorer. Ce qui m'amène à la section suivante.

Internet Explorer (IE)

La principale raison pour laquelle de nombreux sites Web majeurs n'utilisent pas encore HTML5 est qu'ils ne veulent pas perdre leurs utilisateurs Internet Explorer. Je suis sûr que la première question qui vient à l'esprit de la plupart des développeurs lorsqu'ils apprennent que deviantART a créé une application de dessin HTML5 est la suivante : "Qu'a-t-on fait pour IE ?"

Au début, nous avons décidé de faire de notre mieux pour que tout fonctionne dans Internet Explorer, mais nous avons décidé de ne plus utiliser le style de développement Web le moins commun. La communauté Web a adopté l'approche selon laquelle un site ne peut pas être lancé tant qu'il ne présente pas la même apparence dans tous les navigateurs connus. Les utilisateurs ne peuvent donc pas savoir quand leur navigateur est défaillant. Pour l'utilisateur moyen, les problèmes de vitesse sont attribués à sa connexion Internet, et chaque page s'affiche plus ou moins de la même manière. Il choisit donc son navigateur préféré en fonction de petits éléments arbitraires de l'interface utilisateur, comme la couleur du bouton Retour.

Nous avons décidé de créer toutes les fonctionnalités intéressantes qui nous venaient à l'esprit à l'aide de la spécification HTML5, d'essayer de les faire fonctionner dans Internet Explorer et, si cela ne fonctionnait pas, de simplement afficher une fenêtre modale expliquant que la fonctionnalité n'était pas disponible, car leur navigateur n'implémentait pas encore une norme Web.

Nous avons d'abord essayé de faire fonctionner les choses avec ExplorerCanvas (exCanvas) de Google. Il imite étonnamment bien le canevas pour la plupart des éléments. Il y a toutefois un inconvénient. Chaque trait effectué sur le canevas est un objet DOM dans la traduction VML sous-jacente. Pour la plupart des choses que vous pouvez essayer avec le canevas, cela convient, mais certains des pinceaux de deviantART Muro créent des formes en superposant de nombreux traits. Lorsque Internet Explorer est confronté à un code VML contenant des milliers de nœuds, même sur une machine rapide, il plante et s'arrête. Par conséquent, pour de nombreux appels de dessin, nous avons dû coder en VML, et utiliser des astuces pour concaténer les nœuds et utiliser la commande de déplacement pour spécifier où il devrait y avoir des espaces. De nombreux petits contrôles et autres éléments de l'interface utilisent une balise de canevas, car ces petites utilisations fonctionnaient généralement bien avec exCanvas.

En plus de faire fonctionner certaines fonctionnalités avec exCanvas, nous avons suggéré aux utilisateurs de continuer à utiliser leur version d'Internet Explorer s'ils installaient le plug-in Google Chrome Frame. Google Chrome Frame est un plug-in qui intègre le moteur de rendu de Google Chrome dans Internet Explorer. Du point de vue de l'utilisateur, il utilise toujours le navigateur qu'il connaît. En réalité, notre page est affichée avec les fonctionnalités HTML5 de Chrome et un JavaScript plus rapide.

Je savais qu'il était censé être facile de porter des éléments pour qu'ils fonctionnent avec Chrome Frame, mais je n'avais pas réalisé à quel point c'était simple. Il vous suffit d'ajouter une balise méta supplémentaire et… et c'est tout, les choses commencent à fonctionner dans IE.

Résumé

C'est un plaisir de travailler avec les nouvelles technologies de la spécification HTML5. Je dirais que tout ce que j'ai utilisé est prêt à être utilisé. Même si vous devez que tout fonctionne parfaitement sur IE, vous pouvez faire un nombre surprenant de choses en combinant canvas et exCanvas. Écrire une couche de traduction entre SVG et VML est également étonnamment réalisable. Une fois que vous commencez à utiliser cette technologie, c'est comme si vous pénétriez dans un tout autre monde.

Références