Der neue Tech-Stack von AlekSIS: Einblicke und Ausblick

Über ein Jahr ist es her, dass wir in einem Ausblicks-Blogpost einschneidende Änderungen am Tech-Stack von AlekSIS ankündigten: Anstatt weiterhin vollständig auf Django zu setzen, sollte die Benutzeroberfläche schrittweise vom Backend entkoppelt und auf der Basis von Vue.js neu implentiert werden. Nach dem Release 2023.6 “Dewey” möchten wir nun einen Blick darauf werfen und technische Einblicke geben, was sich bislang bei AlekSIS unter der Haube geändert hat – und woran wir aktuell arbeiten.

Der bisherige Stand: Noch zukunftsfähig?

Bei der Entwicklung neuer Funktionen fiel immer wieder auf, dass der bisherige, sehr monolithische, Unterbau von AlekSIS den Anforderungen immer weniger gewachsen war. Komplexe User-Interfaces ließen sich wegen der ausbleibenden Weiterentwicklung des CSS-Frameworks Materialize schwer umsetzen, die Reaktionsgeschwindigkeit von AlekSIS war nicht zufriedenstellend und das Web-App konnte das von nativen Apps gewohnte Verhalten nicht erreichen.

Denn bislang setzte AlekSIS vollumfänglich auf das Webframework Django, sowohl zum Erzeugen der Nutzeroberfläche als auch für die Anwendungslogik und Datenverwaltung im Backend, so dass jede Seite serverseitig gerendert werden musste. Vergleichsweise lange Ladezeiten waren die Folge; außerdem konnte AlekSIS in Situationen mit instabiler Netzwerkverbindung unresponsiv werden.

Weiterentwicklung mit Vue.js und GraqhQL

Um diese Probleme zu lösen und zukunftsfähiger zu werden, sollten Frontend und Backend nun getrennt werden. Da dies eine vollständige Neuimplementierung aller UIs erfordert und der Prozess sehr aufwendig ist, ist die Migration noch nicht abgeschlossen.

Damit die Entwicklung nicht durch eine extrem lange, reine Umstellungsphase aufgehalten wird, und das Team sich dadurch keinen anderen Prioritäten hätte widmen können, wurde von Anfang an auf eine inkrementelle Herangehensweise gesetzt: Alle Ansichten, die noch auf Django-Templates basieren, erhalten seit Beginn der Migration nur noch notwendige Änderungen und ihre Funktionalität wird nicht mehr erweitert. Um das alte Frontend weiter bis zum Abschluss der Umstellung nutzbar zu machen, wurde eine Kompatibilitäts-Komponente entwickelt, welche Legacy-Seiten mittels eines Frames im neuen Frontend anzeigt. Neue Features mit neuen UIs werden hingegen konsequent mit dem aktualisierten Tech-Stack entwickelt.

Das neue Frontend ist eine Vue.js-Applikation, die selbstständig Navigationsfunktionen bietet und die notwendigen Daten über eine neue GraphQL-API im Backend abruft. Damit werden dann nur noch die benötigten Daten übertragen. Zusätzlich kommt nun die UI-Bibliothek Vuetify zum Einsatz, die auch im neuen Tech-Stack ein auf dem Material Design basierendes UI ermöglicht.

Sobald die Umstellung vollständig erfolgt ist, heißt das für AlekSIS, dass Backend und Frontend voneinander unabhängig sind und auch austauschbar werden. Mit dieser Neustrukturierung ist es deutlich leichter, neue Clients für andere Plattformen zu erstellen oder AlekSIS als Datenquelle für andere Software zu nutzen. So sind zum Beispiel individuelle, bedarfsgerechte Frontends für verschiedene Bildungseinrichtungen denkbar, ohne, dass es im Backend Änderungen geben muss. Nicht zuletzt wird so auch eine zukünftige Reimplementation des Backends auf einer anderen technischen Basis möglich.

PWA mit erweiterter Funktionalität

Zu den neuen Funktionalitäten, die durch den Wechsel des Frontends hinzugekommen sind, gehört auch eine verbesserte Progressive Web App. Bereits zuvor war die PWA, also die “lokal installierte Website”, eine beliebte Zugriffsweise auf AlekSIS. Die Neuerungen in der PWA sind dabei eine verbesserte Offline-Erfahrung – denn alles, was zur Anzeige des Frontends notwendig ist, kann lokal gespeichert werden – und ein vereinfachter Weg, die lokale Version zu aktualisieren. Wir planen für die Zukunft, immer mehr Funktionalitäten offline nutzbar zu machen, u.a. mittels eines optimierten Cachings und der vorübergehenden Speicherung von zu sendenden Daten, wie zum Beispiel Formularangaben, bis wieder eine Netzwerkverbindung vorhanden ist.

Neue Features – ermöglicht durch den neuen Tech-Stack

Ein wichtiges Feature für AlekSIS, insbesondere für die Konkurrenzfähigkeit des Systems, ist die neu entwickelte Stundenplanerstellung. Dadurch wird die Abhängigkeit von weiteren Systemen reduziert, denn bislang ließ sich die Stundenplanfunktionalität von AlekSIS nur im Verbund mit einer externen Datenquelle, wie zum Beispiel Untis, verwenden. Eine Erstellung von Stundenplänen in AlekSIS direkt war nicht möglich, was für interessierte Schulen bedeutete, dass sie trotzdem weiterhin auf eine andere, proprietäre Software angewiesen waren. Glücklicherweise konnten wir uns dabei auf eine themenspezifische finanzielle Förderung durch die German Unix User Group (GUUG) verlassen, bei der wir uns an dieser Stelle noch einmal herzlich für die Unterstützung des Projetes bedanken.

Stundenplanerstellung ist, insbesondere mit Blick auf die Nutzeroberfläche, ein komplexes Unterfangen. Denn um diese möglichst intuitiv und nah an bestehenden Prozessen zu gestalten, müssen UIs so aufgebaut sein, dass sie visuell dem Bekannten – also einem tabellarischen Stundenplan – ähneln. Gleichzeitig kann eine digitale Stundenplanerstellung leisten, was analoge Lösungen nicht schaffen: Assistenzfunktionen können zum Beispiel dabei helfen, kollidierende Stunden zu erkennen und Stundenpläne konfliktfrei zu gestalten. Der neue Tech-Stack gibt uns die Möglichkeit dazu, diese Komplexität umzusetzen.

Ein Beispiel dafür ist die neue Bibliothek vue-draggable-grid. Diese ist im Rahmen des neuen Frontends entstanden und erlaubt es, sehr leicht tabellenförmige Layouts mit Drag-&Drop-Funktionalität zu erstellen. Verwendet wird dies bereits in der Stundenplanerstellung, aber auch andere AlekSIS-Module, wie das Dashboard, werden damit zukünftig verbessert.

Gemeinsam mit dem Katharineum zu Lübeck, der Erik-Nölting-Grundschule in Hattingen sowie der Freien Schule Schöneberg wurden die Grundkonzepte der Stundenplanerstellung erarbeitet und auf Basis der neuen UI-Technologien umgesetzt. Mit einem den bestehenden Abläufen gerecht werdenden Workflow kann nun die Schulstruktur geplant, Kurse und Fächer angelegt, sowie schließlich die Stunden verteilt oder Vertretungen erstellt werden.

Verbesserungen am Datenmodell und ein neues Kalender-System

Mit der Stundenplanerstellung erhält AlekSIS nicht nur ein neues Frontend, sondern auch das zugrundeliegende Datenmodell wurde von Grund auf neu gedacht. Insbesondere erhält AlekSIS ein globales Kalendersystem, in dem sämtliche Termine in der Schule geplant und aggregiert werden. Alle Schulangehörigen erhalten so einen zentralen Überblick über alles für sie relevanten Termine sowie einen personalisierten Kalender, der sich auch mit dem Smartphone-Kalender synchronisieren lässt. Funktionen wie das digitale Klassenbuch werden flexibler, da Unterrichtsdokumentation und Stundenplan technisch voneinenader unabhängig werden. So können auch kurzfristige oder außerplanmäßige Dokumentationen erstellt werden.

Das Kalendersystem kann, basierend auf der iCal-Spezifikation, von AlekSIS-Apps genutzt werden, um kalendarische Daten zu verwalten und darzustellen.

Ergänzt wird das System im Backend durch ein eigenes Kalenderfrontend in AlekSIS, welches es ermöglicht, zusätzliche Meta-Informationen zu Veranstaltungen anzuzeigen. Auch entstehen Integrationen wie ICS-Export und CalDAV, so dass eine Synchronisation mit dem eingenen Kalender-Client, beispielswesie auf dem Smartphone, möglich wird.

Ausblick: Bereitstellung mit 2024.6 “Fleischer”

Die Umstellung auf den neuen Tech-Stack bietet jede Menge Chancen. Einige Beispiele dafür und Einblicke in bereits verwendbare Funktionen haben wir in den obigen Absätzen gegeben und planen, die Stundenplanerstellung mit dem Release 2024.6 generell verfügbar zu machen. Interessierte Schulen können schon jetzt von uns oder einem unserer Partnerunternehmen Teststellungen der Funktionen erhalten.

Weitere Ressourcen

Herausgeber und Kontakt

Teckids e.V.
Kennedyallee 18
53175 Bonn

E-Mail: foss@teckids.org