Was ist eine Webanwendung?

Webanwendungen ermöglichen es Unternehmen, ihre Präsenz im digitalen Raum auszubauen, Prozesse zu automatisieren und Interaktionen zu vereinfachen. Damit sparen sie Geld und Zeit für Unternehmen. Wir klären in diesem Artikel, was Webanwendungen sind und wie sie im Kern funktionieren.

Das Wichtigste zusammengefasst

Die folgenden Tipps helfen Ihnen dabei, zu verstehen, wie Webanwendungen aufgebaut sind und wie sie entstehen:

• Webanwendungen sind Anwendung, die in einem Web-Browser aufrufbar sind.
• Beispiele für Webanwendungen finden sich in allen Branchen, wie zum Beispiel im E-Commerce oder im Unterhaltungsbereich.
• Webanwendungen bestehen aus dem für Nutzer sichtbaren Teil, auch Frontend genannt, dem funktionalen Teil, auch Backend genannt, und der darunterliegenden Infrastruktur, welche im Kern aus Servern besteht.

Definition der Webanwendung

Webanwendungen, auch Web Apps genannt, sind spezielle Anwendungen, die über das Internet, ferner über einen Web-Browser (wie Google Chrome, Apple Safari oder Microsoft Edge), aufrufbar sind. Sie unterstützen somit fast jedes Endgerät wie Desktop-PCs, Notebooks, Tablets, Smartphones und sogar Fernsehgeräte.

Webanwendungen entstehen aus der Disziplin der Webentwicklung (engl. web development). Webentwicklung ist ein Teilbereich der Softwareentwicklung.

Um eine Webanwendung abzurunden, benötigt es ebenfalls die Disziplin des Webdesigns. Während die Webentwicklung für den kompletten technischen Unterbau sorgt, bringt das Webdesign die Gestaltung und Interaktion aller visuellen Elementen.

Beispiele von Webanwendungen

Webanwendungen werden in nahezu allen denkbaren Branchen und Bereichen genutzt. Einige Beispiele sind:

• Im Bildungsbereich
  • Lernplattformen wie Udemy oder Moodle
• Im E-Commerce-Bereich
  • Online-Shops wie Amazon
  • Marktplätze wie Ebay
• In Unternehmen
  • Customer-Relation-Management wie Salesforce
  • Videotelefonie wie Google Meet oder Zoom
  • ERP-Systeme wie Odoo
  • Unternehmenswebseiten wie unsere Seite
• Im Unterhaltungsbereich
  • Soziale Netzwerke wie LinkedIn oder Instagram
  • Video-Plattformen wie YouTube
  • Streaming-Plattformen wie Twitch
  • Browser-Games wie Die Siedler Online
• Im Finanzsektor
  • Online-Banking wie N26
  • Online-Broker wie Smartbroker oder Flatex
• In der Reisen- & Tourismus-Branche
  • Buchungssysteme für Flüge, Hotels oder Mietwagen wie bei Lufthansa oder Sixt
• Im Gesundheitsbereich
  • Terminbuchungssystem beim Arzt wie Shore
  • Online-Diagnose wie Netdoktor

Dementsprechend ist das Berufsfeld des Webentwicklers auch sehr breit aufgestellt und erstreckt sich über viele Branchen. In der Regel gibt es die Unterteilung zwischen dem Frontend-Entwickler, dem Backend-Entwickler oder der Kombination aus beidem, dem Full-Stack-Entwickler.

Aufbau einer Webanwendung

Der Aufbau einer Webanwendung ist von oben betrachtet recht einfach zu verstehen. Es gibt die Bereiche Frontend, Backend und Infrastruktur. Je tiefer es jedoch in die Details geht, desto technischer wird es. Für einen ersten groben Einstieg reicht jedoch die Klärung, welche Bereiche es gibt und was diese für Aufgaben haben.

Frontend - das, was Nutzer sehen:

Das Frontend ist die Benutzeroberfläche der Webseite, die im Web-Browser aufgerufen wird. Der Benutzer einer Webanwendung kann diesen Bereich sehen und mit diesem durch Benutzereingaben interagieren.

Frontends nutzen im Kern immer die folgenden Technologien:

• HTML (=Hypertext Markup Language) ist eine Sprache, die die grundlegende Struktur der Webanwendung aufbaut
• CSS (=Cascading Style Sheets) liefert darauf aufbauend das Design
• JavaScript bringt Logik, Funktionalität und Dynamik in die Webanwendung

Um das an einem überschaubaren Beispiel, nämlich einem Stromrechner, zu erläutern:

Mit HTML werden zwei Eingabefelder erstellt: Der Verbrauch in kWh und der Strompreis. Mit CSS werden die Eingabefelder gestalterisch aufbereitet. JavaScript sorgt im letzten Schritt dafür, dass die beiden Zahlen multipliziert und dem Nutzer ausgegeben werden.

Da sich die Webentwicklung von Beginn an stetig verändert, nutzen Entwickler mittlerweile nicht mehr nur diese Technologien, sondern Frameworks wie React, Angular oder Vue.js, die darauf aufbauen. Der Vorteil liegt klar auf der Hand: Gewisse Aufgaben in der Webentwicklung sind immer gleich und müssen durch die Nutzung eines Frameworks nicht wiederholt werden. Das spart Zeit und Kosten bei der Entwicklung.

Wie bereits erwähnt, arbeitet das Frontend oftmals mit einem Backend zusammen, um Daten zu holen oder sie abzuspeichern. Für den Stromrechner wäre es zum Beispiel interessant, den Strompreis einer beliebigen Postleitzahl in Deutschland abzufragen. Genau darum geht es im nächsten Abschnitt.

Backend - das, was im Hintergrund passiert:

Das Backend ist der Ort, an dem die Geschäftslogik einer Webanwendung sitzt. Hier werden Daten verarbeitet, aufbereitet, aus Datenbanken geholt und in Datenbanken gespeichert. Benutzer einer Webanwendung können diesen Bereich nicht sehen. Stattdessen interagieren sie im Frontend über eine Schnittstelle, auch API (= Application Programming Interface) genannt, mit dem Backend.

Backends können in etlichen Sprachen entwickelt werden, sehr beliebt sind jedoch die Sprachen JavaScript, Python, Ruby und PHP. Je nach Anwendungsfall nutzen Webentwickler die richtige Sprache für das entsprechende Projekt.

Um zurück zu unserem Beispiel zu kommen: Eine Idee wäre es, in einer Datenbank alle Postleitzahlen und die dazugehörigen Strompreise pro Anbieter abzuspeichern. Dann ließe sich nun eine Schnittstelle entwickeln, die zu einer Postleitzahl alle Strompreise der Anbieter zurückgibt. Das Frontend würde diese Schnittstelle aufrufen und könnte das Ergebnis dann als Liste anzeigen.

Oftmals stellen Einsteiger sich an diesem Punkt die Frage, ob ein Backend überhaupt benötigt wird, denn die Daten könnten ja schon direkt im Frontend vorliegen. In diesem Beispiel würde das gehen, doch mit größeren Datenmengen folgt das schnell zu Leistungsproblemen. Und noch eine zweite Sache erschwert dieses Vorgehen. Wenn wir an personalisierte oder sicherheitskritische Daten denken, dann müssen wir diese vor anderen Benutzern verstecken. Das geht nur über ein Backend, welches den Zugang kontrolliert, schützt und Benutzern nur das gibt, was sie sehen dürfen.

Eine letzte Aufgabe wird auch im Backend erledigt: Ändert sich ein Strompreis eines Anbieters, dann müssen diese Daten letztendlich auch bei der eigenen Datenbank ankommen. Dies erfolgt durch eine wiederkehrende Aufgabe. Beispielsweise könnte diese so aussehen, dass sie alle 24 Stunden die Datenbank des externen Anbieters aufruft und sich die neuen Strompreise holt.

Infrastruktur - das, auf dem alles aufbaut:

Die Infrastruktur stellt alle erforderlichen Ressourcen bereit, die die Webanwendung zum Laufen benötigt. Die folgende Liste stellt einige dieser Ressourcen vor:

• Eine Domain sichert Ihnen die Adresse im Web, zum Beispiel www.dakitec.de
• Ein Web-Server liefert das Frontend und die Backend-Schnittstellen über diese Adresse aus, damit der Nutzer die Webanwendung im Web aufrufen kann.
• Ein E-Mail-Server sorgt für die Zustellung von E-Mails aus Ihrem System
• Eine Datenbank sorgt für das dauerhafte und sichere Speichern von Kundendaten und Inhalten in Ihrer Webanwendung
• Ein CDN (=Content Delivery Network) sorgt für das schnelle Ausliefern von Medieninhalten.

Zusätzlich muss die Infrastruktur gängige Probleme wie Sicherheit, Backups, Monitoring oder auch die Skalierbarkeit einer Webanwendung angehen.

Zusammenfassend lässt sich festhalten: Das Frontend kümmert sich um die Ansicht für den Benutzer, das Backend kümmert sich um die Logik und die Datenverarbeitung. Die Infrastruktur dient als Grundlage für die Ausführung von Frontend und Backend.