Wie Sie eine moderne Web App programmieren

Zuvor wollen wir kurz klären, was mit dem Begriff „Web App“ oder „Webanwendung“ überhaupt gemeint ist (ausführlicher beschäftigen wir uns mit dieser Frage in unserem Überblicksbeitrag Moderne Web-Apps: Begriff, Geschichte, Beispiele. Denn nicht jede Website gilt als eine Webanwendung. Formal gesehen wollen wir dann von Web-Apps sprechen, wenn dabei mindestens eine Programmiersprache wie PHP oder clientseitig JavaScript (in größerem Umfang) zum Einsatz kommt. Reine HTML- bzw. HTML/CSS-Seiten sind in diesem Sinne keine Anwendungsprogramme, sondern Dokumente (HTML wird auch gemeinhin nicht als Programmiersprache aufgefasst).

Wer für einen bestimmten Zweck und eine bestimmte Zielgruppe eine Webanwendung entwickeln möchte, muss sich für einen geeigneten App-Typ – und dafür verfügbare Technologien – entscheiden. Lassen Sie uns kurz auf einige wichtige Beispiele eingehen.

Statische Web-Apps – zur Not auch offline

Als „statische Web-Apps“ werden Webanwendungen bezeichnet, die keine serverseitige Dynamik nutzen. Die ersten Webseiten, bestehend aus HTML und CSS (Cascading Style Sheets), waren noch überhaupt nicht dynamisch: Aktionen des Benutzers, von Klicks auf seiteninterne Sprungmarken einmal abgesehen, erforderten das Nachladen einer neuen Webseite vom Server (was damals ziemlich lange dauern konnte). Das änderte sich mit dem Aufkommen der clientseitigen Skriptsprache JavaScript, die 1996 im Internetbrowser Netscape Navigator 2.0 Premiere feierte. Denn damit konnten Benutzerinteraktionen ausgewertet, Eingaben validiert, Elemente ein- und ausgeblendet oder Inhalte verändert werden, ohne den Server zu kontaktieren – solange keine neuen Inhalte benötigt wurden. Ein weiterer Vorteil: Einmal geladen, funktioniert eine statische Webanwendung auch offline. Nicht zuletzt sind statische Web-Apps sicherer, weil der Webserver keine Programme ausführen muss.

Dynamische Web-Apps dank serverseitiger Logik

Aber trotzdem sind die Beschränkungen statisch geladener Inhalte in vielen Fällen unbefriedigend. Wenn sich serverseitig regelmäßig Inhalte ändern oder auch personalisierte Inhalte gewünscht sind, wird serverseitige Dynamik benötigt, realisiert z. B. durch Programmiersprachen wie PHP, Perl oder Ruby. Dynamische Webanwendungen speichern und aktualisieren Inhalte in Datenbanken, bieten mehr interaktive Elemente und können die bereitgestellten Webseiten für verschiedene Benutzer und Nutzungskontexte aufbereiten. Content-Management-Systeme (CMS) nutzen serverseitiges Skripting dafür, Webseiten mit Hilfe von Templates und Datenbankinhalten erst beim Aufruf dynamisch zu erzeugen. Webshops präsentieren Produkte mit aktuellen Preisen und integrieren Warenkorb- und Bezahlfunktionen.

Herkömmliche statische und auch dynamische Webseiten benötigen auf der Clientseite nicht viel Ressourcen, da die meiste Arbeit auf dem Server erledigt wird („Thin-Client“-Prinzip). Dadurch ist sichergestellt, dass diese Webseiten auf so gut wie allen Endgeräten mit Internet-Browser laufen. Der Preis dafür ist die beschränkte Funktionalität, die sich auch einschränkend auf die Benutzererfahrung auswirkt.

Noch bessere Benutzererfahrung durch „Rich Clients“

Mit manchen dynamischen Web-Apps können Benutzer ähnlich interagieren wie mit Desktop-Anwendungen und zum Beispiel Drag and Drop oder spezielle Gerätefunktionen nutzen. Früher wurden solche Anwendungen als „Rich Internet Applications“ bezeichnet. Der Begriff ist etwas in die Jahre gekommen und wird von manchen (wie der englischen Wikipedia) nur auf veraltete Technologie wie Flash, Silverlight & Co bezogen. Heute kommen für den gleichen Zweck in erster Linie HTML5, Web-APIs und – noch immer – JavaScript zum Einsatz.

Alle diese Mittel haben gemeinsam, dass die Clientseite – der Browser – mehr Arbeit übernimmt: Sie wird vom „Thin Client“ zunehmend zum „Rich Client“. Das wurde in den Anfängen durch Plugins erledigt – waren die nicht installiert, konnte die Webseite nicht wie gewünscht dargestellt werden. Moderne Browser bringen diese Funktionalität bereits mit: Das 2014 eingeführte HTML5 spielt u. a. Multimedia-Dateien ab, kann auf lokalen Speicher zugreifen und erzeugt mit Hilfe von JavaScript dynamisch 2D-Grafiken und sogar 3D-Animationen (über die WebGL-JavaScript-Schnittstelle). Und in den Browser eingebaute Schnittstellen (Web-APIs) ermöglichen den Zugriff auf Daten und Gerätefunktionen, zum Beispiel das Dateisystem, die Zwischenablage, Performance-Daten oder Bluetooth (mehr Infos finden Sie in diesem Beitrag). Details zu allen Web-APIs der wichtigsten Browserhersteller (Microsoft, Google, Mozilla) stehen auf MDN Web Docs zur Verfügung.

Single Page Applications (SPA)

Ein populärer Seitentyp, der diese neuen Möglichkeiten ausgiebig nutzt, ist die sogenannte Single Page Application (SPA). Wie der Name sagt, bestehen SPAs aus einer einzigen HTML-Seite, die zunächst vom Webserver geladen werden muss. Die Funktionalität der Web-App wird nahezu komplett durch clientseitige Verarbeitung bereitgestellt; nur neue oder aktualisierte Inhalte werden bei Bedarf vom Server nachgeladen. Damit kann die App weitgehend unabhängig vom Server oder sogar offline ausgeführt werden, indem per Web-Storage-API ein Zwischenspeicher angelegt wird. Darüber hinaus wird die Serverlast verringert und die Benutzererfahrung nicht durch lange Ladezeiten beeinträchtigt. Sinnvolle Einsatzgebiete sind etwa Projekte mit vielen Benutzern und hohen Zugriffszahlen (Stichwort Skalierbarkeit), Offlineszenarien, aber auch einfache 2D-Online-Games und kleinere Projekte mit einfacher Business-Logik. Mehr erfahren Sie in unserem Blogbeitrag Single Page Applications (SPAs): Definition, Vorteile, Entwicklung .

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Progressive Web Apps (PWA)

Immer beliebter wird auch ein weiterer Typ moderner Web-Apps, genannt „Progressive Web Apps“ (PWAs). Auch sie machen sich zunutze, dass aktuelle Webstandards auf verschiedenen Geräten und insbesondere auch Mobilgeräten eine Benutzererfahrung erzeugen können, die der von speziell für diese Geräte entwickelten „nativen“ Apps kaum nachsteht. Progressive Web Apps vereinen die Vorteile von Browser-Apps – Plattformunabhängigkeit, Flexibilität, immer auf dem neuesten Stand, keine Bindung an App-Stores – mit den Vorteilen nativer mobiler Apps für Android oder iOS, insbesondere einer nahtlosen Integration in die jeweilige Betriebssystemumgebung.

Um ein app-artiges Benutzererlebnis zu erreichen, nutzen PWAs zusätzlich zu den schon genannten Techniken wie HTML5, JavaScript und Web APIs insbesondere sogenannte Service Worker, die u. a. Offlinefähigkeit und Push-Benachrichtigungen ermöglichen, sowie das Web App Manifest, mit dessen Hilfe die PWA installiert, d. h. zum Startbildschirm hinzugefügt werden kann. Mehr Informationen zu PWAs haben wir hier für Sie zusammengestellt: Progressive Web Apps – der Fortschritt bei Mobilapps.

Tipps für die Programmierung

Sie haben sich für einen App-Typ entschieden, der zu Ihrem Projekt passt – zum Beispiel eine SPA? Dann sollten Sie als nächstes einen geeigneten Stack auswählen, das heißt die Werkzeuge, mit denen Sie Ihre App umsetzen möchten. Auf der Serverseite beinhaltet das insbesondere

• die Datenbank – relational/SQL wie z. B. MySQL oder nicht-relational/„NoSQL“, z. B. MongoDB,
• einen Webserver wie Apache oder nginx
• sowie ein Framework für die Programmlogik (Server Side Scripting), etwa mit PHP, ASP, Ruby oder JavaScript (mit der serverseitigen JavaScript-Laufzeitumgebung Node.js).

Nützliche Frameworks für die Backend-Entwicklung sind zum Beispiel Laravel (PHP), ASP.NET/ASP.NET Core, Ruby on Rails, Django (Python), Spring (Java) oder Express für JavaScript/Node.js.

Clientseitig kommt vor allem JavaScript zum Einsatz. Weil dieser – wie beschrieben – in modernen Web-Apps eine immer wichtigere Rolle spielt, gibt es inzwischen auch dafür zahlreiche Frameworks und Bibliotheken mit einsatzfertigem Code, die beim Programmieren von Web-Apps viel Zeit und Aufwand sparen.

JavaScript-Bibliotheken und Webframeworks

Wie in allen Programmiersprachen sind JavaScript-Bibliotheken Sammlungen diverser Funktionen, die in eine Anwendung eingebunden und bei Bedarf aufgerufen werden können. Frameworks stellen dagegen das Grundgerüst bereit, um schnell eine lauffähige Anwendung zu realisieren. Dazu gehören bei Webanwendungen u. a. Architekturkomponenten, Datenbankzugriff oder Templating sowie häufig benötigte Funktionen wie Webformulare, Authentisierung oder Caching.

Sie beginnen Ihre Entwicklung also am besten mit einem JavaScript-Framework (einen Überblick finden Sie hier: Web Application Frameworks). Beispielsweise helfen JavaScript-Frameworks wie Angular oder Vue.JS Ihnen bei der Entwicklung von Single-Page-Anwendungen. Die dann noch fehlenden Funktionen realisieren Sie mit Hilfe von passenden JavaScript-Bibliotheken. Solche gibt es für jeden erdenklichen Zweck: DOM-Navigation und Manipulation (jQuery, Umbrella JS, Cash, zepto.js) und UI-Gestaltung (jQuery UI, React), aber auch etwa Datenbankmanagement, (TaffyDB), Datenvisualisierung (Chart.js, D3.js), Animationen (Anime.js), 3D-Design (Three.js) oder interaktive Landkarten (Leaflet). Bei der Design-Entwicklung unterstützen sogenannte CSS-Frameworks wie Bootstrap, Foundation oder YAML (Yet Another Multicolumn Layout).

Titelmotiv des Artikels Photo by Christina @ wocintechchat.com on Unsplash