HTML5 — die Zukunft des Webs ist da

HTML5 ist nicht nur eine weitere Version einer Auszeichnungssprache — es ist eine Sammlung von Technologien, die das Web von einer Plattform für Dokumente in eine Plattform für Anwendungen verwandeln. Semantische Elemente, Canvas, Video, WebStorage, Geolocation, WebWorkers und Dutzende weiterer APIs eröffnen Möglichkeiten, die zuvor Flash oder native Plugins erforderten. Nach Jahren der Entwicklung und Diskussion ist HTML5 endlich bereit für den produktiven Einsatz.

Semantische Elemente¶

Eine der größten Änderungen in HTML5 ist die Einführung semantischer Elemente. Statt generischer divs für alles haben wir jetzt header, nav, main, article, section, aside und footer. Diese Elemente haben keinen visuellen Effekt — man muss sie weiterhin mit CSS stylen — aber sie geben dem Inhalt Bedeutung. Suchmaschinen verstehen die Seitenstruktur besser, Screenreader können Benutzer zwischen Abschnitten navigieren und der Code ist für Entwickler lesbarer.

Für unsere Enterprise-Projekte bedeutet das bessere Barrierefreiheit ohne zusätzlichen Aufwand. Früher mussten wir ARIA-Rollen und Landmarks manuell hinzufügen. Mit semantischen HTML5-Elementen ist grundlegende Barrierefreiheit direkt in das HTML eingebaut. Das article-Element zeigt klar an, dass es sich um einen eigenständigen Inhalt handelt. Das nav-Element markiert die Navigation. Das aside-Element ist ergänzender Inhalt. Das ist auch ein SEO-Vorteil — Google versteht besser, was der Hauptinhalt ist und was die Seitenleiste.

Canvas — Zeichnen im Browser¶

Canvas ist vielleicht die interessanteste neue Technologie in HTML5. Es ist eine Bitmap-Zeichenfläche, auf der man über eine JavaScript-API zeichnen kann. Linien, Rechtecke, Kreise, Bilder, Text, Verläufe — alles programmatisch. Dies öffnet die Tür zu Datenvisualisierungen, Spielen und interaktiver Grafik direkt im Browser ohne jegliche Plugins.

Für unsere Projekte ist Canvas vor allem für Datenvisualisierungen interessant. Anstatt Diagramme auf dem Server als PNG-Bilder zu generieren, können wir nun interaktive Diagramme direkt im Browser zeichnen. Der Benutzer kann über Datenpunkte fahren, zoomen, filtern — alles ohne Serverkommunikation. Bibliotheken wie Raphael.js und Processing.js erleichtern die Arbeit mit Canvas und bieten eine höhere Abstraktionsebene.

Es gibt auch eine Alternative — SVG. Während Canvas bitmap-basiert ist (man zeichnet Pixel), ist SVG vektorbasiert (man zeichnet Objekte). SVG-Objekte sind Teil des DOM, sodass man Event-Listener anhängen und sie mit CSS stylen kann. Für Diagramme und Grafiken ist SVG oft die bessere Wahl. Canvas gewinnt bei Spielen und Situationen, in denen man Tausende von Elementen zeichnet — DOM-Manipulation ist bei einer großen Anzahl von Elementen langsam.

Video und Audio ohne Plugins¶

Endlich können wir Video und Audio direkt im Browser abspielen, ohne einen Flash-Player. Die video- und audio-Elemente sind so einfach wie das img-Element — man gibt die Quelle an und der Browser kümmert sich um den Rest. Außerdem hat man volle Kontrolle über die JavaScript-API — play, pause, seek, volume, playback rate. Man kann einen eigenen Player mit eigenem Design erstellen.

Das Problem liegt bei den Codecs. Firefox und Chrome unterstützen WebM und Ogg, Safari unterstützt H.264/MP4. Internet Explorer 9 unterstützt nur H.264. In der Praxis bedeutet das, dass man Video in zwei Formaten vorbereiten muss. Aber die Zukunft ist klar — natives Video im Browser ist besser als Flash hinsichtlich Performance, Barrierefreiheit, mobilen Geräten und Sicherheit. Apples Ablehnung von Flash auf iPhone und iPad hat die Übernahme von HTML5-Video deutlich beschleunigt.

Web Storage — localStorage und sessionStorage¶

Cookies waren immer eine Einschränkung für die clientseitige Datenspeicherung — ein 4-KB-Limit, Versand mit jeder HTTP-Anfrage, komplizierte Handhabung. HTML5 Web Storage führt zwei neue Mechanismen ein. localStorage speichert Daten dauerhaft (überlebt das Schließen des Browsers) mit einem typischen Limit von 5–10 MB. sessionStorage speichert Daten nur für die Dauer einer Sitzung (das Schließen des Tabs löscht die Daten).

Die API ist trivial — setItem, getItem, removeItem. Daten werden als Key-Value-Paare von Strings gespeichert. Für komplexere Daten serialisiert man JSON. In unseren Anwendungen verwenden wir localStorage zum Cachen von Benutzereinstellungen, angefangenen Formularen und Offline-Daten. Wir müssen uns nicht mehr sorgen, dass ein Benutzer ein teilweise ausgefülltes Formular verliert, wenn er versehentlich den Browser schließt.

Geolocation API¶

Die HTML5 Geolocation API ermöglicht das Ermitteln der geografischen Position des Benutzers (natürlich mit dessen Einwilligung). Auf mobilen Geräten nutzt sie GPS, auf dem Desktop WiFi-Triangulation oder IP-Geolocation. Die API ist einfach — man ruft navigator.geolocation.getCurrentPosition auf und erhält Koordinaten. Man kann auch die Bewegung des Benutzers über watchPosition verfolgen.

Für unsere Kunden im Logistiksektor ist dies eine Schlüsseltechnologie. Lieferfahrer können ihre Position direkt aus einer Webanwendung melden, ohne eine native App installieren zu müssen. Der Disponent sieht alle Fahrzeuge in Echtzeit auf einer Karte. Früher erforderte dies eine teure native Anwendung — jetzt genügt ein Webbrowser.

Web Workers — paralleles JavaScript¶

JavaScript im Browser lief immer in einem einzigen Thread. Wenn man eine komplexe Berechnung ausführte, fror die Benutzeroberfläche ein. Web Workers lösen dieses Problem — sie ermöglichen die Ausführung von JavaScript-Code in einem Hintergrund-Thread. Ein Worker hat keinen Zugriff auf das DOM (kann kein HTML manipulieren), kann aber Berechnungen durchführen und über Message Passing mit dem Haupt-Thread kommunizieren.

Das ist enorm für Webanwendungen, die Daten auf der Clientseite verarbeiten. Das Parsen großer CSV-Dateien, Verschlüsselung, Kompression, komplexes Filtern — all das kann im Hintergrund laufen, ohne die Benutzeroberfläche zu blockieren. Für unsere Dashboards bedeutet das, dass wir Tausende von Datenpunkten auf der Clientseite aggregieren können, während der Benutzer weiterhin mit der Anwendung interagieren kann.

Offline-Webanwendungen¶

Application Cache (AppCache) ermöglicht die Definition einer Manifest-Datei, die festlegt, welche Dateien der Browser für die Offline-Nutzung speichern soll. Wenn der Benutzer offline ist, liefert der Browser Dateien aus dem Cache. In Kombination mit localStorage kann man eine Webanwendung erstellen, die auch ohne Internetverbindung funktioniert.

In der Praxis hat AppCache seine Probleme — Cache-Invalidierung ist komplex, Debugging ist schwierig und das Update-Verhalten ist unintuitiv. Aber das Konzept ist richtig und für manche Anwendungsfälle (Außendienstmitarbeiter, mobile Inspektoren) ist es ein Game Changer. In der Zukunft erwarten wir eine bessere API — Service Workers zeichnen sich bereits am Horizont ab.

Browser-Unterstützung¶

Die Hauptfrage für die Enterprise-Entwicklung ist die Browser-Unterstützung. Internet Explorer 8, der in Unternehmensumgebungen noch dominiert, unterstützt keine HTML5-Funktionen. IE9 fügt Unterstützung für Canvas, SVG und einige semantische Elemente hinzu. Chrome und Firefox haben die beste Unterstützung und aktualisieren sich automatisch. Safari unterstützt den Großteil von HTML5 sowohl auf Desktop als auch auf Mobilgeräten.

Für Rückwärtskompatibilität verwenden wir Modernizr — eine JavaScript-Bibliothek, die die Unterstützung einzelner HTML5-Funktionen erkennt und das bedingte Laden von Polyfills ermöglicht. HTML5 Shiv (auch bekannt als HTML5 Shim) stellt sicher, dass semantische Elemente auch in IE8 funktionieren. Respond.js fügt CSS3 Media Query-Unterstützung für IE8 hinzu. Mit diesen Werkzeugen können wir HTML5 schon heute nutzen und für ältere Browser elegant degradieren.

Formulare in HTML5¶

HTML5 führt neue Eingabefeldtypen ein — email, url, tel, number, date, range, color und mehr. Der Browser kann ein spezialisiertes Eingabe-Widget anzeigen (einen Datepicker für date, eine numerische Tastatur für tel auf dem Mobilgerät) und automatisch das Format validieren. Das required-Attribut markiert Pflichtfelder, pattern erlaubt einen regulären Ausdruck zur Validierung, placeholder zeigt einen Hinweis in einem leeren Feld an.

Für uns bedeutet das weniger JavaScript für die Formularvalidierung. Früher haben wir das jQuery Validate Plugin für jedes Formular verwendet. Jetzt kann der Browser die grundlegende Validierung nativ durchführen. Selbstverständlich bleibt die serverseitige Validierung notwendig — clientseitige Validierung dient nur dem Benutzerkomfort, niemals der Sicherheit.

Fazit¶

HTML5 ist ein enormer Schritt vorwärts für die Webplattform. Semantische Elemente, Canvas, Video, Web Storage, Geolocation und Web Workers eröffnen Möglichkeiten, die zuvor Plugins oder native Anwendungen erforderten. Mit Polyfills und Feature Detection können wir HTML5 schon heute nutzen. Die Zukunft des Webs ist strahlend und HTML5 ist das Fundament dieser Zukunft.