Fallstudie: HTML5 in deviantART muro

Mike Dewey
Mike Dewey

Einleitung

Am 7. August 2010 feierte deviantART seinen 10. Geburtstag. Wir feierten unseren Geburtstag mit der Einführung des HTML5-Zeichentools deviantART muro. Das Tool kann als eigenständige Webanwendung sowie als einfaches Zeichentool zum Hinzufügen von Bildern zu Forumskommentaren verwendet werden.

Die deviantART-Community begrüßte dieses neue Zeichentool mit großer Begeisterung, und das Tool selbst verzeichnet mittlerweile genauso viel Traffic wie einige recht große Web-Properties. Seit der Einführung wird mit deviantART muro etwa alle fünf Sekunden eine neue Zeichnung eingereicht. Dies ist nur die Anzahl der fertigen Zeichnungen. Viele weitere wurden begonnen und nicht gespeichert.

Im folgenden Artikel erfahren Sie mehr darüber, wie wir HTML5 einsetzen, warum wir uns für unsere Technologien entschieden haben und was ich beim Schreiben einer der ersten vollständigen HTML5-Anwendungen für eine große Website entdeckt habe.

Hintergrundinformationen zu meiner Person

Ende 2005 war ich einer der Entwickler, die für das Zeichentool Draw Here verantwortlich waren. Das Tool war ein „Web Graffiti“-Tool, das über ein Lesezeichen heruntergeladen wurde. Sie wurde verwendet, um Bilder auf Webseiten zu zeichnen. Die Funktion zum Zeichnen wurde ursprünglich mit SVG erstellt. Die Betaversion von Firefox 1.5 wurde gerade veröffentlicht und war einer der ersten Browser, der SVG unterstützt.

Im Internet Explorer haben wir zwar im Hintergrund SVG erstellt, die Zeichnung aber mit VML gerendert. Da WebKit SVG damals nicht unterstützt hat, habe ich unseren Code so portiert, dass das SVG mit Canvas gerendert wird. Das war eine neue Technologie, die damals nur in WebKit verfügbar war. Irgendwann habe ich sogar einen Port erstellt, mit dem unser SVG-Code in älteren Browsern mit einer Reihe von zusammengefügten div-Elementen gerendert werden konnte. (Das war natürlich eher ein Scherz, um zu zeigen, dass es möglich ist, und die Nutzung war ziemlich langsam.)

In seiner Blütezeit wurde „Draw Here“ genutzt, um etwa 100 Zeichnungen pro Tag anzufertigen. Sie war so vollständig, dass sie mehr als nur ein Experiment genannt werden konnte, auch wenn sie nicht den letzten Schliff einer großen Webanwendung bietet. Mitte 2006 wurde das Projekt aufgegeben, obwohl es auch heute noch hinktet – vor allem nur aus Spaß.

Von deviantART muro verwendete Technologien

Da ich anfangs verschiedene HTML5-Technologien einsetzte, wurde ich als leitender Entwickler für deviantART muro zuständig. Jeder, der diesen Artikel liest, weiß wahrscheinlich, warum wir uns für HTML5 und nicht für eine auf Plug-ins basierende Technologie wie Silverlight oder Flash entschieden haben. Wir wollten etwas robustes Gerät mit offenen Standards.

Zwischen Canvas und SVG entscheiden

Wir beschlossen, die Zeichenebene mit Canvas zu erstellen. Manche fragen sich vielleicht, wann sie Canvas und SVG nutzen sollten. Es gibt viele Überschneidungen bei den Möglichkeiten, die diese beiden Technologien bieten. Wie Draw Here gezeigt hat, lassen sich beide Technologien zur Erstellung einer Zeichenanwendung nutzen.

Ich habe festgestellt, dass sich SVG hervorragend eignet, um Ziehpunkte an gezeichneten Objekten zu behalten. Wenn Sie beispielsweise möchten, dass der Nutzer eine Linie zeichnen und dann Teile der Linie ziehen kann, um ihre Form zu ändern, wäre dies mit SVG ziemlich einfach. Natürlich ist es auch sehr peinlich, mit Canvas zu arbeiten.

