Webanwendung Web App erstellen, Arten, Tipps, Nachteile

Web App erklärt - Steffen Lippke Coding Lab

Was ist eine Web App?

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

Starten wir!

Was ist eine Web App?

Ist das eine Web App - Web App Steffen Lippke
Ist das eine Web App – Web App Steffen Lippke

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 verknüpfen.

Beispiele für Web Apps sind die Starbucks Web App, 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-Funktion benötigen.

Moderne Browser - Web App Steffen Lippke
Moderne Browser – Web App Steffen Lippke

Je nach Anwendung brauchst Du noch einen Internet-Anschluss mit einer geringen Latenz und große 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.

Arten von 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:

Leistungsfähigkeit

  • Thin Client: Die Web App berechnet wenig und zeigt einen geringen Feature-Umfang. Sie ist nahe zu 100 % 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 performanten Speicherung sendet das Frontend die Daten an das Backend. Die App funktioniert nahezu selbständig.
Fat Client Ionic - Web App Steffen Lippke
Fat Client Ionic – Web App Steffen Lippke

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 notwendig ist (zum Tutorial).
  3. Web App mit Middleware: 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 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, Social Media (Text, Bild, Videos) interessant sind. Web Apps sind für alle Plattformen geeignet, während native Apps nur für eine Plattform interessant sind.

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 JavaScript Anwendungen nur bedingt.

Nicht alle Browser unterst++tzen alles - Web App Steffen Lippke
Nicht alle Browser unterst++tzen alles – Web App Steffen Lippke

Unterschätze Sicherheit

Webapps 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

Web Anwendung programmierst Du in der Regel mit JavaScript, (CSS) 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.

Die Zukunft von Web Apps – 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:

PWA Zukunft - Web App Steffen Lippke
PWA Zukunft – Web App Steffen Lippke
  • 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 tendenziell schneller, weil sie aus dem Cache bedient wird.
  • Icon-fähig: Diese Apps halten Icons in verschiedenen Größen für den Homescreen bereit.

Danke fürs Lesen! Erhalte weitere Tutorials in meinem kostenlosen Newsletter.
Jeden Monat teile ich mit Dir 4 neue praxisnahe Tutorials.
Trage Deine Mail zum kostenlosen Empfang des Newsletters* ein.




Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA
*) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Mehr in der Datenschutzerklärung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.


Jeden Monat teile ich mit den Mitgliedern
4 neue praxisnahe ausführliche Tutorials (je 1000+ Wörter).


Trage Deine Mail, damit Du
Deine Coding + Hacking Skills erweitern kannst!

Die Website nutzt nur technisch notwendige Cookies.