Webentwicklung: Grundlagen, Frameworks & agile Entwicklung

Websites haben sich seit ihrer Erfindung durch Tim Berners-Lee in den 1990er Jahren stark verändert. Was zu Beginn noch virtuelle Bleiwüsten mit ein paar blauen Links waren, wurden über die Jahre immer mehr zu interaktiven Unterhaltungsplattformen. Gerade mit steigender Bandbreite wurden mehr Bilder oder Videos möglich und durch höhere Rechenkapazitäten bei PCs oder Smartphones ist heute auch viel mehr Interaktivität direkt im Browser machbar. Moderne Web-Applikationen führen viele Berechnungen direkt auf dem jeweiligen Endgerät durch um möglichst schnell ein Ergebnis zu liefern. Daten werden bei Bedarf direkt mit dem Server ausgetauscht, ohne dass die Webseite neugeladen werden muss. All das führt zu einer reibungsloseren Benutzererfahrung.

Genau hier setzt moderne Webentwicklung an: Programmierer bringen die verschiedenen Komponenten aus Client- und Serverebene zusammen und ermöglichen so zeitgemäße User Experience (UX) auf Webseiten. Dabei arbeiten Web-Entwickler Hand in Hand mit Webdesignern und Online-Marketing-Experten zusammen um das Gesamterlebnis optimal zu gestalten.

In der Webentwicklung kommt es wie in jedem Fachgebiet auf die richtigen Tools und Fähigkeiten an. Da ein Großteil der Arbeit allerdings textbasiert ist, sind die Hürden für Neueinsteiger vergleichsweise niedrig. Grundlegende Programme können in einem Texteditor geschrieben werden und mit einem Browser getestet werden. Wichtiger für Webentwickler sind da die Kenntnisse in den für das Web relevanten Auszeichnungs-, Skript- und Programmiersprachen. Dazu zählen:

• HTML (Hyper Text Markup Language) bildet immer noch die Grundlage für alle Webseiten. Es handelt sich um eine Auszeichnungssprache, das heißt es werden so genannte Tags verwendet um beispielsweise Abschnitte oder Überschriften einer Website kenntlich zu machen.
• CSS (Cascading Style Sheets) ist eine Erweiterung zu HTML und ermöglich die visuelle Gestaltung der einzelnen Elemente – also z. B. welche Schriftgröße und Farbe der Text von Überschriften haben soll.
• JavaScript fügt Webseiten eine Programmlogik hinzu, die direkt im Browser ausgeführt wird. Mit JavaScript werden dynamische Webseiten ermöglicht, bei denen Elemente direkt reagieren – z. B. animierte Slideshows oder auf- und zuklappende Menüs. Die Skriptsprache basiert auf der ECMAScript-Spezifikation und wird laufend weiterentwickelt.
• PHP (PHP Hypertext Preprocessor) ist eine serverseitig eingesetzte Programmiersprache, auf der viele Web-Anwendungen wie WordPress oder Wikipedia basieren. Webseiten werden erst bei einer Client-Anfrage von einem PHP-Interpreter auf dem Server generiert und an den Client-Browser ausgeliefert. Das ermöglicht dynamisch erzeugte Webseiten, deren Inhalte z. B. anhand von Wenn-Dann-Bedingungen zusammengesetzt werden.

Wie eingangs erwähnt basierten die ersten Webseiten auf einem reinen HTML-Grundgerüst. Diese Art von Seite bietet keinerlei Anpassungsmöglichkeit an Benutzereingaben – es handelt sich also um statische Webseiten. Dem gegenüber stehen dynamische Webseiten, die entweder direkt im Browser oder aufgrund bestimmter Anfragen an den Server ihren Aufbau und Inhalt ändern können.

Im Browser geschieht dies in der Regel mit in JavaScript programmierten Funktionen, die direkt auf Gestaltung oder Aufbau im Browserfenster Einfluss nehmen – z. B. um Größe und Farbe eines Buttons verändern. Serverseitig werden viele dynamische Websites mit PHP erstellt, so auch das WordPress Content-Management-Systems (CMS) auf dem die Webseite basiert, die Sie gerade lesen. Durch die dynamische Erzeugung sind solche CMS erst möglich, aber auch viele weitere Funktionen, die heute alltäglich sind. Stellen Sie sich beispielsweise eine Auflistung von mehreren hundert Produkten in einem Online-Shop vor: ohne dynamisch erzeugte Webseite wäre hier keine Sortierung oder Filterung möglich.

Webentwicklung ist ein umfangreiches Thema, bei dem es viele Bereiche zu beachten gibt. Verschiedene Software-Komponenten müssen Hand in Hand arbeiten damit nachher alles reibungslos funktioniert. Da ist es hilfreich, wenn Entwickler auf etablierte Strukturen bauen kann, die die Arbeit erleichtern: die Rede ist von Frameworks und Bibliotheken. Diese bilden häufig genutzte Funktionen ab und stellen sie für Webentwickler bereit.

JavaScript-Bibliotheken und Frameworks

Die wohl bekannteste und von rund 75% der Websites verwendete Bibliothek stellt jQuery dar. Sie stellt diverse Funktionen bereit, die von Webdesignern und -entwicklern regelmäßig benötigt werden. Der Einsatz spart Zeit, da zum einen Funktionen nicht jedes Mal neu geschrieben werden müssen und zum anderen leichter verwendet werden können. Denn die Schreibweise von jQuery-Code ist im Vergleich zur Skriptsprache JavaScript, auf der die Bibliothek aufsetzt, stark vereinfacht.

Für komplexere Projekte lohnt sich ein Blick auf das Webframework Angular (vormals AngularJS), welches von Google unter Open-Source-Lizenz entwickelt und kostenlos zur Verfügung gestellt wird. Sowohl jQuery als auch Angular bauen auf JavaScript auf, doch da hören die Gemeinsamkeiten schon auf. Wo jQuery sich vor allem als einfache und einsteigerfreundliche Lösung für Alltagsprobleme eines Webdesigners anbietet, richtet sich Angular vor allem an Entwickler vollständiger Web-Apps. Dazu bietet es unter anderem eine Model-View-Controller (MVC) Architektur sowie die Möglichkeit zur Anbindung an REST-APIs und Nutzung von Unit-Tests.

PHP-Frameworks

Auch für die PHP-Entwicklung gibt es entsprechende Frameworks, die viele Grundlagen für Programme bereits mitliefern. Sehr beliebt ist das Laravel Framework, welches Entwicklern viel Arbeit abnimmt. Dadurch lassen sich Web-Applikationen schneller entwickeln und fertigstellen. Laravel basiert teilweise auf dem Framework Symfony und erweitert dieses um nützliche Funktionen. Viel Wert wurde bei der Entwicklung auf Sicherheit der mit Laravel entwickelten Applikationen gelegt – dazu wurden diverse Schutzmaßnahmen, z. B. gegen SQL-Injection, integriert. Auf Laravel basiert unter anderem das CMS October, welches wir für spezielle Projekte anstatt WordPress einsetzen.

Die Webentwicklung als Unterbereich der Softwareentwicklung eignet sich sehr gut für alternative Management Ansätze wie Scrum. Der Ansatz weicht dabei vom klassischen Projektmanagement ab, bei dem ein Projektmanager die komplette Planung für das Team und Kommunikation zwischen den Parteien (z. B. Team und Kunde) vornimmt. Bei Scrum hingegen wird auf Selbstorganisation des Teams gesetzt. Anstatt eines Projektmanagers gibt es neben Entwicklern und Designern im Team einen Product Owner, der vor allem die Interessen des Kunden vertritt. Dazu kommt noch ein Scrum-Master, der sich um die Einhaltung der Scrum-Regeln kümmert und als eine Art Moderator fungiert.

