Fallstudie: HTML5 in deviantART muro

Mike Dewey
Mike Dewey

Einführung

Am 7. August 2010 feierte deviantART seinen 10. Geburtstag. Anlässlich unseres Geburtstags haben wir das HTML5-Zeichentool deviantART muro veröffentlicht. Das Tool kann als eigenständige Webanwendung sowie als einfaches Zeichentool verwendet werden, um Forumkommentaren Bilder hinzuzufügen.

Die deviantART-Community hat dieses neue Zeichentool mit großer Begeisterung aufgenommen und das Tool selbst verzeichnet jetzt so viel Traffic wie einige Web-Properties mit ansehnlicher Größe. Seit der Einführung wird etwa alle fünf Sekunden eine neue Zeichnung über deviantART muro hochgeladen. Das ist nur die Anzahl der fertigen Zeichnungen. Viele weitere wurden begonnen, aber nicht gespeichert.

Im folgenden Artikel erfahren Sie, wie wir HTML5 verwenden, warum wir uns für die verwendeten Technologien entschieden haben und was ich beim Erstellen einer der ersten umfassenden HTML5-Anwendungen für eine große Website herausgefunden habe.

Hintergrundinformationen zu meiner Person

Ende 2005 war ich einer der Entwickler des Zeichentools, das in Draw Here verwendet wurde. Das Tool war ein „Web-Graffiti-Tool“, das über ein Lesezeichen gestartet wurde. Damit konnten Bilder auf beliebigen Webseiten gezeichnet werden. Draw Here wurde ursprünglich mit SVG erstellt (Firefox 1.5 Beta war gerade erschienen und einer der ersten Browser, die SVG unterstützten).

Im Internet Explorer wurde SVG im Hintergrund erstellt, die Zeichnung wurde aber mit VML gerendert. WebKit unterstützte SVG damals nicht, daher habe ich unseren Code so portiert, dass das SVG mit Canvas gerendert wurde. Das war damals eine neue Technologie, die nur in WebKit verfügbar war. Einmal habe ich sogar eine Portierung erstellt, damit unser SVG-Code in älteren Browsern mithilfe von zusammengeklebten Div-Elementen gerendert werden konnte. (Das war natürlich eher ein Scherz, um zu zeigen, dass es möglich ist, und es war auch ziemlich langsam.)

In der Blütezeit von Draw Here wurden damit etwa 100 Zeichnungen pro Tag erstellt. Sie war so weit fortgeschritten, dass sie mehr als nur ein Experiment war, auch wenn sie nicht die endgültige Ausarbeitung einer großen Webanwendung hatte. Mitte 2006 wurde das Projekt eingestellt, die Website ist aber noch heute online – hauptsächlich zum Spaß.

Von deviantART muro verwendete Technologien

Aufgrund meiner Erfahrung mit verschiedenen HTML5-Technologien in ihren Anfängen wurde ich gebeten, leitender Entwickler bei deviantART muro zu werden. Jeder, der diesen Artikel liest, kann wahrscheinlich nachvollziehen, warum wir uns für HTML5 und nicht für eine Plug-in-basierte Technologie wie Silverlight oder Flash entschieden haben. Wir wollten etwas Robustes und mit offenen Standards.

Canvas oder SVG?

Wir haben uns entschieden, die Zeichenebene mit Canvas zu erstellen. Manche Nutzer fragen sich vielleicht, wann sie Canvas und wann sie SVG verwenden sollten. Die beiden Technologien überschneiden sich in vielerlei Hinsicht. Wie Draw Here bewiesen hat, können beide Technologien verwendet werden, um eine Zeichenanwendung zu erstellen.

Ich habe festgestellt, dass SVG ideal ist, wenn Sie die Ziehpunkte für von Ihnen gezeichnete Objekte beibehalten möchten. Wenn Sie beispielsweise möchten, dass Nutzer eine Linie zeichnen und dann Teile der Linie ziehen können, um ihre Form zu ändern, ist das mit SVG ziemlich einfach. Das ist mit Canvas aber sehr umständlich.