Beim Canvas werden Dinge auf den Canvas ausgelöst und dann vergessen. Ein leerer Canvas und ein Canvas, der eine Stunde lang gezeichnet wurde, verhalten sich im Code genauso wie der gleiche und haben ungefähr denselben Speicherbedarf. Ein Raster-Zeichenprogramm funktioniert zwar meist sehr gut mit dem Feuer und vergisst Technologie, es erschwert aber bestimmte Dinge. So ist das Erstellen einer Funktion zum schnellen Rückgängigmachen beispielsweise in Canvas viel schwieriger als in SVG. In SVG können Sie einfach einen Ziehpunkt für die letzten Zeilen beibehalten, die Sie zuletzt platziert haben. Der Vorgang zum Rückgängigmachen erfolgt lediglich, indem Sie die entsprechenden Objekte entfernen. Sobald eine Linie auf einer Canvas-Ebene gezeichnet wurde, wissen Sie nicht mehr, was darunter lag. Daher muss zum Entfernen der Linie der Bereich, in dem sie sich befand, neu gezeichnet werden.

Als wir uns entschieden hatten, HTML5 für Canvas zu verwenden, haben wir uns für den Einsatz weiterer HTML5-Extras entschieden. Ein Beispiel dafür ist die Verwendung von localStorage, um die Pinseleinstellungen des Nutzers zu verfolgen. Sobald sie die verschiedenen Pinsel nach ihren Vorstellungen eingerichtet haben, können sie bei der nächsten Verwendung unseres Tools zu diesen Einstellungen zurückkehren. localStorage bedeutet, dass wir kein Cookie und keine Server-Trips mehr benötigen, um diese Präferenzen zu erhalten.

Canvas verwenden

Canvas hat sich in den letzten fünf Jahren enorm weiterentwickelt. Mit „Draw Here“ haben wir den Canvas-Port nicht veröffentlicht, weil die Leistung nicht gut war. Ich denke, er schneidet wahrscheinlich besser ab, als Sie sich vorstellen. Das Löschen eines großen Canvas-Abschnitts und das Neuzeichnen komplizierter Formen können normalerweise schneller ablaufen als die menschliche Wahrnehmung. Das Einzige, was ich gelegentlich zu langsam fand, war die Verwendung von getImageData() zum Sampling von Pixeln. Die Geschwindigkeit des Vorgangs hängt natürlich von der Canvas-Größe ab. Bei einem großen Canvas kann es jedoch lange genug dauern, bis getImageData() zur falschen Zeit ausgeführt wird, bis der Nutzer das Gefühl hat, dass die Anwendung langsam reagiert.

Nach dem Lesen verschiedener Anleitungen für Canvas hatte ich ursprünglich den Eindruck, dass es sich um ein komplexes Thema handelt, das nur sparsam, vielleicht ein- oder zweimal Ich weiß nicht, ob jeder das Sinn hat, aber ich habe ihn so wenig verwendet, als wir anfingen, deviantART muro zu programmieren. Nach einiger Zeit stellte ich jedoch fest, dass es viele kleine Stellen gibt, an denen man sich mit Leinwand viel Mühe sparen kann. In den Modellen für unsere App wurde beispielsweise angegeben, dass eine Farbauswahl aus zwei überlappenden Dreiecken mit Primär- und Sekundärfarben vorhanden sein sollte:

Farbwähler
Farbauswahl

Mein Instinkt war, dass ich über eine Möglichkeit nachdachte, dieses kleine UI-Gizmo mit traditionellem HTML und CSS zu erstellen. Wer gut CSS hackt, könnte darauf hinweisen, wie dies über CSS möglich ist. Aufgrund der Dreiecksform der beiden Teile, die die Farbe ändern, ist dies jedoch nicht so offensichtlich.

Als ich auf den Canvas kam, habe ich das Widget mit einem DOM-Element und ein paar Zeilen JavaScript erstellt. deviantART muro verwendet überall Canvas-Knoten. Jede Ebene ist ein Canvas. Wenn Sie die Reihenfolge der Ebenen ändern möchten, müssen Sie nur den Z-Index ändern. Die Zoom-Navigationspalette, die eine verkleinerte Ansicht des Zeichenbereichs zeigt, ist nur ein weiteres Canvas, das gelegentlich „drawImage()“ aufruft und die Layer-Canvases als Quellbilder verwendet. Sogar der Zeichenbereich-Cursor (ein zweifarbiger Kreis, der die Größe je nach Pinselgröße und Zoom anpasst) ist eine Canvas, die unter der Maus schwebt.

Wir waren beim Umgang mit Canvas großzügiger als bei anderen HTML5-Technologien, weil es mit der ExplorerCanvas-Bibliothek von Google möglich ist, Canvas in Internet Explorer zu simulieren. Das bringt mich zum nächsten Abschnitt.

