Présentation
Le 7 août 2010, deviantART a fêté son 10e anniversaire. Pour fêter notre anniversaire, nous avons lancé un outil de dessin HTML5 appelé deviantART muro. Cet outil peut être utilisé comme une application Web autonome ou comme un outil de dessin léger permettant d'ajouter des images aux commentaires sur un forum.
La communauté deviantART a accueilli ce nouvel outil de dessin avec beaucoup d'enthousiasme. L'outil lui-même enregistre désormais autant de trafic que certaines propriétés Web de taille correcte. Depuis son lancement, un nouveau dessin est envoyé avec deviantART muro toutes les cinq secondes environ. Il s'agit uniquement du nombre de dessins terminés ; beaucoup d'autres avaient commencé et n'ont pas été enregistrés.
L'article suivant donne des informations générales sur la façon dont nous utilisons le langage HTML5, sur les raisons pour lesquelles nous avons choisi d'utiliser ces technologies et sur ce que j'ai découvert lors du développement de l'une des premières applications HTML5 complètes pour un grand site Web.
Mon arrière-plan
Fin 2005, j'étais l'un des développeurs responsable de l'outil de dessin utilisé par Draw Here. Il s 'agissait d'un outil de création de graffitis Web lancé par un favori intelligent. Il était utilisé pour dessiner des images sur toutes les pages Web. Draw Here a été initialement créé à l'aide du SVG (Firefox 1.5 bêta venait de sortir ; c'était l'un des premiers navigateurs à prendre en charge le format SVG).
Dans Internet Explorer, nous créions le format SVG en arrière-plan, mais nous affichions le dessin à l'aide de VML. WebKit n'était pas compatible avec SVG à l'époque. J'ai donc porté notre code pour afficher le SVG à l'aide du canevas (une nouvelle technologie utilisée uniquement dans WebKit à l'époque). À un moment donné, j'ai même créé un port pour afficher notre code SVG sur d'anciens navigateurs à l'aide d'un grand nombre d'éléments div collés ensemble. (Bien sûr, il s'agissait plutôt d'une blague pour montrer qu'il pouvait être fait et que son utilisation était terriblement lente.)
À son apogée, Draw Here était utilisé pour réaliser environ 100 dessins par jour. Il était suffisamment complet pour être considéré comme plus qu'un test, bien qu'il ne soit pas au point final d'une application Web majeure. Mi-2006, le projet a été abandonné, mais le site est toujours en train de rafraîchir aujourd'hui, principalement pour les sourires.
Technologies utilisées par deviantART Muro
Étant donné que j'utilisais différentes technologies HTML5 à mes débuts, on m'a demandé de devenir développeur principal de deviantART muro. Ceux qui lisent cet article comprennent probablement pourquoi nous avons décidé d'opter pour HTML5, plutôt que pour une technologie basée sur des plug-ins, comme Silverlight ou Flash. Nous voulions une solution robuste et basée sur des normes ouvertes.
Choisir entre Canvas et SVG
Nous avons décidé de créer le calque de dessin à l'aide du canevas. Certaines personnes se demandent s'il est judicieux d'utiliser Dessin ou SVG. Il existe de nombreuses similitudes entre les possibilités offertes par ces deux technologies. Comme l'a prouvé Draw Here, les deux technologies peuvent être utilisées pour créer une application de dessin.
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 tracer une ligne, puis faire glisser des fragments de la ligne pour en modifier la forme, l'utilisation du SVG est relativement simple. Mais la même chose est très gênante avec le canevas.
Lorsque vous utilisez un canevas, vous déclenchez des éléments sur le canevas, puis vous oubliez de le faire. Une toile vierge et une toile dessinée pendant une heure se comportent exactement de la même manière dans le code, et elles ont à peu près la même quantité de mémoire. Même si un programme de dessin matriciel fonctionne généralement très bien avec le feu et oublie la technologie, il rend certaines choses difficiles. Par exemple, créer une fonction d'annulation rapide est beaucoup plus difficile dans le canevas qu'en SVG. Dans SVG, vous pouvez conserver une poignée sur les dernières lignes que vous avez placées. Pour annuler, il suffit de retirer ces objets. Avec le canevas, une fois qu'une ligne a été peinte, vous ne savez pas ce qu'elle contient. Pour la supprimer, vous devez donc redessiner la zone dans laquelle elle se trouvait.
Une fois que nous avons pris connaissance de la puce et décidé d'utiliser HTML5 pour les canevas, nous avons décidé d'utiliser ici et là de petits fragments d'autres fonctionnalités HTML5. Par exemple, nous avons utilisé localStorage pour suivre les paramètres de pinceau de l'utilisateur. Ainsi, une fois qu'ils ont configuré leurs différents pinceaux comme ils le souhaitent, ils peuvent revenir à ces paramètres la prochaine fois qu'ils utilisent notre outil. localStorage signifie que nous n'avons pas besoin d'utiliser notre cookie ni d'effectuer de trajet vers le 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. Nous pouvons affirmer qu'elle est probablement plus performante que vous ne l'imaginez. En général, il est plus rapide de nettoyer un grand espace sur le canevas et de redessiner des formes compliquées qu'avec une perception humaine. La seule chose que j'ai trouvée parfois trop lente, c'est d'utiliser getImageData() pour échantillonner les pixels. La vitesse de l'opération dépend évidemment de la taille du canevas, mais sur un grand canevas, exécuter getImageData() au mauvais moment peut prendre suffisamment de temps pour que l'utilisateur ait l'impression que l'application est lente à répondre.
Après avoir lu différents tutoriels sur les canevas, j'ai au départ eu l'impression que c'était une application lourde à utiliser avec parcimonie, peut-être une ou deux fois par page. Je ne sais pas si tout le monde a ce sens, mais je l'ai fait, alors je l'ai utilisé avec parcimonie lorsque nous avons commencé à coder deviantART muro. Mais après un moment, j'ai découvert qu'il existe de nombreux petits endroits où une toile peut vous faire économiser beaucoup d'efforts. Par exemple, les maquettes de notre application spécifiaient qu'il devait y avoir un sélecteur de couleur composé de deux triangles superposés affichant des couleurs primaires et secondaires:
J'ai tout d'abord réfléchi à la façon de créer ce petit génie de l'interface utilisateur avec du code HTML et CSS traditionnel. Les personnes douées pour pirater les CSS peuvent vous montrer que tout cela peut se faire avec le CSS, mais la forme triangulaire des deux parties qui changent de couleur ne le rend pas si évident.
Lorsque j'ai eu l'idée d'utiliser simplement un canevas, j'ai créé le widget avec un seul élément DOM et quelques lignes de JavaScript. DeviantART muro utilise des nœuds de canevas partout. Chaque couche est un canevas. Pour modifier l'ordre des calques, il suffit de changer le z-index. La palette "navigator" de zoom qui affiche une vue réduite de la zone de dessin n'est qu'un autre canevas qui appelle parfois drawImage() en utilisant les canevas de calques comme images sources. Même le curseur de la zone de dessin (un cercle bicolore dont la taille s'ajuste en fonction de la taille du pinceau et du zoom) est un canevas qui flotte sous la souris.
L'utilisation des canevas est plus souple que celle d'autres technologies HTML5, car la bibliothèque ExplorerCanvas de Google permet de simuler des canevas dans Internet Explorer. Cela m'amène à la section suivante.
Internet Explorer (IE)
Si de nombreux sites Web importants n'utilisent pas encore HTML5, c'est parce qu'ils ne veulent pas perdre leurs utilisateurs d'Internet Explorer. Je suis sûr que la première question que la plupart des développeurs se posent lorsqu'ils apprennent que deviantART a créé une application de dessin HTML5 est la suivante : "Qu'est-ce qui a été fait concernant IE ?"
Au début, nous avons décidé que nous allions faire de notre mieux pour faire fonctionner les choses dans Internet Explorer, mais que nous utilisions le style de développement Web le moins courant. Étant donné que la communauté Web a adopté l'approche qu'un site ne peut pas se lancer tant qu'il n'a pas la même apparence sur tous les navigateurs connus, les utilisateurs ne peuvent pas savoir si leur navigateur est manquant. Pour l'utilisateur moyen, les problèmes de vitesse sont attribués à la connexion Internet, et chaque page s'affiche plus ou moins de la même manière. Ils choisissent donc leur navigateur préféré en fonction de petites choses d'interface utilisateur arbitraires, comme la couleur du bouton "Retour".
Nous avons décidé de créer une fonctionnalité intéressante qui nous vient à l'esprit à l'aide de la spécification HTML5 et de la faire fonctionner dans Internet Explorer. Si cela ne pouvait pas fonctionner, nous affichons simplement une fenêtre modale expliquant que la fonctionnalité n'était pas disponible, car le navigateur n'a pas encore implémenté de norme Web.
Nous avons d'abord essayé de faire fonctionner les choses avec ExplorerCanvas (exCanvas) de Google. Il est étonnamment efficace pour reproduire le canevas dans la plupart des cas. Elle a cependant un inconvénient. Chaque trait effectué sur le canevas est un objet DOM dans la translation VML sous-jacente. C'est bien pour la plupart des choses que vous pouvez essayer avec les canevas, mais certains des pinceaux de deviantART Muro créent des formes en superposant de nombreux traits. Lorsqu'Internet Explorer est confronté à un VML contenant des milliers de nœuds, même sur une machine rapide, il tombe en panne et s'éteint. De ce fait, pour de nombreux appels de dessin, nous avons dû coder dans un VML réel et utiliser des astuces qui consistent à concaténer les nœuds et à utiliser la commande "move" pour spécifier où se trouver des écarts. Un grand nombre des petites commandes et des éléments de l'interface utilisent une balise "canvas", car ces petites utilisations fonctionnaient généralement bien avec exCanvas.
En plus d'assurer le fonctionnement d'exCanvas, nous avons suggéré aux utilisateurs de continuer à utiliser leur version d'Internet Explorer en installant 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, mais, en dessous, notre page s'affiche avec les fonctionnalités HTML5 de Chrome et un code JavaScript plus rapide.
Je savais qu'il était censé être facile de transférer 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'insérer une balise Meta supplémentaire et voilà, tout fonctionne dans IE.
Résumé
C'est un tel plaisir de travailler avec les nouvelles technologies de la spécification HTML5. Je dirais que tout ce que j'ai utilisé est certainement prêt pour un lancement grand public. Même si vous avez besoin que tout fonctionne parfaitement sur IE, il existe un nombre étonnant de choses que vous pouvez faire en combinant canevas et exCanvas. L'écriture d'une couche de translation entre SVG et VML est également étonnamment faisable. Une fois que vous commencez à utiliser cette technologie, c'est comme si vous pénétriez dans un tout nouveau monde.
Références
- deviantART muro
- Forum de DeviantART où vous pouvez dessiner (connexion requise)
- ExplorerCanvas
- Google Chrome Frame