1    Die Grundlagen verstehen

In diesem Kapitel geht es zunächst darum, Ihnen einen Überblick über die Webentwicklung zu geben und die wichtigsten Begrifflichkeiten zu erläutern.

Jeder spricht von Fullstack-Entwicklung, doch um zu verstehen, was das eigentlich ist, müssen wir uns erst mal mit den Grundlagen beschäftigen. Im ersten und im zweiten Teil dieses Kapitels geht es genau um diese Grundlagen, bevor wir uns im dritten Teil des Kapitels dem BegriffFullstack-Entwicklung widmen.

1.1    Begrifflichkeiten

In diesem Teil möchte ich Ihnen zunächst eine Übersicht über wichtige Begrifflichkeiten geben, die in der Webentwicklung relevant sind. Anschließend schauen wir uns dann den grundsätzlichen Aufbau von Webanwendungen an.

1.1.1    Client und Server

Webseiten undWebanwendungen (Definition und Unterschied siehe Kasten) bestehen aus einem Teil, der auf derClientseite ausgeführt wird (demFrontend), und einem Teil, der auf derServerseite ausgeführt wird (demBackend). Auf Serverseite sorgt einWebserver dafür, dass die Webseite bereitgestellt wird. Auf Clientseite greift man über einenWebclient (auch nurClient oder auchUser Agent genannt) auf die Webanwendung zu. In der Regel handelt es sich dabei um einenWebbrowser (kurz:Browser), aber es gibt auch noch andere Arten von Clients wie beispielsweiseScreenreader, kommandozeilenbasierte bzw. programmatisch gesteuerteHTTP-Clients oder sogenannteHeadless Browser, die keine grafische Oberfläche haben.

Ruft man im Browser eine Webseite auf, ist der Ablauf dabei folgender: Auf Clientseite gibt der Nutzer im Browser die Adresse ein (auchURL fürUniform Resource Locator, siehe auch nächster Abschnitt) und bestätigt mit entsprechender Taste bzw. entsprechendem Button im Browser das »Laden« der Webseite. Der Browser generiert daraufhin im Hintergrund eineAnfrage, die über dasHTTP-Protokoll (Kapitel 5, »Webprotokolle verwenden«) an den Server gesendet wird. Diese Anfrage nennt man auchHTTP-Anfrage oderHTTP-Request. Auf Serverseite nimmt der Webserver die Anfrage entgegen und generiert eine passendeAntwort (HTTP-Antwort bzw.HTTP-Response), die er dann an den Client zurückschickt. Der Browser wiederum nimmt die Antwort entgegen undrendert, sprich, visualisiert die Webseite. Eventuell benötigte Ressourcen wie Bilder etc. lädt der Browser dabei automatisch nach, damit sie dargestellt werden können.

Abbildung 1.1     Das Prinzip von Client und Server

1.1.2    Zusammenhang von URLs, Domains und IP-Adressen

Die Adresse, die man in die Adressleiste des Browsers eingibt, wird wie erwähnt alsURL (Uniform Resource Locator) bezeichnet. Beispiele für URLs sind:

• https://www.philipackermann.de/

• https://www.philipackermann.de/static/img/profile.jpg

• https://www.webdevhandbuch.de/static/styles/styles.css

• https://www.webdevhandbuch.de/service/api/users?search=max

Eine URL besteht dabei aus verschiedenen Teilen:

Abbildung 1.2     Aufbau von URLs

• Protokoll/Schema: Definiert das zu verwendende Protokoll. Mögliche Protokolle sind beispielsweise:

  • HTTP (Hypertext Transfer Protocol): Für das Übertragen von Webseiten wird das Protokoll HTTP verwendet oder dessen sichere VarianteHTTPS (Hypertext Transfer Protocol Secure).

  • FTP (File Transfer Protocol): Dieses Protokoll dient dem Übertragen von Dateien zu oder von einem FTP-Server.

  • SMTP (Simple Mail Transfer Protocol): Dieses Protokoll kommt für das Übertragen von E-Mails zum Einsatz.

• Host (auchHostname): Identifiziert den Webserver eindeutig. Der Host besteht dabei ausSubdomain,Domain undTop-Level-Domain. Der Host »www.philipackermann.de« beispielsweise besteht aus der Subdomain »www«, der Domain »philipackermann« und der Top-Level-Domain »de«.

• Port: Gibt an, über welchen »Kanal« auf den Webserver zugegriffen werden soll. In der Regel werden Sie diesen Teil beim »normalen Browsen« nicht sehen, da dieStandardports (beispielsweise 80 für HTTP oder 443 für HTTPS, siehe auchhttps://de.wikipedia.org/wiki/Liste_der_standardisierten_Ports) von den Browsern in der Adressleiste nicht angezeigt werden. Für die lokale Entwicklung und insbesondere für die Entwicklung von Webservices (Kapitel 13, »Programmiersprachen auf der Serverseite verwenden«) werden Sie es allerdings häufiger mit individuellen Ports zu tun haben. Beispielsweise könnte eine URL eines lokal auf Ihrem Rechner laufenden Webservices so aussehen: »http://localhost:8080/myservice/api/users«.

• Pfad (auchPath): Gibt den Pfad auf dem Webserver zu der angefragten Datei an (bzw. allgemeiner zu der angefragtenRessource, weil es sich nicht immer um eine Datei im physischen Sinne handeln muss). In der URL »https://www.philipackermann.de/static/img/profile.jpg« beispielsweise ist »/static/img/profile.jpg« der Pfad. Der Pfadtrenner ist dabei immer ein vorwärts gerichteter Schrägstrich (Slash).

• Query String: Hierüber können in Form von Schlüssel-Wert-Paaren zusätzliche Informationen übergeben werden, anhand derer der Webserver die HTTP-Antwort generieren kann. Der Query String wird dabei über ein Fragezeichen eingeleitet, die einzelnenQuery-String-Parameter sind durch ein kaufmännisches »Und« verbunden und die Schlüssel und Werte jeweils durch ein Gleichheitszeichen getrennt, also zum Beispiel »https://www.philipackermann.de/example?search=javascript&display=list«.

• Fragment: Hierüber können Sie gezielt eine bestimmte Stelle innerhalb der jeweiligen Webseite »ansteuern«, sodass der Browser beim Laden der Webseite direkt dorthin »springt«. Eingeleitet wird dieser Teil durch das #-Zeichen, also beispielsweise »https://www.philipackermann.de/example#chapter5«.

IP-Adressen und DNS

Jeder Webserver hat eine eindeutige Adresse, über die er erreichbar ist: die sogenannteIP-Adresse, wobei mittlerweile zwischenIPv4 undIPv6 unterschieden wird. Technisch gesehen handelt es sich im Falle von...