Der Weg zur eigenen Web-App #1: Einführung

In diesem Tutorial lernst Du, wie moderne Webanwendungen (Web-Apps) aufgebaut sind und wie Du selber eine erstellen kannst.

Zuallererst möchte ich den Unterschied zwischen einer Web-App und einer Website oder Homepage erklären.
Eine Website besteht aus statischen Inhalten, das Aussehen der Seite verändert sich nicht bzw. gibt es keinen nutzergenerierten Inhalt (z. B. https://www.w3schools.com).
Bei einer Web-App werden jedoch dynamische Inhalte dargestellt und es können auch welche durch Benutzer oder Administratoren hinzugefügt werden (z. B. https://facebook.com).

Komponenten

Eine Web-App besteht aus mehreren Komponenten oder auch Anwendungen, die untereinander kommunizieren.

Frontend

Das Frontend übernimmt dabei die Darstellung der Inhalte für den Benutzer. Bei einer Webanwendung besteht dieses aus HTML. Es gibt zwei Arten von Web-Apps, das Rendern im Client und im Server.
Beim serverseitigen Rendern gibt der Server ein HTML-Dokument zurück, in welchem die darzustellenden Informationen bereits im gewünschten Format abgebildet sind. Wenn auf eine andere Seite innerhalb der App navigiert wird, lädt der Client ein neues HTML-Dokument vom Server.
Beim clientseitigen Rendern lädt der Client zuerst das HTML-Dokument und das JavaScript, danach werden die Informationen vom Backend geladen. Das JavaScript erstellt aus den Daten das HTML und stellt dieses dar. Durch das einmalige Laden des HTMLs und des JavaScripts ist es möglich eine sogenannte Single Page Application (SPA) zu entwickeln, dabei werden beim Navigieren auf eine andere Seite nur die Informationen geladen und nicht wie diese dargestellt werden. Damit können Ladezeiten erheblich reduziert werden.

Backend

Die Erstellung, Verwaltung und Speicherung der Inhalte erledigt das Backend. Backendserver können in fast jeder Programmiersprache entwickelt werden. Häufig werden hierfür beispielsweise Java, C# und Python verwendet. Das Frontend stellt eine Anfrage an das Backend, welches daraufhin Daten aus der Datenbank liest, diese aufbereitet und in einem maschinenlesbaren Format darstellt. Meistens kommunizieren das Backend und das Frontend in den Formaten JSON (JavaScript Object Notation) sowie XML. Besonders im SPA und JavaScript Bereich wird häufig JSON verwendet.

{
    "posts": [
        {
            "id": 1,
            "title": "Beispieltitel",
            "text": "Dies ist ein Beispieltext.",
            "createdBy": "ExampleUserId1"
        },
        {
            "id": 2,
            "title": "Beispieltitel 2",
            "text": "Dies ist ein weiterer Beispieltext.",
            "createdBy": "ExampleUserId2"
        }
    ]
}

Beispieldaten im JSON Format

Datenbank

Eine Datenbank speichert und verwaltet Daten langfristig. Meistens werden relationale Datenbanken verwendet, d.h. die Daten werden in Tabellen abgespeichert. SQL ist die meistgenutzte Abfragesprache für relationale Datenbanken.

Frameworks

In diesem Tutorial verwenden wir Angular (für das Frontend), Spring Boot (für das Backend) sowie MySQL (als Datenbank).
Angular wird mit einer Erweiterung von Javascript namens TypeScript geschrieben, welche die Sprache um Objektorientierung und Typisierung erweitert. TypeScript wird vor dem Hosten in Javascript umgewandelt, da nicht alle Browser TypeScript unterstützen.
Spring Boot ist ein Java-Framework, welches umfangreiche Funktionen wie Dependency Injection, ORM-Mapping (Klassen auf SQL-Tabellen mappen), HTTP-Schnittstellen und Authentifizierung bietet.
MySQL ist eines der gängigsten Open-Source-Datenbanksysteme für nicht-kommerzielle Projekte.