Webanwendung Web App erstellen, Arten, Tipps, Nachteile

Was ist eine Web App? Warum lohnt sich eine Entwicklung?

Lese diese Erklärung, um alle über die Funktion, Vorteile und Nachteil von Web Apps zu erfahren.

Starten wir!

Was ist eine Web App?

Eine Web App oder Webanwendung ist ein Programm, welches in Deinem Browser läuft. Du musst Web Apps nicht installieren und brauchst in der Regel eine Internetverbindung, um die Anwendung nutzen zu können. Fast jede Webseite ist heutzutage ein Programm, weil die Programmierer die statischen Inhalte wie Texte, Bilder und Videos mit Interaktionsmöglichkeiten (JavaScript) verknüpfen.

Beispiele für Web Apps sind die Starbucks Web App, Wikipedia, Twitter Lite oder die Webseite der New York Times.

Was braucht man für eine Webapp?

In der Regel reicht ein moderner Browser wie Firefox oder Chrome aus.

Nicht zu empfehlen sind Browser, die standardmäßig JavaScript deaktiviert haben, z. B. Internet Explorer. Außerdem sollte Dein Browser der Wahl aktuell sein, weil neuartige Web Apps neuartige Browser-Funktionen benötigen. Die Webgemeinde einigt sich alle paar Monate auf neue Features oder Kommandos, die die Programmierung erleichtern. Diese Features müssen die Browserhersteller (Firefox und Chromium) zuerst implementieren und für alle zugänglich machen.

Je nach Anwendung brauchst Du noch einen Internet-Anschluss mit einer geringen Latenz und großer Bandbreite. Die Latenz ist die Zeit, welche der Server braucht, um die Antwort an Dich zu senden. Bei Gaming und Video-Konferenzen sollte diese möglichst gering sein. Je größer die Bandbreite, desto schneller laden die Web Apps.

Die Programmierer unterscheiden Web Apps anhand ihrer Leistungsfähigkeit und der genutzten Technologie. Web Apps untergliedern sich anhand der Leistungsfähigkeit in zwei wesentliche Kategorien:

Unterscheidung nach Leistungsfähigkeit

• Thin Client: Die Web App berechnet wenig und zeigt einen geringen Feature-Umfang. Sie ist nahe zu 99 % auf das Backend angewiesen. Jeder Tasten und Mausklick sendet das Frontend an das Backend und die Ansichten generiert das Backend.
• Fat Client: Die Web-App hat viele Offline-Funktionen, speichert Inhalte zwischen und kann Inhalte selbständig formatieren und bearbeiten. Nur zur Speicherung sendet das Frontend die Daten an das Backend. Die App funktioniert selbständig.

Unterscheidung nach Web-Technologien

1. Vanilla JavaScript: Die einfachste Form von Web Apps sind in einfachem JavaScript ohne Bibliotheken geschrieben. Diese Anwendungen laden besonders schnell und sind für ihre Aufgabe optimiert.
2. Single Page Applications: Anwendungen, die auf Ionic oder Angular basieren, blenden bei der Interaktion mit JavaScript Ansichten ein, während kein Neuladen der Webseite notwendig ist (zum Tutorial).
3. Web App mit Middleware (Java Tomcat): Jeder Klick übertragt das Frontend an eine Middleware Instanz, die die neue Ansicht mit den Inhalten generiert.
4. ISS-Server: Der Internet Information Server ist ein Teil des Microsoft Betriebssystems, um Webseiten nach außen zu hosten. Die meisten bekannten Formate unterstützt der Server.
5. PHP-Server: Der Klassiker unter dem Webhosting ist der PHP-Server. Dieser kann Datenbanken abfragen und diese in Form einer HTML strukturiert darstellen. Viele APIs wie Laravel oder Symfony basieren auf diesem Framework (zum Tutorial).

Unterschied zwischen Web und App

Webanwendung / Web Apps basieren auf HTML, CSS und JavaScript, während Anwendungen (engl. Application, kurz App) in jeder beliebigen Programmiersprache geschrieben sind. App ist der Überbegriff und Web App ist eine Unterkategorie. Die Meisten meinen mit „Apps“ die Android-Apps basierend auf Java / Kotlin oder iOS-Apps auf Basis von Objective-C / Swift.

Native Apps sind für Games optimal, während Web Apps (z. B.) in Form einer PWA für Business-Anwendungen oder Social Media (Text, Bild, Videos) interessant sind. Web Apps sind für alle Geräte geeignet, während native Apps nur auf einer CPU-Betriebssystem-Kombination ausführbar sind (x86, ARM, Apple Silicon, amd64, …)

Vorteile eine Web App

Du überlegst, ob Du eine App für Windows, macOS, Android oder iPhone programmieren sollst. Deshalb sind Web Apps die bessere Wahl:

• Universal: Browser gibt es für alle bekannten Betriebssysteme, egal ob mobil oder als Desktop PC. Wir haben in 2026 eine Vielzahl an Chips und Betriebssysteme, die jeweils eine andere Programmierung verlangen.
• Keine Installation: Web Anwendungen laden über den Browser in wenigen Sekunden. Die Anwendungsprogrammlogik verteilt sich auf den Client und Server. Früher musstest Du die Daten von mehreren CDs auslesen, um die Anwendung zu starten.
• Auto-Updates: Jeder Webseitenaufruf ermöglicht es dem Entwickler neue Versionen seiner App (heimlich) zu veröffentlichen. Updates auf Windowssysteme haben früher Minuten oder Stunden gebraucht.
• Zugriffssteuerung: Apps, die nur auf dem Client laufen, sind schwer abzusichern. Der Entwickler möchte eine Gebühr pro Installation oder Nutzer haben. Früher waren Lizenz-Codes ein Katz- und Mausspiel, um eine Software (illegal) zu aktivieren.

Stand der Technik – Die PWAs

Progressive Web Apps (PWA) lassen die Grenzen zwischen einer Web App und einer nativen App verschwimmen. Coole neue Features besseren die PWAs auf:

• Offline-Modus: PWAs können Bilder, Texte und andere Inhalte im Browser speichern. Statt die Daten bei jeder Interaktion neu vom Server zu laden, lädt der sogenannte ServiceWorker die statischen Daten aus dem Cache.
• Sicher: PWAs sind nur PWAs, wenn diese HTTP Secure verwenden. Diese Verschlüsselung verhindert, dass Kriminelle die Inhalte mitlesen können. Das ursprüngliche HTTP-Protokoll überträgt Daten im Klartext, sodass jeder mitlesen kann.
• Hintergrund Sync: News, Inhalte, Bilder kann die App mit einem Hintergrund-Sync laden, ohne dass der Nutzer die App öffnen muss. Normale Webseiten laden nur neue Inhalte, wenn diese sich im Vordergrund befinden.
• Teilen: Du kannst Inhalte von der App (Share API) oder in die App teilen (Share Target). Die Grenzen zwischen Webseite und native App verschwimmen.
• Push-Notfication: Sende Benachrichtigungen aus einer PWA heraus, sodass der Nutzer auf den neusten Stand bleibt.
• Installieren: Nie wieder Apps installieren? PWAs sind installierbare Webseiten, die Du auf Deinem Homescreen speichern kannst. Wenn die PWA optimiert ist, siehst Du keinen Unterschied mehr zu einer normalen App. Die App lädt schneller, weil sie aus dem Cache bedient wird.
• Icon-fähig: Diese Apps halten Icons in verschiedenen Größen für den Homescreen bereit.

Nachteile Web App

Notwendige (Gute) Internetverbindung

Web Apps brauchen in der Regel eine gute Internetverbindung, um zu funktionieren. Der Client lädt die Inhalte nach und nach in den Speicher. Auf der anderen Seite limitieren manche Anbieter absichtlich die Geschwindigkeit des Servers, um Ressourcen zu sparen. Egal wie schnell Deine lokale Verbindung ist, Du kannst die Drossel des Servers nicht umgehen.

Unzuverlässige Speicherung von Zwischenständen

Web Apps sind nicht optimal für die Editier-Arbeit. Netzwerkprobleme können dazu führen, dass Änderungen auf der Strecke bleiben und Arbeit verloren geht. Das Hypertext Transfer Protocol (HTTP) ist ein zustandsloses Protokoll. Der Server sendet das Dokument zum Client und wartet in der Regel nicht auf eine Antwort. Mit Cookies kann der Server den Client wiedererkennen und eine Sitzung z. B. den Einkaufswagen zu ordnen.

Limitierung an die Browser-Engine

Nur was der Browser unterstützt, kann die App realisieren. Wenn der Browser Feature X nicht hat, dann kann die App diese nicht ermöglichen. Rückständige oder nicht mehr unterstützte Internet Browser wie Internet Explorer oder alte Android Browser verstehen die modernen JavaScriptanwendungen nur bedingt.

Unterschätze Sicherheit

Web Apps sind anfällig (wie jede andere Webseite) für eine Reihe von Angriffen. Der Programmierer muss sich genau Gedanken darüber machen, welche Eingaben korrekt sind und welche Daten die App herausgeben darf. Bei Einfügungen Injections versucht ein Angreifer sich einen Befehl auszudenken, der die bestehende Logik aushebelt. Kriminelle können mit diesem Weg Daten einsehen, löschen oder ändern.

Web App programmieren

Die Interaktionen in der Web Anwendung programmierst Du in der Regel mit JavaScript oder WebAssembly. WebAssembly kapselt die Ausführung von nativen C, C++, Rust oder .NET Code. Du kannst optimal maschinennahe Programme verwenden, um rechenintensive Programme zu erstellen. Hier geht es zu dem JavaScript und WebAssembly Tutorial.