Internet Explorer (IE)

Der Hauptgrund dafür, dass viele größere Websites HTML5 noch nicht verwenden, ist, dass sie ihre Internet Explorer-Nutzer nicht verlieren möchten. Ich bin sicher, dass die erste Frage in den Köpfen der meisten Entwickler, die hören, dass deviantART eine HTML5-Zeichenanwendung erstellt hat: "Was wurde mit IE gemacht?"

Wir haben zu Beginn beschlossen, dass wir alles in Internet Explorer bestmöglich umsetzen wollen, aber die Webentwicklung nach dem kleinsten gemeinsamen Nenner halten. Da die Web-Community den Ansatz verfolgt, dass eine Website erst gestartet werden kann, wenn sie in jedem bekannten Browser gleich aussieht, können Nutzer nicht erkennen, wenn ihr Browser fehlt. Der durchschnittliche Nutzer wird die Geschwindigkeitsprobleme seiner Internetverbindung zugeschrieben und jede Seite wird mehr oder weniger gleich gerendert. Sie wählen also ihren bevorzugten Browser basierend auf beliebigen kleinen Elementen der Benutzeroberfläche aus, z. B. der Farbe ihrer Zurück-Schaltfläche.

Wir haben uns entschieden, jede coole Funktion, die mir in den Sinn kommt, mithilfe der HTML5-Spezifikation zu erstellen, und versuchen, sie für Internet Explorer zu realisieren. Wenn sie nicht funktionieren könnte, wird einfach ein modales Fenster eingeblendet, in dem wir darauf hinweisen, dass die Funktion nicht verfügbar ist, weil der Browser noch keinen Webstandard implementiert hat.

Zunächst haben wir versucht, dafür zu sorgen, dass alles mit dem ExplorerCanvas von Google (exCanvas) funktioniert. Sie ist überraschend gut darin, die Leinwand für die meisten Dinge nachzuahmen. Allerdings hat das 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 Canvas ausprobieren möchten, ist das in Ordnung, aber einige der Pinsel von deviantART Muro erstellen Formen aus Überlagerungen mit vielen Strichen. Wenn Internet Explorer mit einer VML konfrontiert wird, die Tausende von Knoten enthält – selbst auf einer schnellen Maschine –, fällt er um und stirbt ab. Aus diesem Grund mussten wir bei vielen Zeichenaufrufen in echtem VML schreiben und programmieren. Außerdem mussten wir Tricks anwenden, bei denen wir die Knoten miteinander verketteten und mit dem Befehl „move“ (Verschieben) angeben, wo sich Lücken befinden sollten. Für viele der kleinen Steuerelemente und Elemente der Benutzeroberfläche wird ein Canvas-Tag verwendet, da diese kleinen Änderungen im Allgemeinen mit exCanvas problemlos funktionieren.

Wir haben Nutzern nicht nur vorgeschlagen, dass einige Funktionen mit exCanvas funktionieren, sondern auch, dass sie weiterhin ihre Version von Internet Explorer verwenden können, wenn sie das Google Chrome Frame-Plug-in installieren. Google Chrome Frame ist ein Plug-in, mit dem das Rendering-Modul von Google Chrome in Internet Explorer eingebettet wird. Nutzer verwenden weiterhin den Browser, mit dem sie vertraut sind. Unter dem Titelbild wird unsere Seite jedoch mit den HTML5-Funktionen von Chrome und schnellerem JavaScript gerendert.

Ich wusste, dass die Portierung für Chrome Frame einfach sein sollte, aber mir war nicht klar, wie einfach es war. Sie fügen einfach ein zusätzliches Meta-Tag ein und das war's. Im IE funktioniert alles.

Zusammenfassung

Es macht großen Spaß, mit den neuen Technologien der HTML5-Spezifikation zu arbeiten, und ich würde sagen, dass alles, was ich verwendet habe, auf jeden Fall für die Veröffentlichung bereit ist. Selbst wenn Sie im IE einwandfrei arbeiten möchten, gibt es überraschend viele Möglichkeiten, Canvas und exCanvas zu kombinieren. Überraschenderweise ist es auch möglich, eine Schicht für die Übersetzung zwischen SVG und VML zu schreiben. Wenn du einmal mit der Nutzung dieser Technologie anfängst, ist das wie ein Schritt in eine völlig neue Welt.

Verweise