Zusammenfassungen

1 Architektonische Fundamente:

Auch 30 Jahre nach seiner Erfindung ist das Web ein dynamisches Medium, was sich ständig weiterentwickelt. Ursprünglich für den wissenschaftlichen Austausch gedacht, hat es mehr und mehr Domänen teilweise stürmisch erobert. Dabei ist auch die technische Komplexität gewachsen. Heutige Webanwendungen sind nicht mehr mit denen zu Beginn der Entwicklung vergleichbar und werden heute mit modernen Entwurfsmustern, wie MVC, gestaltet.

Browser wurden im Laufe der Zeit zu immer mächtigeren Instrumenten. Dazu hat besonders die Programmierbarkeit mit JavaScript beigetragen. Aus der ursprünglichen Idee der Browser, lediglich die Darstellung der Webseiten zu übernehmen, sind in der Zwischenzeit umfangreiche Plattformen geworden, auf denen komplexe Applikationen laufen können. Selbst für Programme, wie Word oder Excel gibt es heute Browserbasierte Varianten, die fast alle Funktionalitäten ihrer nativen Pendants beherrschen und auf jedem Browser ausgeführt werden können.

Neben der Komplexität ist außerdem zu beobachten, dass das Web auf immer mehr Endgeräten verfügbar ist. Egal ob es Handys, Tablets oder Fernseher sind, fast überall steht ein Browser zur Verfügung. Viele „echte“ Apps werden im Hintergrund auch mit Web-Technologie entwickelt, weil sie dann mit geringem Aufwand auch im Browser zur Verfügung stehen, wenn jemand keine App installieren möchte. Spannend sind auch die Überlegungen, die dritte Dimension mit in Webanwendungen zu übernehmen und diese auf VR- oder AR-Brillen verfügbar zu machen.

Aus der Web-Entwicklung ist somit eine Disziplin der Software-Entwicklung geworden. Deswegen werden zunehmend auch die Methoden des Software-Engineerings auf Web-Entwicklung angewendet und das gesamte Thema professionalisiert sich.

2 Werkzeuge der Webentwicklung:

Es gibt eine Vielzahl von Entwicklungstools, mit denen Webseiten erstellt werden können. Technisch sind diese gar nicht unbedingt notwendig, denn durch das Text-basierte HTML-Format könnte alles auch direkt mit einem einfachen Texteditor entwickelt werden. Das ist heute nur noch in den wenigsten Fällen praktikabel.

Stattdessen kommen Entwicklungsumgebungen zum Einsatz, die viele Routineaufgaben deutlich erleichtern und sehr gut in die Webentwicklung integriert werden können. Es gibt kommerzielle Tools, wie z. B. Webstorm, aber auch viel frei verfügbare Software. In diesem Kurs wird das äußerst beliebte Visual Studio Code von Microsoft eingesetzt, das sich sehr komfortabel bedienen und über Plug-ins erweitern lässt – dabei ist es kostenlos und frei verfügbar.

Durch die Größe und Komplexität der Webanwendungen werden diese heute nur noch selten von Einzelpersonen entwickelt – fast immer sind ganze Teams beteiligt. Um sich bei Änderungen nicht zu stören und die Revisionssicherheit zu gewährleisten, erfordert diese Zusammenarbeit ein Konfigurationsmanagement. In dem Bereich hat sich git als Tool durchgesetzt und wird auch von fast allen großen Projekten in der Softwareentwicklung eingesetzt. Git lässt sich hervorragend in Visual Studio Code integrieren.

Webentwicklung basiert heute häufig auf existierenden Frameworks und Bibliotheken, die teilweise komplexe Abhängigkeiten haben. Damit man sich hiermit nicht selbst beschäftigen und diese auflösen muss, gibt es Paketmanager, die diese Aufgabe automatisiert übernehmen und nur den Code mit ausliefern, der auch wirklich benötigt wird. Die Webanwendung muss nach Fertigstellung noch auf den Server übertragen werden – dieser Prozess nennt sich Deployment und wird auch von Tools unterstützt.

3 Entwicklung von statischen Webseiten:

HTML und CSS stellen die Basis für die Entwicklung ganzer Websites, aber auch Online-Shops usw. dar. Dabei bilden sie ein sehr ungleiches Paar. HTML ist eine einfache, semantische Seitenbeschreibungssprache mit einer übersichtlichen Menge an Tags. Für viele Anforderungen gibt es eine „richtige“ Variante, wie diese in HTML abgebildet werden können. Als Daumenregel kann man sich merken, dass der HTML-Markup möglichst einfach und semantisch sein sollte – dann hat man alles richtig gemacht.

Demgegenüber steht CSS mit einem sehr komplexen System an Selektoren, die hierarchisch aufgebaut sind und Eigenschaften an die darunterliegenden Elemente vererben. CSS ist eng verbunden mit dem Layout der Webseiten, für die es sehr komplexe Regeln gibt, die hier nur im Ansatz besprochen wurden. Auch für professionelle Web-Entwickler:innen sind diese nicht immer einfach zu durchschauen. Dazu kommt eine riesige Menge an Eigenschaften und Eigenschaftswerten, die über CSS gesetzt werden können. Hier hilft oft nur ein Nachschlagewerk wie MDN (n. d.-a), um alle möglichen Varianten nutzen zu können. Eigenschaften und die dazugehörigen Werte sind auch einem ständigen Wandel unterworfen und werden durch die Browserhersteller regelmäßig ergänzt.

Glücklicherweise besitzen alle modernen Browser einen sog. Web Inspector, mit dem sich die CSS-Selektoren und Regeln überprüfen lassen. Aber nicht nur das, sie lassen sich auch auf der aktuellen Webseite verändern und haben dann direkt Einfluss auf das Layout der Seite. So kann man sich CSS explorativ erschließen und mit den Selektoren und Eigenschaften experimentieren, um die Ergebnisse schließlich in die Seite selbst übernehmen zu können.

4 Erweiterte Konstruktionstechniken:

Wie Browser aus einer HTML-Seite und dem dazugehörigen CSS ein Layout berechnen, ist ein komplexer Prozess. Grundsätzlich unterscheiden die Layout-Engines zunächst zwischen den Block- und Inline-Elementen, die anderen Darstellungsregeln unterworfen werden. Allein damit ließe sich aber kein Layout erzeugen, was den Ansprüchen der Benutzenden an Bedienbarkeit und Ästhetik entspricht.

Mit der „float“-Eigenschaft steht eine Möglichkeit zur Verfügung, die Reihenfolge der Darstellung von Block-Elementen zu beeinflussen. Diese können je nach Platz dann nebeneinander oder übereinander dargestellt werden. Lange Zeit war das auch die bevorzugte Möglichkeit, komplexe Web-Layouts zu realisieren. Allerdings kämpft das Verfahren mit einigen Unzulänglichkeiten, die durch die Flexbox behoben wurden. Viele moderne Websites oder Frameworks setzen daher heute auf das Flexbox-Verfahren.

Neben dem Desktop-Browser gibt es sehr viele andere Endgeräte, wie etwa Smartphones, Tablets oder auch Fernseher. Aus Aufwandsgründen kann nicht für jedes Endgerät eine eigene Website erstellt werden. Mithilfe der CSS Media Queries können spezielle Regeln für diese Endgeräte angegeben werden, mit deren Hilfe sich eine optimierte Darstellung umsetzen lässt. So kann z. B. auf dem Smartphone die gesamte Breite für den Content genutzt werden, während sich auf dem Desktop links daneben noch eine Navigation befindet.

CSS-Frameworks nehmen den Entwickelnden viel dieser Handarbeit ab und arbeiten meistens mit einem Gitter/Raster, auf dem sich die Elemente anordnen lassen. Die Breite kann dann endgeräteabhängig gewählt werden, sodass sich eine optimierte Darstellung ergibt. Das beliebteste Framework ist Bootstrap, wobei auch weitere, wie Tailwind, Foundation und Bulma, existieren. Für die Entwicklung von Web-Apps finden sich spezielle Frameworks, wie Material Design, die der Web-App ein (nahezu) natives Aussehen verleihen.