Wenn Sie Canvas verwenden, fügen Sie Elemente auf dem Canvas hinzu und vergessen sie dann. Ein leeres Canvas und ein Canvas, auf dem eine Stunde lang gezeichnet wurde, verhalten sich im Code genau gleich und haben etwa denselben Arbeitsspeicherbedarf. Ein Rasterzeichnungsprogramm funktioniert in der Regel sehr gut mit der „Fire and Forget“-Technologie, macht aber bestimmte Dinge schwierig. So ist es beispielsweise in Canvas viel schwieriger, eine schnelle Undo-Funktion zu erstellen als in SVG. In SVG können Sie einfach einen Handle für die letzten Linien behalten, die Sie platziert haben. Wenn Sie die Aktion rückgängig machen möchten, müssen Sie diese Objekte einfach entfernen. Bei Canvas wissen Sie nicht, was sich unter einer Linie befand, nachdem sie gezeichnet wurde. Wenn Sie sie entfernen möchten, müssen Sie den Bereich, in dem sie sich befand, neu zeichnen.

Nachdem wir uns entschieden hatten, HTML5 für den Canvas zu verwenden, haben wir uns entschieden, hier und da auch andere HTML5-Funktionen zu nutzen. Ein Beispiel dafür ist die Verwendung von localStorage, um die Pinseleinstellungen der Nutzer im Blick zu behalten. So können Nutzer, nachdem sie ihre verschiedenen Pinsel so eingerichtet haben, wie sie sie mögen, bei der nächsten Verwendung unseres Tools auf diese Einstellungen zurückgreifen. Mit localStorage müssen wir unser Cookie nicht aufbrauchen oder Serverzugriffe ausführen, um diese Einstellungen abzurufen.

Canvas verwenden

Canvas hat sich in den letzten fünf Jahren stark weiterentwickelt. Bei Draw Here haben wir meinen Canvas-Port eigentlich nicht veröffentlicht, weil die Leistung nicht gut war. Ich denke, es ist sicher anzunehmen, dass es wahrscheinlich besser abschneidet, als Sie sich vorstellen. Das Löschen eines großen Canvas-Bereichs und das Zeichnen komplexer Formen kann in der Regel schneller erfolgen als die menschliche Wahrnehmung. Das einzige, was gelegentlich zu langsam ist, ist die Verwendung von getImageData() zum Erfassen von Pixeln. Die Geschwindigkeit des Vorgangs hängt natürlich von der Canvas-Größe ab. Bei einem großen Canvas kann es jedoch so lange dauern, bis getImageData() ausgeführt wird, dass Nutzer das Gefühl haben, dass die Anwendung langsam reagiert.

Nachdem ich mir verschiedene Canvas-Anleitungen angesehen hatte, hatte ich ursprünglich den Eindruck, dass es sich um ein schweres Element handelt, das sparsam verwendet werden sollte, vielleicht einmal oder zweimal auf einer Seite. Ich weiß nicht, ob das jeder versteht, aber ich habe es verstanden und habe es sparsam eingesetzt, als wir mit dem Programmieren von deviantART muro begonnen haben. Nach einiger Zeit stellte ich jedoch fest, dass es viele kleine Stellen gibt, an denen ein Canvas Ihnen viel Arbeit ersparen kann. In den Mockups für unsere App war beispielsweise eine Farbauswahl mit zwei überlappenden Dreiecken für Primär- und Sekundärfarben vorgesehen:

Farbauswahl
Farbauswahl

Mein erster Instinkt war, darüber nachzudenken, wie ich dieses kleine UI-Gadget mit herkömmlichem HTML und CSS erstellen könnte. CSS-Experten könnten darauf hinweisen, dass all das auch mit CSS möglich wäre. Aufgrund der Dreiecksform der beiden Teile, die die Farbe ändern, ist das aber nicht so offensichtlich.

Als mir einfiel, einfach einen Canvas zu verwenden, habe ich das Widget mit einem einzigen DOM-Element und ein paar Zeilen JavaScript erstellt. Im deviantART-Muro werden überall Canvas-Knoten verwendet. Jede Ebene ist ein Canvas und die Ebenenreihenfolge lässt sich einfach durch Ändern des Z-Index ändern. Die Zoompalette, die eine verkleinerte Ansicht des Zeichenbereichs zeigt, ist nur ein weiteres Canvas, das gelegentlich drawImage() mit den Ebenen-Canvas als Quellbilder aufruft. Sogar der Cursor im Zeichenbereich (ein zweifarbiger Kreis, der sich je nach Pinselgröße und Zoom anpasst) ist ein Canvas, der sich unter der Maus bewegt.

Wir waren bei Canvas großzügiger als bei anderen HTML5-Technologien, da die ExplorerCanvas-Bibliothek von Google es ermöglicht, Canvas im Internet Explorer zu simulieren. Das bringt mich zu meinem nächsten Abschnitt.

