© Macrovector/Shutterstock.com
Herausforderungen für Cross-Plattform im Web

Alle an Bord?


Web-Apps funktionieren auf allen Plattformen – damit das richtig gut klappt, müssen Entwickler jedoch einiges beachten. Auch das Web funktioniert nämlich nicht überall gleich. Worauf gilt es zu achten, um wirklich allen Nutzern gleichermaßen gerecht zu werden?

Kommt die Sprache auf Cross-Plattform-Entwicklung, denkt man zunächst an Desktopapplikationen, die auf unterschiedlichen Systemen installiert und betrieben werden können. Ein weiterer großer Bereich, in dem Plattformunabhängigkeit schon immer ein Thema war, ist die Entwicklung mobiler Apps und die zwei großen Plattformen Android und iOS. Schnell verliert man in diesem Umfeld das Web mit seinen Basistechnologien HTML, CSS und JavaScript aus den Augen. Aber gerade die Webtechnologien sind die verborgenen Meister der Plattformunabhängigkeit, haben sie doch eine sehr bewegte Vergangenheit, die ihren Ursprung in den dunklen und wenig spezifizierten Zeiten der Browserkriege hat. Noch bevor Sie mit der Entwicklung einer modernen Webapplikation starten, sollten Sie sich daher die Frage stellen: Welche Plattformen sollen unterstützt werden? Die Antwort lautet üblicherweise, dass die Applikation auf allen Plattformen funktionieren soll. Doch so einfach, wie es scheint, ist es oft nicht. Was versteht man unter „alle Plattformen“ und was bedeutet „funktionieren“?

Cross-Plattform – das Herz von PWAs

In den letzten Jahren haben Progressive Web Apps (PWAs) einen regelrechten Hype erlebt und das nicht zuletzt, weil Google diese Art der Webapplikation bei jeder Gelegenheit hervorhebt. Die meisten Nutzer verstehen darunter eine Applikation, die installierbar und potenziell offlinefähig ist. Der noch viel wichtigere Kerngedanke hinter PWAs ist jedoch, dass die Applikation überall funktionieren soll, also eine typische Cross-Plattform-Applikation ist. Hinzu kommt, dass der Funktionsumfang dieser Art von Applikation mit den Möglichkeiten, die der Browser zur Verfügung stellt, zunimmt.

Gutes HTML – die Grundvoraussetzung

Einen guten Anfang für eine plattformübergreifende Applikation bildet eine saubere und semantisch korrekte Struktur, die mit HTML formuliert wird. Semantik bedeutet in diesem Fall, dass Tags mit einer für den Inhalt passenden Bedeutung zum Einsatz kommen. Vorbei sind also die Zeiten, in denen eine Applikation nur aus div- und span-Elementen bestand. HTML5 hat im Bereich Semantik nochmal einen großen Schritt nach vorne gemacht, indem zahlreiche zusätzliche Tags, wie beispielsweise <nav>, <article> oder <aside>, eingeführt wurden. Andere Tags mit einer bestimmten Semantik existieren bereits viel länger und sollten für den jeweiligen Zweck eingesetzt werden. Typische Vertreter sind die Elemente <table>, <img> oder <h1> bis <h6>. Ein korrekter Aufbau macht es nicht nur Ihnen als Entwickler leichter, die Struktur eines HTML-Dokuments zu erfassen, sondern erlaubt auch die Verarbeitung durch andere Applikationen. Allen voran sind hier Screenreader zu nennen, die es auch blinden Personen ermöglichen, sich im Internet zu bewegen. Solche Screenreader verlassen sich jedoch vor allem auf die Struktur und nicht auf das Styling. Ein Browser versucht stets, seinen Benutzern die angeforderten Dokumente anzuzeigen, auch wenn es sich dabei nicht um gültiges HTML handelt. Das merkt man beispielsweise daran, dass Browser einen Fallbackmechanismus für den Fall haben, dass sie bei der Verarbeitung eines HTML-Dokuments auf ein ungültiges Tag stoßen. Nutzen Sie in Ihrer Applikation das Tag <Headline>, das im HTML-Standard nicht definiert ist, interpretiert Chrome das beispielsweise als ein ganz gewöhnliches Inline-Element, vergleichbar mit einem <span>-Element. Mit diesem Mechanismus stellen die Browserhersteller sicher, dass den Benutzern die Inhalte zumindest irgendwie dargestellt werden. Als Best Practice sollten Sie sich angewöhnen, Ihre HTML-Dokumente von einem HTML Validator überprüfen zu lassen. Ein Beispiel für einen solchen Dienst ist der Markup Validation Service des W3C, den Sie unter [1] finden. Für alle gängigen Entwicklungsumgebungen wie WebStorm oder VSCode existieren Plug-ins, mit denen Sie schon während der Entwicklung Ihren Code überprüfen lassen können. Außerdem gibt es Validators, die Sie über die Kommandozeile aufrufen und so in Ihren Build-Prozess integrieren können.

