Das Wichtigste zusammengefasst

• Web-Apps sind Anwendung, die in einem Web-Browser aufrufbar sind. Das Wort Web-App ist ein Synonym für Webanwendung.
• Beispiele für Web-Apps finden sich in allen Branchen, wie zum Beispiel im E-Commerce oder im Unterhaltungsbereich.
• Web-Apps 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.
• Die Kosten einer Web-App bestehen aus den initialen Entwicklungskosten und den laufenden Kosten des Hostings und der Wartung, welche von der Art und Größe der Web-App abhängen.

Was ist eine Web-App?

Web-Apps 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. Eine Web App wird häufig mit einer mobilen App verwechselt. Der Begriff Webanwendung ist ein Synonym für die Web-App, ebenso wie Internetanwendung oder Browseranwendung.

Web-Apps entstehen aus der Disziplin der Webentwicklung (englisch: web development). Webentwicklung ist ein Teilbereich der Softwareentwicklung.

Um eine Web-App 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.

Vorteile von Web-Apps

Web-Apps bieten eine Reihe von Vorteilen gegenüber mobilen Apps und Desktop-Anwendungen. Die wichtigsten Vorteile sind:

• Web-Apps sind immer plattformunabhängig und können somit von Smartphones, über Desktop-PCs bis hin zu TV-Geräten auf jedem Browser genutzt werden.
• Im Gegensatz zu anderen Anwendungsarten ist keine Installation nötig und daher sind Updates einfach einzuspielen.
• Durch die Verfügbarkeit im Internet ist ein einfacher Zugriff jederzeit möglich.
• Durch die Leichtgewichtigkeit entstehen geringe Wartungskosten verglichen mit anderen Anwendungsarten.

Web-Apps bieten somit eine Menge Möglichkeiten, um die eigenen Geschäftsprozesse zu optimieren. Beispielsweise hilft eine Web-App einem Unternehmen dabei, bisher manuelle Prozesse zu automatisieren. Aber auch im Bereich der Unternehmenskommunikation können Web-Apps helfen, die Kommunikation zu vereinfachen. Ein weiterer Vorteil von Web-Apps ist die Möglichkeit, Einnahmen zu generieren. Dies kann beispielsweise durch den Verkauf von Abonnements, Produkten oder Dienstleistungen geschehen.

Beispiele von Web-Apps

Web-Apps 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.de
  • Marktplätze wie Ebay.de
• 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.com
  • Video-Plattformen wie YouTube.com
  • Streaming-Plattformen wie twitch.tv
  • 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 Web-App

Der Aufbau einer Web-App 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 Web-App 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 Web-App aufbaut
• CSS (=Cascading Style Sheets) liefert darauf aufbauend das Design
• JavaScript bringt Logik, Funktionalität und Dynamik in die Web-App

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 Web-App sitzt. Hier werden Daten verarbeitet, aufbereitet, aus Datenbanken geholt und in Datenbanken gespeichert. Benutzer einer Web-App 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 Web-App 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 Web-App 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 Web-App
• 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 Web-App 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.

Was kostet eine Web-App?

Die Kosten einer Web-App unterteilen sich in die initialen Entwicklungskosten sowie die laufenden Kosten des Hostings und der Wartung.

• Die initialen Entwicklungskosten sind immer individuell und werden primär durch den Funktionsumfang Ihrer Web-App bestimmt.
• Die Kosten für das Hosting zahlen Sie für die Bereitstellung der Infrastruktur, in der Ihre Web-App samt Frontend und Backend läuft. Dazu kommt noch eine Gebühr für die Wartung Ihrer Web-App. Alles in allem gilt: Je mehr Nutzer Ihre Web-App hat, desto höher sind die Kosten für das Hosting und die Wartung. Jedoch hängt es in vielen Fällen von der Art Ihrer Web-App ab. Haben Sie eine Anwendung, welche vor allem textbasiert ist, macht das beispielsweise einen großen Unterschied verglichen mit einer Videoplattform.

Weitere Details zur Schätzung der Kosten von Software-Projekten im Allgemeinen finden Sie in unserem Beitrag über die Kosten der Softwareentwicklung.

Hey Dakitec’,

könnt Ihr mein App-Projekt entwickeln?

Sehr gerne,

da sind Sie hier richtig!

Mehr erfahren