Internet Explorer (IE)

Der Hauptgrund dafür, dass noch nicht mehr große Websites HTML5 verwenden, ist, dass sie ihre Internet Explorer-Nutzer nicht verlieren möchten. Ich bin sicher, dass die erste Frage, die den meisten Entwicklern in den Sinn kommt, wenn sie hören, dass deviantART eine HTML5-Zeichenanwendung entwickelt hat, lautet: „Was wurde mit dem IE gemacht?“

Wir haben uns von Anfang an bemüht, die Website so zu gestalten, dass sie im Internet Explorer funktioniert. Wir wollten aber nicht mehr den Ansatz der Webentwicklung verfolgen, der auf dem kleinsten gemeinsamen Nenner basiert. Da die Web-Community den Ansatz verfolgt, dass eine Website erst veröffentlicht werden darf, wenn sie in jedem bekannten Browser gleich aussieht, können Nutzer nicht erkennen, wenn ihr Browser nicht ausreichend ist. Für den durchschnittlichen Nutzer werden Geschwindigkeitsprobleme auf die Internetverbindung zurückgeführt und jede Seite wird mehr oder weniger gleich gerendert. Daher entscheidet er sich für seinen bevorzugten Browser anhand von willkürlichen kleinen Dingen wie der Farbe der Schaltfläche „Zurück“.

Wir haben uns entschieden, jede coole Funktion zu erstellen, die uns mit der HTML5-Spezifikation in den Sinn kam, und zu versuchen, sie im Internet Explorer zum Laufen zu bringen. Wenn das nicht funktionierte, haben wir einfach ein Modalfenster eingeblendet, in dem erklärt wurde, dass die Funktion nicht verfügbar war, weil der Browser noch keinen Webstandard implementiert hatte.

Wir haben zuerst versucht, die Funktion mit dem ExplorerCanvas (exCanvas) von Google zu verwenden. Es kann Canvas für die meisten Dinge überraschend gut nachahmen. Es gibt jedoch einen Nachteil. Jeder Strich auf dem Canvas ist ein DOM-Objekt in der zugrunde liegenden VML-Übersetzung. Für die meisten Dinge, die Sie mit dem Canvas versuchen könnten, ist das in Ordnung. Einige der Pinsel von deviantART muro erstellen jedoch Formen, indem viele Striche übereinander gelegt werden. Wenn der Internet Explorer mit VML mit Tausenden von Knoten konfrontiert wird, stürzt er ab – selbst auf einem schnellen Computer. Aus diesem Grund mussten wir für viele der Zeichenaufrufe tatsächlich VML-Code schreiben und Tricks anwenden, um die Knoten zu verketten und mit dem Befehl „move“ anzugeben, wo Lücken sein sollten. Viele der kleinen Steuerelemente und sonstigen Elemente in der Benutzeroberfläche verwenden ein Canvas-Tag, da diese kleinen Anwendungen in der Regel gut mit exCanvas funktionierten.

Wir haben nicht nur einige Dinge mit exCanvas funktionieren lassen, sondern auch empfohlen, die Internet Explorer-Version weiter zu verwenden, wenn das Google Chrome Frame-Plug-in installiert ist. Google Chrome Frame ist ein Plug-in, mit dem die Rendering-Engine von Google Chrome in den Internet Explorer eingebettet wird. Aus Sicht des Nutzers verwendet er weiterhin den gewohnten Browser. Im Hintergrund wird die Seite jedoch mit den HTML5-Funktionen von Chrome und schnellerem JavaScript gerendert.

Ich wusste, dass es einfach sein sollte, Dinge für Chrome Frame zu portieren, aber ich wusste nicht, wie einfach. Sie fügen einfach ein zusätzliches Meta-Tag ein und… und das war's auch schon. Im IE funktioniert alles.

Zusammenfassung

Es macht Spaß, mit den neuen Technologien in der HTML5-Spezifikation zu arbeiten. Ich würde sagen, dass alles, was ich verwendet habe, definitiv einsatzbereit ist. Auch wenn alles im IE einwandfrei funktionieren muss, gibt es erstaunlich viele Möglichkeiten, Canvas und exCanvas zu kombinieren. Und das Erstellen einer Übersetzungsschicht zwischen SVG und VML ist überraschend einfach. Sobald Sie die Technologie verwenden, ist es, als würden Sie in eine ganz neue Welt eintauchen.

Verweise