CSS fürs Auge

Mit einer validen und semantisch korrekten HTML-Struktur werden Sie keinen Blumentopf bei Ihren Benutzern gewinnen, da die Layoutmöglichkeiten von reinem HTML stark eingeschränkt sind. Also benötigen Sie zumindest etwas CSS, um das Aussehen Ihrer Applikation aufzuhübschen. Wie bei HTML gilt auch für CSS, dass neuere Versionen des Standards den Funktionsumfang deutlich erweitern. Kennt der Browser eine bestimmte Eigenschaft oder einen zugehörigen Wert nicht, ignoriert er das. Dieses Verhalten dient einer stabilen Darstellung, bei der sichergestellt wird, dass ungültige Angaben nicht dafür sorgen, dass die Darstellung nicht erfolgen kann. Wie schon bei HTML existieren auch für CSS Validators, mit deren Hilfe Sie Ihren Code überprüfen lassen können. Auch hier bietet beispielsweise das W3C unter [2] einen Dienst an. Zu den wichtigsten CSS-Features für die Plattformunabhängigkeit von Applikationen gehören Media Queries, Flexbox und das CSS Grid. Auf diese Features werden wir noch näher eingehen, wenn es um die Ausgabeformatierung geht.

Die Businesslogik in JavaScript

JavaScript ist die dritte native Sprache neben HTML und CSS, die der Browser unterstützt. JavaScript ist mittlerweile eine der populärsten Programmiersprachen weltweit und kommt in Webapplikationen sowohl clientseitig im Browser als auch serverseitig in Node.js zum Einsatz. Zunächst widmen wir uns dem JavaScript, das im Browser ausgeführt wird. Die gute Nachricht ist, dass JavaScript standardisiert ist und sich die Browserhersteller auch an diese Standardisierung halten. Das bedeutet, dass Sie sich in der Regel darauf verlassen können, dass eine bestimmte Schnittstelle auf allen Plattformen zur Verfügung steht. Der JavaScript-Sprachstandard wird jedoch kontinuierlich weiterentwickelt. Normalerweise erscheint einmal jährlich eine Aktualisierung des Standards, in der neue Features hinzugefügt werden. Auch hier ziehen die Browserhersteller sehr schnell nach beziehungsweise haben die Features teilweise schon vorab integriert. Gerade im Unternehmensumfeld werden die Browserversionen langsamer aktualisiert, weil solche Updates zunächst überprüft werden und anschließend auf eine große Anzahl von Endgeräten ausgerollt werden müssen. Aber nicht nur hier, auch bei Geräten, in denen ein Browser für die Steuerung integriert ist, wie beispielsweise Fahrzeugen oder Maschinen, können Aktualisierungen problematisch sein. Je nach Umgebung ist es also ratsam, auf den Einsatz der neuesten JavaScript-Features zu verzichten.

Alternativ dazu gibt es eine Reihe von Werkzeugen, die Sie nutzen können, um diese JavaScript-Features auch auf älteren Browsern zu emulieren. Die beiden populärsten davon sind Babel und TypeScript. Bei der Emulation von JavaScript-Features handelt es sich um sogenannte Polyfills. Dabei verwendet der Quellcode entweder Funktionen, die das eigentliche Feature nachstellen, oder der Quellcode wird dahingehend umgeschrieben, dass eine Alternative zum Feature eingesetzt wird. Ein konkretes Beispiel sind Template Strings. Sie erlauben unter anderem, dass Variablen direkt in eine Zeichenkette geschrieben werden. Statt einfacher oder doppelter Anführungszeichen werden Template Strings mit Backticks markiert. Die Variablen beziehungsweise Ausdrücke, die ausgewertet...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang