Was ist Webentwicklung?

Webentwicklung ist eine sehr dynamische Disziplin, die ständig neue Technologien und Trends hervorbringt. Sie ermöglicht es Unternehmen ihre Präsenz im digitalen Raum auszubauen, Prozesse zu automatisieren und Interaktionen zu vereinfachen. Wir klären in diesem Artikel, was Webentwicklung ist und wie es funktioniert.

Das Wichtigste zusammengefasst

Die folgenden Tipps helfen Ihnen dabei, zu verstehen was Webentwicklung ist, wie Webanwendungen aufgebaut sind und wie Projekte typischerweise ablaufen:

• Aus der Disziplin der Webentwicklung entstehen Webanwendungen, die im Browser aufrufbar sind.
• 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.
• Ein Projekt läuft entweder plangetrieben oder agil ab. In jedem Fall benötigen Sie jedoch eine ausreichende Anforderungsanalyse.

Grundlagen der Webentwicklung

Webentwicklung (engl.: web development) ist ein Teilbereich der Softwareentwicklung. Das Ergebnis der Webentwicklung sind Webanwendungen. Webanwendungen sind spezielle Anwendungen, die über das Internet, genauer gesagt über einen Web-Browser (wie Google Chrome, Apple Safari oder Microsoft Edge), aufrufbar sind. Webanwendungen unterstützen somit fast jedes Endgerät wie Desktop-PCs, Notebooks, Tablets, Smartphones und sogar Fernsehgeräte.

Um eine Webanwendung abzurunden, benötigt es 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.

Webanwendungen werden in nahezu allen denkbaren Branchen und Bereichen genutzt. Um einige Beispiel aufzulisten:

• 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 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.

Grundlagen des Internets

Nachdem definiert ist, was Webentwicklung ist, schauen wir noch ein wenig hinter die Kulissen. Das Internet ist ein weltweiter Verbund von Rechnernetzwerken, die miteinander kommunizieren können. Zur gleichen Zeit gibt es noch den Begriff Web, der nicht zu verwechseln mit dem Begriff Internet ist. Während das Internet die Technologie der Kommunikation über verteilte Netzwerke ist, baut das Web darauf auf und schafft eine Umgebung für Anwendungen im Internet, auch Webanwendungen genannt.

Dann stellt sich nun noch die Frage, wie das Web genau funktioniert. Immer, wenn Sie eine Anfrage ins Web schicken und zum Beispiel unsere Webseite aufrufen, dann tippen Sie die Adresse https://dakitec.de in die Adresszeile ein.

Der Browser nimmt sich zunächst den Domänen-Teil (dakitec.de) und löst diesen in eine IP-Adresse auf, was gleichbedeutend mit einer Hausnummer im Internet ist. Jeder Rechner des Internets besitzt eine solche Hausnummer, unter der dieser erreicht werden kann. Hierbei spricht man auch vom DNS (=Domain Network Service).

Nun kann der Browser die entsprechenden Dateien unter Rücksichtnahme des Protokolls https (= Hypertext Transfer Protocol Secure) zur Anzeige der Webanwendung herunterladen. Ist das erfolgt, wird die Webseite auf Ihrem Bildschirm angezeigt.

Selbstverständlich passieren an dieser Stelle noch viele weitere technische Schritte, die für das generelle Verständnis des Webs erst einmal vernachlässigt werden. Um Webanwendungen vollständig zu verstehen, ist nun als nächstes interessant, wie eine Webanwendung selbst aufgebaut ist.

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 seit 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 folgenden 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.

Ablauf eines Projekts

Nicht jedes Projekt in der Webentwicklung läuft gleich ab. Zu Beginn stellt sich die Frage, ob das Projekt agil oder plangetrieben entwickelt werden soll. Beide Methoden haben ihre Vor- und Nachteile, auf die dieser Beitrag nicht weiter eingeht. Dennoch gibt es Tätigkeiten, die in jedem Projekt unabhängig von der Methodik durchgeführt werden. Genau diese werden wir in folgendem Abschnitt klären.

Anforderungsanalyse

Einer der wichtigsten Aufgaben ist die Analyse der Anforderungen. Hierbei finden Sie in der Regel gemeinsam mit Ihrer Agentur heraus, welche Funktionalitäten Ihre Webanwendung bieten soll. Dabei gibt es zwei Arten von Anforderungen: funktionale und nicht-funktionale Anforderungen.

• Funktionale Anforderungen beschreiben, was die Webanwendung genau können muss.
• Nicht-funktionale Anforderungen beschreiben, wie die Anwendung das erledigen soll, also zum Beispiel, wie schnell oder wie zuverlässig.

Beispiel einer funktionalen Anforderung: Die Anwendung soll die Möglichkeit bieten, alle Strompreise einer bestimmten Postleitzahl zu kalkulieren und darzustellen.

Beispiel einer nicht-funktionalen Anforderung: Die Ergebnisse des Strompreises sollen innerhalb von 1,5 Sekunden kalkuliert und angezeigt werden. Oder auch: Die Strompreise müssen tagesaktuell abgespeichert sein.

Bei plangetriebenen Modellen steht die Anforderungsanalyse vor der Gestaltung und der Entwicklung des Projekts. Dies erfolgt in der Regel in Form eines Lastenheftes.

In agilen Projekten wird die Anforderungsanalyse fortwährend angepasst und erweitert. Die Anforderungen werden hier in Form von User-Stories dokumentiert.

Ihre Agentur unterstützt Sie bei der Definition der Anforderungen, sodass Sie nicht alle Details zu den jeweiligen Ausfertigung wissen müssen.

UX & UI - Design

Der Design-Schritt unterteilt sich in zwei Abschnitte:

• Das UX-Design (=User Experience) hat das Ziel, dem Benutzer ein positives Nutzungserlebnis zu bieten.
• Das UI-Design (=User Interface) stell dafür die notwendige visuelle Gestaltung bereit.

Folglich werden die fertigen Designs an die Entwicklung weitergegeben. In komplexeren agilen Projekten kann es auch vorkommen, dass die Basiselemente gestaltet werden und alle weiteren benötigten Design-Komponenten Schritt für Schritt den Entwicklern geliefert werden, da sich Anforderungen an dieser Stelle ändern dürfen.

Entwicklung

Ein weiterer Schritt ist selbstverständlich die Entwicklung selbst, in der die Funktionalitäten Ihrer Webanwendung in Code umgewandelt werden. Wichtig ist in diesem Schritt, dass sich Agentur und Auftraggeber regelmäßig zusammensetzen, um wertvolles Feedback für die weitere Entwicklung einzuholen. Passiert das erst bei der Abnahme der Webanwendung, sorgt das häufig dafür, dass ein unerwartetes Ergebnis dabei herauskommt.

Entwickler selbst sollten in der Regel auf eine zielgerichtete Umsetzung achten, so dass keine Zeit für Funktionalität genutzt wird, die nicht benötigt wird. Des Weiteren ist es auch hilfreich, wenn Entwickler Software-Tests schreiben, um die Funktionalität zu testen. Ist alles positiv abgelaufen, steht einer erfolgreichen Abnahme nichts entgegen.

Hosting, Support und Weiterentwicklung

Ist die Entwicklung abgeschlossen, wird das Projekt veröffentlicht. Der Schritt der Veröffentlichung wird auch Release genannt. Die Webanwendung dann im Netz zu halten, nennt sich Bereitstellung (engl. Hosting). Bei umfangreichen Webanwendungen wird oftmals im Anschluss ein Support und Weiterentwicklung benötigt.