Vor Kurzem ging die erste Version von Hellomath online. Dabei handelt es sich um eine Mathematik-Lernplattform für die österreichische Zentralmatura, die ich mitentwickelt habe. Dieser Blogpost soll Einblick in einige technische Details geben.

Grob ist der Aufbau der gesamten Anwendung in vier Bereiche unterteilt: Die Informationswebsite der Plattform (erreichbar unter hellomath.at), Das Frontend der eigentlichen Plattform (erreichbar unter app.hellomath.at), das Backend (erreichbar unter api.hellomath.at) und ein eigener Bereich für statische Inhalte (erreichbar unter staticstuff.hellomath.at).

Die Infowebsite

Die Informationswebsite zeichnet sich dadurch aus, dass sie keine umfangreichen dynamischen Inhalte enthält. Sie sieht für jeden, der sie besucht, gleich aus. Hier macht es also Sinn, Inhalte einmalig am Server rendern zu lassen, um sie dann schneller an den Besucher oder die Besucherin der Website ausliefern zu können. Hierfür wird Next.js eingesetzt. Next.js ist ein Framework für React, das es möglich macht, Websites unter Verwendung der "herkömmlichen React-Mechanismen" zu gestalten, aber um die Möglichkeit der Erstellung von statischen Seiten und des serverseitigen Renderns erweitert ist. Immer wenn nun eine Änderung an der Website vorgenommen wird, generiert der Server das HTML. Fordert nun eine Benutzerin oder ein Benutzer die Website an, muss nur mehr das HTML an sie oder ihn ausgeliefert werden, wodruch die Seite beim User schneller angezeigt werden kann. Ein weiterer Vorteil von Next.js ist die bessere Optimierung für Suchmaschinen (SEO). Mit Next.js können Parameter wie description, title und Open-Graph-Inhalte gezielter festgelegt werden.

Für die Auslieferung der Website wird Vercel verwendet. Der Vorteil hierbei ist, dass die Website nicht von einem einzigen Server an die Besucherinnen und Besucher ausgeliefert wird, sondern von einem globalen Edge-Netzwerk. Das bedeutet, dass die Daten der Seite immer auf mehreren Servern weltweit liegen, wodruch die Auslieferung immer durch den nähesten Server erfolgen kann. Man könnte meinen, dass das für eine Website, die ohnehin fast nur in Österreich aufgerufen wird, etwas overengineered ist. Aber why not.

Das Frontend

Beim Frontend kommt React (ohne Next.js) zum Einsatz, da wir es hier mit umfangreichen dynamischen Inhalten zu tun haben. Beispielsweise zeigt die Seite "Mein Profil" jedem User seine individuellen Daten und Einstellungen. Man hätte hierfür natürlich auch Next.js einsetzten können, die Implementierung unter der Verwendung von "purem" React gestaltete sich aber als einfacher. Die Rolle von React hierbei kann man kurz und knapp wie folgt zusammenfassen: React lädt immer nur Inhalte, die auch geladen werden müssen. Hat eine Website beispielsweise auf allen Seiten eine Navigationsleiste, würde diese bei einer "herkömmlichen" Website bei jedem Seitenwechsel innerhalb der Website neu geladen werden. React gleicht bei jedem Wechsel die bereits geladenen Komponenten mit denen, die geladen werden sollen, ab und lädt nur das, was nötig ist. In der Regel bedeutet das eine angenehmere User-Experience, da die Anwendung so schneller auf Bennutzereingaben reagiert.

Das Backend

Während das Frontend mehr oder weniger nur die grafische Benutzeroberfläche der Anwendung darstellt, beherbergt das Backend die eigentliche Funktionalität. Es unterhält sich mit dem Frontend über JSON-Objekte. Das bedeutet konkret, dass bei jeder Interaktion des Users mit dem Frontend ein JSON-Objekt an das Backend gesendet wird. Dort wird die Interaktion verarbeitet und dann eine entsprechende Antwort als JSON-Objekt an das Frontend geschickt. Das Backend kann im Zuge einer Benutzerinteraktion auch mit der Datenbank interagieren um Daten zu speichern oder abzufragen. Als Datenbank kommt bei Hellomath ganz klassisch MySQL zum Einsatz, was bedeutet, dass die Daten in mehreren Tabellen organisiert sind. Beim Backend fiel die Wahl auf Flask, ein Python Framework, das sich für unsere Zwecke sehr gut eignet. Das Backend läuft zwar auf einem einzigen Server, versteckt sich aber hinter dem Netzwerk von Cloudflare, das unseren Server vor bösartigen Anfragen und Denial-of-Service-Angriffen schützt.

Cloudflare liefert auch statische Inhalte für das Frontend aus. Gemeint sind damit beispielsweise die Abbildungen, die zusammen mit manchen Lernfragen angezeigt werden. Während die Text für Fragen und Antwortmöglichkeiten aus der Datenbank geladen und an das Frontend gesendet werden, liegen diese Abblidung bereits als Bilddateien am Server vor. Cloudflare behält diese Bilddateien in einem Cache auf zahlreichen Servern, um diese dann umso schneller ausliefern zu können.

Fazit

Damit Hellomath funktioniert, kommen zahlreiche unterschiedliche Frameworks und Technologien zum Einsatz. Den Einsatz von Edge-Netzwerken könnte man auf den ersten Blick als overengineered bezeichnen, ist aber auf jeden Fall sinnvoll. Einerseits schützt es den Origin-Server vor Angriffen, andererseits können Inhalte so schneller an die User übertragen werden. Kurz gesagt bieten die eingesetzten Technologien die, unserer Meinung nach, beste User-Experience. Auch wenn wir uns bereits freuen würden, wenn nur eine einzige Benutzerin oder ein einziger Benutzer unsere Plattform verwendet, ist das System darauf ausgelegt, auch unter großer Last noch normal arbeiten zu können.

Ich hoffe, dieser Beitrag konnte einen kleinen Überblick über die Funktionsweise von Hellomath bieten.