Das Projekt selbst wird nicht nach einem Wasserfall-Modell von oben nach unten abgearbeitet, sondern in so genannte Sprints eingeteilt. Ein Sprint stellt einen festgelegten Zeitabschnitt dar, in dem bestimmte Aufgaben bearbeitet werden und der maximal einen Monat dauert. Das Ziel ist es, Features möglichst schnell fertig zu stellen um ein Minimum Viable Product (MVP) zu erhalten. Ein MVP kann zum Beispiel ein lauffähiger Onlineshop sein, bei dem alle wichtigen Kernfunktionen implementiert wurden. Weitere Features wie zusätzliche Zahlungsarten oder eine Merkzettelfunktion werden später hinzugefügt.

Der Vorteil einer agilen Entwicklung gegenüber althergebrachtem Projektmanagement ist, dass agile Projekte im Schnitt erfolgreicher sind. Das liegt zum einen daran, dass schneller und flexibler auf geänderte Vorgaben reagiert werden kann. Zum anderen werden schneller messbare Ziele erreicht und nicht über Jahre auf ein längst überholtes Ziel hin entwickelt. Gerade in der Online-Welt ändern sich die Bedingungen laufend – eine flexible Webentwicklung trägt dazu bei, darauf besser zu reagieren und bei Bedarf einzelne Teile des Projekts anzupassen oder neu zu priorisieren.

Für viele Unternehmen stellt sich die Frage, wo sie die Entwicklung von Web-Applikationen wie Website, Online-Shop oder andere Internet-basierte Tools zum internen Einsatz entwickeln lassen. Dabei gilt es abzuwägen, ob ein In-House Webentwickler oder eine Agentur für Webentwicklung kosteneffizienter sind. Generell lässt sich sagen, dass ein Vollzeit Webentwickler-Gehalt mit durchschnittlich 3500 € (monatlich) ein großer Kostenfaktor ist. Zudem macht ein einzelner Entwickler noch keine gute Web-App – Webdesigner kümmern sich um die Benutzeroberfläche und -erfahrung, SEO-Experten arbeiten an einer guten Google-Platzierung, Projektleiter sorgen für die nötige Organisation.

Gerade für kleine und mittelständische Unternehmen lohnt sich ein eigener Webentwickler daher nur in Einzelfällen. Für größere Unternehmen kann eine interne Web-Entwicklungsabteilung dagegen sinnvoll sein. Absprachen fallen so in der Regel etwas leichter, da Entwickler in die eigenen Strukturen eingebunden sind.

Die Webentwicklung durch eine Agentur ist vorteilhaft, da bereits etablierte Teamstrukturen, ein Erfahrungsschatz mit ähnlichen Projekten und großes Fachwissen mit eingekauft werden. Im Rahmen eines einmaligen Projekts ist eine Zusammenarbeit mit einem externen Dienstleister insbesondere für Mittelständler und kleine Unternehmen eine gute Lösung. Projektbudgets werden im Vorfeld klar kommuniziert und Kosten sind dadurch gut planbar.

Der Bereich Webentwicklung ist heute nicht mehr wegzudenken, da die Komplexität von Websites deutlich zugenommen hat. Heute werden nicht mehr nur statische Webseiten erwartet, sondern vielmehr funktionale und komfortabel zu bedienende Web-Applikationen. Hier sind qualifizierte Web Developer gefragt, die sich mit der Entwicklung in Programmier- und Skriptsprachen wie JavaScript und PHP gut auskennen. Dadurch wird es nicht nur möglich Software genau nach Kundenwunsch zu programmieren, sondern auch bestehende Systeme zu erweitern. Gepaart mit modernen Organisationsformen der agilen Entwicklung werden Entwicklungsprojekte so schnell zum Erfolg geführt.

Als Digitalagentur mit Fokus auf WordPress bieten wir insbesondere für dieses CMS auf Kundenwunsch entwickelte Plugins an. Darüber hinaus arbeiten unsere Entwickler mit etablierten PHP-Frameworks wie Laravel zur Umsetzung spezieller Kundenanforderungen. Sie benötigen eine individuell programmierte Lösung für Ihre Website? Kontaktieren Sie uns gerne jederzeit.