Die Stärken von HTML5 Web-Applikationen

Adalbero Fernandes Guimaraes |
18. Juli 2019 |

Die meisten DMS-Plattformen, wie Documentum und SharePoint, bieten Standard-Clients an, welche dazu gedacht sind, alle (oder fast alle) Funktionalitäten der Plattform abzudecken. Auch, wenn diese vollumfänglichen Clients die Möglichkeit haben angepasst / konfiguriert zu werden, so ist es doch oft aufwändig und zeitintensiv neue Technologie-Trends in diese einfließen zu lassen.
Wieso sollte man mit einem komplexen Client starten und diesen, zur Anpassung auf seinen spezifischen Anwendungsfall, reduzieren? Warum sollte man nicht einen eigenen Client bauen, der speziell auf die Anforderungen des Anwendungsfalles ausgerichtet ist? Hierbei wird die Geschäftslogik und die Benutzeroberfläche entkoppelt. Die Businesslogik wird server-seitig bereitgestellt und für die Benutzeroberfläche kann jegliches moderne Web Framework genutzt werden.
HTML5 (CSS und JavaScript) hat die Web-basierten Bedienoberflächen mit vielen neuen und mächtigen Funktionalitäten revolutioniert. Heutzutage gibt es viele exzellente Frameworks und Werkzeuge, die uns erlauben, in kurzer Zeit ein zuverlässiges System mit einer umfangreichen Benutzeroberfläche zu bauen, welche wie eine native App aussieht – sogar mit eigenem Speicherbereich auf dem lokalen Gerät zur Ablage von persistenten Daten.

Reaktive Bedienoberflächen

Eine gute Applikation muss reaktiv und in einer Vielzahl von Umgebungen lauffähig sein. Von Desktop-Systemen mit großen Bildschirmen, bis hin zu mobilen Geräten mit kleinen Displays. Mit HTML5 können Applikationen so gestaltet werden, dass sie sich an das Gerät anpassen, auf welchem sie gerade genutzt werden. Das Einhalten von Leitfäden, wie z.B. „Material Design“, garantiert eine reibungslose Nutzung der Applikation, ohne Kompromisse in der Bedienung eingehen zu müssen.

Durch den Einsatz des „Single-Page Application“-Paradigmas kann man einen robusten Web Client in JavaScript erstellen, welcher die Daten asynchron vom Server bezieht und zeitgleich eine reaktive Oberfläche dem Benutzer bereitstellt. Dadurch erlebt der Benutzer eine flüssige Applikationsbedienung, die ohne Seitenaktualisierungen auskommt.

Mit neuen CSS-Konfigurationen können wir besser das Layout einer HTML-Seite gestalten, ohne dabei von starren TABLE oder DIV Tags abhängig zu sein.

Lokaler Speicher

Moderne Browser besitzen einen internen lokalen Speicher, der genutzt werden kann, um applikations-spezifische statische Dateien, wie HTML, CSS, JavaScript und Bilder zwischen zu speichern um damit die Performance zu verbessern oder sogar die gesamte Applikation offline verfügbar zu machen. In diesem Fall wird der Speicher vom Browser kontrolliert. Dieser Speicher kann auch von der Applikation genutzt werden, um eigenen Inhalt zu speichern, wie z.B. Dokument-Metadaten und Dateiinhalte.

Jede Web-Applikation hat ihren eigenen Speicherbereich, um ihre Daten zu verwalten. Andere web-basierte oder native Anwendungen haben keinen Zugriff auf den Speicherdaten der jeweiligen Web-Applikation.
Aber wir müssen vorsichtig sein! Mit Dokumenten auf mobilen Geräten zu arbeiten, kann eine Herausforderung sein. In den meisten Fällen hat ein mobiles Gerät Speicherbegrenzungen und eine langsamere Netzwerkverbindung. Dies kann die Anzahl an Dokumenten begrenzen, die lokal zwischengespeichert werden können, und die Verwaltung von großen Dokumenten kann zu einem Problem werden. In unseren Tests war es auf den gängigen Geräten möglich bis zu 2 GB an Dokumenten lokal zu speichern.

 

html5

Arbeiten im Offline-Modus

Eines der beeindruckenden neuen Browser-Merkmalen ist die Möglichkeit, eine Web-Applikation so zu konfigurieren, dass sie auf dem mobilen Gerät zwischengespeichert wird und sogar funktionsfähig bleibt, auch wenn das Gerät keine Netzwerkverbindung zum Server hat.

Mit dem Konzept der „Progressive Web App“ (PWA) ist es möglich, eine Web-Applikation so aussehen zu lassen als ob diese eine native Applikation wäre. Die Web-Applikation erhält auf dem Desktop / Home Screen ein eigenes Icon und bei Aufruf fehlen die browser-typischen Elemente, wie die Adresszeile.

