Daten in einer Datenbank zu speichern ist die eine Sache, wichtig für eine Anwendung ist aber vor allem, dass ein Frontend diese Daten darstellen kann. Wir benötigen daher eine Anwendung, die Informationen aus der Datenbank ausliest, diese darstellt und Nutzereingaben an die Datenbank zurück übermittelt.
Moderne Webseiten verwenden hierfür Systeme, die in HTML, CSS und JavaScript geschrieben werden.
HTML – ein Accronym für Hypertext Markup Language – übernimmt dabei die Aufgabe, Informationen und Inhalte zu strukturieren und über Hyper-Links zu verknüpfen.
Cascading Style Sheets sind Vorgaben zum Design – dem Styling – einer HTML-Seite. Die Idee beim Zusammenspiel ist, dass HTML und CSS unabhängig voneinander strukturiert sind. So soll der Inhalt (HTML) für sich stehen und seiner inneren Logik folgen ohne auf ein bestimmtes Design abgestimmt zu sein. Im Idealfall kann der Look einer Seite durch Style Sheets komplett frei gestaltet werden.
Während HTML eine reine Auszeichnungs-Sprache ist, die einen Text strukturiert und CSS als Style-Sheet-Sprache das Erscheinungsbild in relativ starren Vorgaben definiert, ist JavaScript eine Programmiersprache, mit der sich formal logische Algorithmen erstellen lassen. JavaScript wird im Web-Kontext vor allem dafür genutzt, den Aufbau des HTML-Dokuments (DOM) dynamisch, je nach Nutzer-Interaktion – im Browser zu verändern. So kann mit Hilfe von JavaScript bei einer Formular-Eingabe überprüft werden, ob die Eingaben plausibel sind – zum Beispiel ob in ein E-Mail-Adress-Feld eine formal gültige E-Mail-Adresse eingeben wurde.
Beim ursprünglichen Web-Auftritt wurden einzelne HTML-Seiten miteinander verknüpft – wurde ein Link auf einer Seite angeklickt, veranlasste dies den Browser dazu, eine andere HTML-Datei zu öffnen und anzuzeigen.
Moderne Webseiten funktionieren hingegen so, dass ein einziges, rudimentäres HTML-Dokument geladen wird, welches mit einer JavaScript-Applikation versehen wird, die sich erst im Browser darum kümmert, dass der gewünschte HTML-DOM aufgebaut und angezeigt wird. Wird durch die Webseite navigiert, werden keine HTML-Dateien nachgeladen sondern dynamisch mittels JavaScript das Erscheinungsbild verändert.
Solche sogenannten Web-Applikationen oder Web-Apps haben gegenüber klassischen HTML-Seiten den Vorteil, dass die Nutzerinteraktion deutlich schneller von Statten geht, da keine HTML-Seiten nachgeladen werden müssen.
Zum Erstellen solcher One-Page-Applikationen haben sich einige Frameworks etabliert, wie zum Beispiel Vue, Svelte, React oder Angular. Ihnen allen ist gemeinsam, dass sie Web-Applikationen auf HTML und JavaScript Basis erzeugen.
Da JavaScript ursprünglich nur zum Erstellen kleiner Scripte gedacht war, die sich auf eine HTML-Seite verteilen, wurde nur wenig Wert gelegt auf eine Eignung zur objektorientierten Programmierung. Auch waren die Skripte ursprünglich sehr übersichtlich, weshalb JavaScript eine dynamische Typisierung vornimmt – das bedeutet, wenn ich eine Variable definiere, muss ich nicht angeben, mit welchem Datentyp sie gefüllt wird – zum Beispiel Strings (Text) oder ganze Zahlen (Integer). JavaScript übernimmt die Typisierung je nachdem, womit die Variable gefüllt wird und ändert den Typ sogar dynamisch, wenn der Wert sich zum Beispiel von einer Zahl in einen Text ändert.
Solch eine dynamische Typisierung erscheint auf den ersten Blick sehr komfortabel und trug bestimmt auch dazu bei, dass sich JavaScript so schnell als Webstandard durchsetzen konnte, birgt aber bei komplexen Projekten die Gefahr, dass Programmierer schnell den Überblick verlieren und Variablen falsche Datentypen mitliefern, die dann während der Laufzeit zu nur schwer nachvollziehbarem und fehlerhaftem Verhalten führen.
Microsoft liefert mit TypeScript eine Lösung für dieses Problem. Bei TypeScript handelt es sich um eine stark typisierte Programmiersprache, die auch eine objektorientierte Programmierung komfortabel ermöglicht und – das ist der eigentliche Clou – in JavaScript umgewandelt / transpiliert wird, was wiederum eine Kompatibilität mit dem defakto Web-Standard sicherstellt.
Während Angular von Haus aus auf TypeScript setzt, können aber auch Vue, Svelte und React Projekte in TypeScript geschrieben werden.
Schauen wir uns jetzt noch mobile Anwendungen an, die auf Android und iOS lauffähig sind. Tatsächlich verhält sich eine mobile Anwendung sehr ähnlich wie eine Web-App. Lokal auf dem Client-Rechner läuft ein Frontend, das Daten mit einer entfernten Server-Datenbank austauscht. Geschäftslogik ist zudem im Frontend und den mobilen Apps häufig kaum vorhanden sondern befindet sich auch auf entfernten Servern, die über das Internet mit dem lokalen Frontend verbunden sind.
Originär werden mobile Apps in den Sprachen Java (Android) und Swift/ObjectiveC (iOS) programmiert, aber beide Welten können inzwischen auch in anderen Sprachen programmiert werden. Inzwischen gibt es Frameworks, die auf Webtechnologien basiert mobile Apps erstellen, die für die Endanwender nicht mehr von nativen Apps unterscheidbar sind.
Eines dieser Frameworks ist das ionic framework, welches häufig auch mit dem supabase Backend verwendet wird und zudem eine Design-Bibliothek anbietet, die sich in das Erscheinungsbild von iOS und Android perfekt einpasst.
Ich werde daher in diesem Tutorial zeigen, wie sich eine Web-App und mobile App auf Basis von supabase zusammen mit ionic und Angular umsetzen lässt.