Die Entwicklung von AsTeRICS Grid begann im Jahr 2018. Bei der damaligen Recherche hat sich für die Anzeige des Rasters eine Bibliothek mit dem Namen "GridList" als gut geeignet erwiesen. Seit über 6 Jahren war sie nun für die Anzeige der Kommunikationsraster in AsTeRICS Grid verantwortlich und damit eine der Herzstücke der Applikation. GridList ist ein Plugin für jQuery, während AsTeRICS Grid in Vue.js geschrieben ist. Daher war das Verbinden dieser beiden Welten schon von Beginn an eher "hacky", also aus Programmierersicht nicht so schön und sauber, wie ich es mir gewünscht hätte (siehe diese 433 Zeilen Code, die nun bald endlich ausgedient haben).

Während die Lösung mit GridList generell funktionierte, war sie in gewisser Hinsicht auch ein Klotz am Bein, da Anpassungen bzw. Bugfixes nur sehr mühsam möglich waren und sie z.B. auch verhinderte, dass neue Typen von Grid-Elementen einfach als neue Vue-Komponenten hinzugefügt werden konnten, wie man das in einer Vue-Applikation erwarten würde. Stattdessen gab es ein weiteres unschönes File, in welchem dynamische HTML-Templates für verschiedene Element-Typen generiert wurden. Ein Hack, der durch den anderen Hack erst notwendig wurde.

Um diese Situation zu verbessern und endlich nicht mehr ein seit 8 Jahren nicht mehr gewartetes Projekt als Herzstück von AsTeRICS Grid zu verwenden, war mir schon seit langer Zeit klar, dass "GridList" ersetzt werden muss. Jetzt gab es durch netidee endlich die Gelegenheit dazu. Die dabei erste und wichtigste Frage: zu einer anderen (aktuelleren) Bibliothek wechseln, oder etwas komplett Neues entwickeln? Die Recherche brachte folgende mögliche Kandidaten zu Tage, die auch kurz testweise in AsTeRICS Grid integriert wurden:

• gridstack.js - aktiv gewartet, aber nicht nativ in Vue verwendbar, außerdem Probleme bei einfachen Aufgaben wie Erstellen eines bildschirmfüllenden Rasters mit gleich großen Elementen
• vue-grid-layout - nativ in Vue.js verwendbar, aber seit 2 Jahren nicht mehr gewartet und in Details ebenfalls nicht direkt für AsTeRICS Grid verwendbar

Die genannten Bibliotheken überzeugten mich also nicht so wirklich. Also - was tun? Ist es möglich in dem doch recht beschränkten Zeitkontigent des netidee-Plans für diese Aufgabe eine komplett neue Library zu entwickeln, die für AsTeRICS Grid besser geeignet ist als ein seit 10 Jahren weiterentwickeltes gridstack.js? Ich war skeptisch, habe aber beschlossen es zu probieren. Bei der Suche nach einem geeignetem Startpunkt bin ich auf das CSS Grid Layout gestoßen, einer Browser-Technologie, die dafür entwickelt wurde Raster-Layouts direkt über CSS darzustellen. Der Browser-Support liegt bei 97% - perfekt. Im nachhinein betrachtet eigentlich logisch, dass es für "AsTeRICS Grid" das "CSS Grid Layout" braucht.

Nach ein paar Wochen Entwicklung ist es heute soweit, ich habe die neue Bibliothek "Vue CSS Grid Layout" für das Anzeigen und Bearbeiten von Rastern mit beliebigen Elementen auf GitHub veröffentlicht. Die Integration in AsTeRICS Grid ist beinahe fertig, derzeit aber noch in eigenem Branch auf GitHub zu finden. Im Readme der Bibliothek gibt es verschiedene Beispiele zum Ausprobieren, z.B. ein einfaches Beispiel, welches ein bearbeitbares Raster in voller Bildschirmgröße darstellt.

Ein neues Herzstück für AsTeRICS Grid, das hoffentlich noch viele weitere Jahre seine Aufgabe erfüllen wird.

Video 1: Drag & Drop, Größe ändern und Kollisionsbehandlung in der neuen Bibliothek

Video 2: Verschieben von vielen Elementen auf einmal in der neuen Bibliothek

Bild 1: Vergleich von alter und neuer Bibliothek in AsTeRICS Grid, links alt, rechts neu. Die Neue Bibliothek bietet exaktere Positionierung, der verfügbare Bildschirmplatz kann besser ausgenutzt werden und dynamische Einstellmöglichkeiten des Designs sind einfach zu implementieren.