Um auch offline funktionsfähig zu bleiben, speichert der Browser die statischen Dateien einer Applikation, wie HTML, CSS, JS und Bilder zwischen. Die Applikation kann ebenfalls den Speicher des Browsers nutzen, um die notwendigen Daten zu speichern, die während des Offline-Modus angezeigt werden sollen.

“Separation of Concerns“-Paradigma

Die Idee des „Separation of Concerns“-Paradigmas ist eine Applikation in einzelne Module so zu unterteilen, das jedes Modul ihren eigenen abgegrenzten Zweck erfüllt.

Unter Berücksichtigung dieses Paradigmas sollte eine Web-Applikation in die folgenden Komponenten unterteilt werden, welche miteinander über strikt definierte Schnittstellen kommunizieren:

  • Die Bedienoberfläche im Browser sollte sich nur um reine Render-Aktivitäten kümmern. Die Geschäftslogik sollte an dedizierte Services, z.B. an RESTful-Services, delegiert werden.
  • Im Backend kümmern sich RESTful-Services um die Geschäftslogik, ohne die technischen Details der Plattformen kennen zu müssen. Wenn Plattform-Aktionen benötigt werden, werden sie an die Standard-Services des Plattformherstellers delegiert.
  • Die Plattform-Services, die im Regelfall vom Hersteller zur Verfügung gestellt werden, greifen auf die entsprechende Plattform zu.

Mit diesem modularen Aufbau hat man nicht nur klare Zuständigkeiten und einen strikten Applikationsfluss, sondern weitere Plattformen können leicht hinzugefügt werden.

 

html5_lokaler_Speicher

Herausforderungen

Die HTML5-Spezifikationen entwickeln sich ständig weiter und neue Funktionalitäten werden ständig hinzugefügt. Allerdings werden diese nicht in der gleichen Geschwindigkeit durch die Browser umgesetzt. Hierbei leisten die meisten Bibliotheken gute Arbeit, indem sie die Unterschiede der Browser weitestgehend kompensieren. Trotzdem muss häufig in einer Web-Applikationen auf spezielle Eigenheiten der Browser eingegangen werden.

Insbesondere bei Apple Mobile Safari ist die Implementierung neuer Funktionen oftmals langsam und zur Gewährleistung der App Sandbox werden Spezifikationen leicht anders umgesetzt.

Microsoft hat die Entwicklungsarbeiten am Internet Explorer mit der Version 11 eingestellt und hat diesen durch den Nachfolger Edge ersetzt. Das bedeutet, dass der Internet Explorer von den meisten Cloud Services nicht mehr unterstützt wird und neue Funktionalitäten nicht mehr implementiert werden. Neuerdings hat Edge Chromium als seine Web-Engine übernommen. Dieser Wandel garantiert, dass Edge immer nahe des HTML5-Standard sein wird und früh Neuerung aufnimmt. Da Edge aber Teil des Windows-Betriebssystems ist, mag es schwierig sein, immer die letzte Edge-Version vorzufinden oder diese „schnell mal“ zu aktualisieren.

Nichtsdestotrotz, Technologien wie „Progressive Web App“ und „IndexedDB“ für Offline-Funktionalitäten, werden heutzutage von allen gängigen Browsern unterstützt.

Fazit

Web-Frontend-Technologien und -Werkzeuge sind heutzutage mächtig genug, um einen robusten Client erstellen zu können, der auf einer Vielzahl von Geräten läuft. Es gibt eine Menge neuer Technologien, die genutzt werden können, um eine „Rich Client“-Applikation zu erstellen – etwas das früher nur server-basiert (z.B. per JSP) möglich war.

Folgender Grundidee sollte gefolgt werden, um einen spezifischen Anwendungsfall um zu setzen:

  • Ausreizen der Möglichkeiten des Dokumenten- bzw. Content-Management-Systems mit seiner Standard-API (server-seitig), um die Geschäftslogik ab zu bilden
  • Nutzung moderner Technologien und Frameworks in der Bedienoberfläche (browser-seitig), um eine simple und intuitive Bedienung dem Benutzer zur Verfügung zu stellen

 
Nebenbei bemerkt, HTML5 entwickelt sich stetig weiter. Die Community ist sehr aktiv und es werden ständig neue Features vorgestellt. Ich freue mich schon die spannenden Technologien einzusetzen, die in den nächsten Jahren noch entstehen werden.

Bleiben Sie neugierig und folgen sie meinen Blog Posts über Neuerungen zu HTML5 und anderen aufregenden Technologien!

×
Haben wir Ihr Interesse geweckt? Dann schreiben Sie uns gerne an.
JETZT KONTAKT AUFNEHMEN

Folgen Sie uns auf unseren Social Media Accounts, um keinen neuen Blogartikel zu verpassen.

linkedin     xing     facebook     twitter

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert