3 Ein kurzer Überblick über Webanwendungen

Dieses Buch soll Ihnen zeigen, wie Sie moderne Webanwendungen schreiben und dabei anstelle von Plugins nur die nativ im Webbrowser bereitgestellten Tools und Technologien verwenden. Es konzentriert sich dabei ausschließlich auf die Sprachen und Bibliotheken, die von den neuesten Versionen der folgenden Webbrowser unterstützt werden:

Unterstützte Browserversionen

• Chrome

• Firefox

• Internet Explorer

• Safari

• Opera

Viele Beispiele in diesem Buch funktionieren in älteren Browsern nicht. Oft gibt es dann auch keine Workarounds. Wenn Sie eine Webanwendung schreiben, lautet die erste Frage ganz klar: »Welche Browser und welche Versionen davon möchte oder muss ich unterstützen?«

Kompromisse

Hier müssen Sie auf jeden Fall Kompromisse eingehen:

Je mehr Browser und Browserversionen Sie unterstützen, desto mehr Anwender können Ihre Webanwendung nutzen. Vergessen Sie nicht: Manche Nutzer, vor allem in Unternehmen, können sich ihren Browser oder die Browser-Version nicht selbst aussuchen.

Je mehr Browser und Browserversionen Sie unterstützen, desto mehr Einschränkungen gibt es hinsichtlich der Verfügbarkeit und Kompatibilität von APIs. Weiter hinten in diesem Buch zeige ich Ihnen die sogenannten »Polyfills«, mit denen Sie die von einem bestimmten Browser nicht unterstützten Funktionen »upgraden« können. Dies funktioniert jedoch nicht immer.

Automatische Aktualisierungen

Alle gängigen Browser bieten mittlerweile automatische Aktualisierungen. Zwar können diese deaktiviert werden, aber dennoch ist es keine bloße Vermutung mehr, dass die meisten Benutzer mit der neuesten Version ihres Lieblingsbrowsers unterwegs sind – zumindest abseits ihres Arbeitsplatzes.

Ausnahme: Internet Explorer

Die wichtigste Ausnahme ist der Internet Explorer. Die Versionen 10 und 11 gibt es für ältere Windows-Versionen nicht. Daher haben viele Nutzer noch ältere Versionen des Internet Explorers. Die meisten Beispiele in diesem Buch funktionieren im Internet Explorer 9, manche auch im Internet Explorer 8. Die Unterstützung des Internet Explorers 6 und 7 ist jedoch ein eher schwieriges Unterfangen.

caniuse.com

Die Website http://caniuse.com ist eine unschätzbar wertvolle Ressource zum Funktionsumfang der verschiedenen Browser und BrowserVersionen.

3.1 Was ist eine Webanwendung?

Was ist eine Webanwendung und wie unterscheidet sie sich von einer Website? Das ist eine durchaus berechtigte Frage. Selbst die Einführung zur HTML5-Spezifikation spricht vom »nicht klar umrissenen Bereich der Webanwendungen«.

Eigenschaften der Beispiel-Webanwendung

Es gibt keine endgültige Antwort auf diese Frage; die in diesem Buch entwickelte Webanwendung hat jedoch die folgenden Eigenschaften:

• Für die Benutzeroberfläche wird ein Webbrowser verwendet.

• Der Nutzer kann Aktionen ausführen und Daten manipulieren, ohne die Seite neu laden zu müssen.

• Die Anwendung ist interaktiv und reagiert sofort auf Benutzereingaben.

• Sie speichert für den Benutzer Daten, entweder auf dem Client oder dem Server.

• Wenn die Anwendung auf einen Webserver zugreifen muss, werden asynchrone (A)JAX-Aufrufe verwendet.

• Asynchrone APIs werden gegenüber synchronen APIs bevorzugt. Manche Webanwendungen sind auch dann verfügbar und einsatzfähig, wenn der Benutzer nicht mit dem Internet verbunden ist.

Die HTML5-Spezifikation schlägt für Webanwendungen außerdem auch die folgenden Merkmale vor:

Weitere Merkmale von Webanwendungen

• Sie werden gelegentlich genutzt oder aber regelmäßig, jedoch von verschiedenen Orten aus.

• Sie benötigen nur eine geringe CPU-Leistung.

Diese Aussagen sind sicherlich in gewisser Weise richtig. Webanwendungen zur Textverarbeitung sind zum Beispiel deutlich im Vorteil, wenn Dokumente von mehreren Personen an unterschiedlichen Orten bearbeitet werden sollen, selbst wenn sie vielleicht nicht ganz so benutzerfreundlich und leistungsstark sind wie ein richtiges Textverarbeitungsprogramm.

In diesem Kapitel stelle ich Ihnen kurz die Sprachen vor, die wir in diesem Buch zur Entwicklung der Beispiel-Webanwendung verwenden.

3.2 HTML5

Begriffsbestimmung

Der Begriff »HTML5« kann recht verwirrend sein.

HTML5 beinhaltet die Spezifikation einer Markup-Sprache zur Entwicklung von Dokumenten, die im Webbrowser dargestellt werden sollen. Als Auszeichnungssprache erweitert HTML5 frühere Versionen von HTML und XHTML, vereinfacht sie gleichzeitig aber auch.

Als Erweiterung von HTML bietet HTML5 dem Webentwickler eine Reihe von neuen Tags. Viele davon sollen die Beschreibung des Inhalts in HTML verbessern und erleichtern. So gibt es in HTML5 beispielsweise header- und footer-Elemente. Nach Anwendung dieser Tags sehen die Seiten weder anders aus als zuvor, noch verhalten sie sich anders. Damit sind sie eine der weniger interessanten Neuerungen von HTML5. Wir werden uns in diesem Buch noch mit manchen dieser neuen Tags beschäftigen.

Audio- und Videounterstützung

Weiterhin enthält HTML5 neue Elemente zur Unterstützung von Audio und Video und einen Canvas zur Darstellung von 2D-Formen und Bitmaps. Genau diese Features von HTML5 haben viel Aufmerksamkeit bekommen, vor allem weil HTML5 dadurch zur direkten Konkurrenz von Adobe Flash geworden ist. Apple hat den Einsatz von Adobe Flash auf bestimmten Geräten unterbunden – stattdessen sollen die Websites die entsprechenden HTML5-Funktionen verwenden, da diese standardkonform sind und ohne Plugins auskommen. Diese Multimedia-Funktionalität von HTML5 bleibt in diesem Buch weitgehend außen vor, da sie in der Regel für Web-Anwendungen nicht relevant ist. Man sollte jedoch wissen, dass es sie gibt.

Strenge Regeln kontraproduktiv

Im Rahmen der Vereinfachung insbesondere von XHTML wurde erkannt, dass die strenge Umsetzung der HTML-Standards in früheren Versionen nicht nur unnötig war (nicht regelkonforme Seiten konnten im Browser dennoch angezeigt werden), sondern auch kontraproduktiv (weil es keinen Standard für den Umgang mit aus irgendwelchen Gründen ungültigen Seiten gab, kochte jeder Browseranbieter sein eigenes Süppchen). Die HTML5-Spezifikation liefert den Herstellern jedoch detaillierte Vorgaben, wie ihre Browser ein einheitliches Dokumentobjektmodell aus den vorhandenen Daten erzeugen sollten. In weiten Teilen definiert die HTML-Spezifikation genau diese Regeln – und auch diese würden den Rahmen des Buches sprengen.

Formularkomponenten

HTML5 verbessert auch die HTML-Formularkomponenten. Es liefert nicht nur neue Feldtypen (zum Beispiel zur Datums- und Farbwahl), sondern auch zusätzliche Attribute für bestehende Eingabefelder. HTML5 ermöglicht zudem die native Validierung von Formularkomponenten.

Standards für APIs

Neben der Markup-Sprache und verschiedenen Formularkomponenten bietet HTML5 eine Reihe von Standards für die APIs, die vom Webbrowser bereitgestellt werden. Diese APIs sind breit gefächert: Das Spektrum reicht von der Offline-Speicherung von Daten und Inhalten über das Lesen von Dateien bis hin zu Hintergrundprozessen, ServerSent Events und vielem mehr. Genau diese Merkmale von HTML5 machen den Webbrowser erst zu einer echten Plattform für die Anwendungsentwicklung. Für die Beispiel-Webanwendung in diesem Buch verwenden wir viele der neuen APIs.

HTML5 immer noch Arbeitsentwurf

Der HTML5-Standardisierungsprozess ist schon an sich sehr interessant. Viele Standards orientieren sich an bereits bestehenden Browserfunktionen. So wurde beispielsweise die Technologie hinter AJAX (das XMLHttpRequest-Objekt) zunächst als proprietäre Funktion für den Internet Explorer entwickelt. Andere Browser bauten diese Funktion dann nach. Als sie in allen gängigen Browsern unterstützt wurde, wurde sie vom W3C standardisiert. Offiziell gilt HTML5 immer noch als Arbeitsentwurf.