5 Webseitenentwicklung mit JavaScript:

JavaScript ist eine objektorientierte, dynamisch typisierte, C-ähnliche Programmiersprache, die in allen Browsern zur Verfügung steht und dazu verwendet werden kann, Webseiten clientseitig dynamisch zu gestalten. In seiner modernen Form wurde JavaScript als ECMAScript standardisiert. Die Version 7 kann von allen modernen Browsern verarbeitet werden.

Wie viele andere Programmiersprachen hat auch JavaScript if-Anweisungen und bietet unterschiedliche Varianten für Schleifen an. Ein entscheidendes Merkmal von JavaScript sind die Funktionen – teilweise ist es an die funktionale Programmierung angelehnt und ermöglicht damit sehr elegante Konstrukte. Die zentrale Datenstruktur in JavaScript ist das Object, das aus Schlüssel-Wert-Paaren besteht und verschachtelt werden kann. In neueren Sprachversionen hat JavaScript auch den Umgang mit Klassen gelernt und so die objektorientierte Programmierung im Vergleich zu den vorher notwendigen Prototypen deutlich vereinfacht.

Mehr und mehr hat sich JSON als Datenformat etabliert. Es dient sowohl zum Datenaustausch als auch zur Speicherung von Daten. Der große Vorteil ist dabei die einfache Integrierbarkeit in bestehende Applikationen, weil das Format direkt von JavaScript interpretiert und in Objekte gewandelt werden kann.

Für komplexe clientseitige Web-Applikationen gibt es viele Frameworks, die die Arbeit mit JavaScript strukturieren und Routineaufgaben erleichtern. Als Vorreiter ist diesbezüglich Jquery anzuführen, das aber in modernen Anwendungen nicht mehr verwendet werden sollte. Heute sind React.js und Vue.js die populärsten Frameworks, die von vielen großen Websites eingesetzt werden.

6 Testen und Sicherheit von Webanwendungen:

Moderne Software wird immer komplexer, gleichzeitig aber auch geschäftskritischer. Dieser Trend ist auch bei Web-Applikationen zu beobachten. Weil sich Fehler in der Software, z. B. in einem Online-Shop, direkt durch Umsatzverluste bemerkbar machen, ist das Testen der Software absolut entscheidend. Damit können Fehler schon im Vorfeld erkannt und behoben werden.

Software kann auf unterschiedlichen Ebenen getestet werden. Sehr populär sind Unit-Tests, die die einzelnen Funktionseinheiten unabhängig voneinander testen. So können Teams parallel an der Softwareentwicklung arbeiten und dabei sicherstellen, dass ihre Änderungen nicht die Stabilität des Gesamtsystems beeinflussen. Um Tests strukturiert durchzuführen, gibt es unterschiedliche Frameworks, die auch in einen automatischen Test integriert werden können.

Eine neue Entwicklung ist die testgetriebene Entwicklung. Dabei werden zuerst Tests implementiert und danach die eigentliche Funktionalität. Da es auch schon vorher zu Missverständnissen zwischen Anforderungen und Implementierung kommen kann, kann dies durch verhaltensgetriebene Entwicklung ergänzt werden, in der die fachlichen Anforderungen so formalisiert werden, dass sie von den Anfordernden verstanden, aber auch automatisiert in Tests gewandelt werden können.

Häufig werden sensible Daten in Webanwendungen verarbeitet. Hier muss besonderes Augenmerk auf die Sicherheit gelegt werden. OWASP stellt eine Liste von häufigen Sicherheitsproblemen zusammen, die besonders oft für Attacken verwendet werden. Eine besonders gern ausgenutzte Sicherheitslücke sind die Cross-Site-Scripting-Attacken, mit denen Angreifende interne Informationen auslesen und für sich verwenden können. Sorgfalt bei der Programmierung, ausführliche Tests und sichere Protokolle können dabei helfen, die meisten Sicherheitsprobleme zu verhindern.