Compose for Desktop Tabelle für den Umgang mit grossen Datenmengen.
Compose for Desktop, Compose for Web, Jetpack Compose, Kotlin, LazyLoading, Paging
Mit Compose BigLazyTable soll eine Library entwickelt werden, die den
Umgang mit grossen Datenmengen End-to-End effizient unterstützt.
Entwickler sollen einfach und mit wenig Aufwand die Library in ihre
bestehende Applikation integrieren können.
Die Library sollte eine UI-Komponente anbieten, die eine grosse Menge
an Daten tabellarisch darstellen kann. Dabei sollen gewohnte
Funktionalitäten, wie kontinuierliches Scrolling, Sortieren und
Filtern integriert sein. Für ein optimales Handling mit grossen
Datenmengen, sollte ein Paging-Mechanismus eingebaut werden, um Daten
möglichst spät zu laden und nur nötige Daten im Memory zu haben. Der
End-Benutzer soll die Möglichkeit haben, die Daten zu modifizieren. Im
Hintergrund sollte eine geeignete Struktur aufgebaut werden, welche
nur notwendige Daten bei einem Service abfragt und diese
Zwischenspeichert. Die Library sollte mit jeder beliebigen Datenquelle
eingesetzt werden können. Ein Merge-Mechanismus muss dafür sorgen,
dass bearbeitete Daten nicht verlorengehen beim Scrollen.
Ziel ist es, zur Veranschaulichung der Library eine Demo-Applikation
bereitzustellen, welche mit mehr als 100‘000 Datensätzen arbeitet.
Als übergeordnetes Ziel von Dr. Dieter Holz und der FHNW, gilt es mit
diesem Projekt zu beurteilen, wie fortgeschritten Compose for Desktop
bereits ist. Dabei soll beurteilt werden, ob Kotlin mit Compose for
Desktop eine Alternative für den Unterricht an der FHNW sein kann und
die aktuell unterrichteten Sprachen Java und JavaFX im Studiengang
iCompetence ablösen könnte.
Jetpack Compose ist ein modernes UI-Toolkit von Google für die
Entwicklung von nativen Android Apps. Die Firma JetBrains hat diesen
Ansatz weiterentwickelt und verfolgt mit Compose for Desktop und
Compose for Web das Ziel, mit dem gleichen deklarativen Ansatz native
Desktop- und Web-Applikationen in Kotlin zu entwickeln. Compose
verspricht, die Entwicklung gegenüber bestehenden Technologien zu
vereinfachen und zu beschleunigen. Compose for Desktop wurde Ende 2020
als Alpha-Release veröffentlicht. Zum Zeitpunkt dieser Projektarbeit
ist bereits der erste Stable-Release mit der Version 1.1.0 verfügbar.
Compose beschränkt sich auf die UI-Teile einer Applikation.
Fragestellungen, welche die Bereitstellung von sehr vielen Daten
betreffen, werden nicht oder nur im Ansatz berücksichtigt.
Neben Compose for Desktop gibt es noch 2 weitere Ausprägungen von
Compose. Jetpack Compose zur Entwicklung nativer Android-Apps, welches
bereits in der Industrie eingesetzt und stark von Google gepusht wird.
Mit Compose for Web wird noch das fehlende Stück der Compose Reihe
abgedeckt. Dies ist aber erst als Technology Preview Version
veröffentlicht. Compose verspricht einen hohen UI Code-Anteil zwischen
einer Android-, einer Desktop- und einer Web-Applikation teilen zu
können.
Eine geeignete Möglichkeit zur Bearbeitung von Daten bildet die
Compose Forms Library eines Vorgängerprojekts, die einfach angebunden
und eingesetzt werden kann.
JavaFX bietet bereits ein Baustein für eine TableView mit
verschiedenen Funktionalitäten. Jedoch muss der Entwickler ein
LazyLoading selbst implementieren und es gibt keine Standard-Library
für eine Verbindung des Tables und einem Formular.
Es wurde eine Library erstellt, welche ein Entwickler einfach in seine
bestehende Geschäftsapplikation einbauen kann. Das UI besteht aus
einer Tabelle, welcher alle Datensätze anzeigt und einer Compose Forms
Komponente, welche einen in der Tabelle ausgewählten Datensatz genauer
anzeigt und die Möglichkeit der Bearbeitung bietet.
Für ein schnelles Laden der vielen Datensätze wurde im Hintergrund ein
selbstentwickelter Paging-Mechanismus gebaut. Dieser lädt nicht alle
Daten auf einmal, sondern in Paketen, welche als Pages bezeichnet
werden. Für den End-Benutzer ist eine Page im UI sichtbar. Je zwei
Pages sind davor und danach schon geladen. Die restlichen Datensätze
werden erst bei einem Scroll-Vorgang in einen noch nicht geladenen
Bereich, geladen.
Die Tabelle bietet zudem Funktionalitäten, wie Filtern und Sortieren
an. Der End-Benutzer hat die Möglichkeit über einen Klick auf den
Header einer Spalte, die Daten unsortiert, aufsteigend oder absteigend
sortiert anzeigen zu lassen. Die Filter sind für jede Spalte separat
verfügbar. Mit einer vordefinierten Syntax, welche im Library-README
dokumentiert ist, kann der End-Benutzer verschiedene Filter auf den
Spalten anwenden. Wie aus anderen Anwendungen gewohnt, können Filter
auch kombiniert werden, sowie gleichzeitig mit dem Sortieren
angewendet werden.
Ein angewählter Datensatz wird neben der Tabelle im Compose Forms
angezeigt. Dort gibt es diverse Möglichkeiten, diesen Datensatz zu
bearbeiten. Die Änderungen werden sofort auch in der Tabelle sichtbar
und bleiben auch persistiert, wenn man in der Tabelle weg scrollt.
Über das Compose Forms kann zudem die Sprache eingestellt werden. Dies
wirkt sich auf das Compose Forms sowie auch auf die Header Zeile in
der Tabelle aus.
Die Auswahl der Datenquelle ist dem Entwickler freigestellt. Er muss
lediglich ein von Compose BigLazyTable zur Verfügung gestelltes
Paging-Service-Interface implementieren, welches alle Funktionalitäten
für das Filtern, Sortieren und den Paging-Mechanismus abdeckt.
Für einen Entwickler biete Compose BigLazyTable deutliche Vorteile im
Vergleich zu einer eigenen Lösung. Die Entwicklungszeit wird durch den
Einsatz der Library stark reduziert. Für die Implementation muss ein
Service geschrieben werden, welcher mit der vom Entwickler gewählten
Datenquelle zusammenarbeitet. Um die notwendige Funktionalität
abzudecken, kann dazu einfach ein Service-Interface von Compose
BigLazyTable verwendet werden, welches die geforderte Funktionalität
beschreibt und den Aufbau vorgibt. Neben dieser Implementation muss
der Entwickler nur noch ein paar Konfigurationen für Compose Forms
einstellen, wie die angezeigten Labels oder der Aufbau des Models,
welches hinter dem Formular steckt. Hier bietet Compose Forms auch
Interfaces an und eine ausführliche Dokumentation.
Für eine funktionierende Applikation mit einer einfachen Datenquelle
dahinter, braucht ein Entwickler ungefähr zwei Tage für die
Implementation. Dies ist im Vergleich zu den 720 Stunden dieser
Projektarbeit deutlich weniger, was für den Einsatz von Compose
BigLazyTable spricht.
Projektdauer: 20.09.2021 - 25.03.2022
Aufwand in Personenstunden: 2x 360h
Teamgrösse: 2 Personen
FHNW Hochschule für Technik
Institut für Mobile und Verteilte Systeme
Dr. Dieter Holz
dieter.holz@fhnw.ch
Livio Näf, Marco Sprenger
Dr. Dieter Holz
dieter.holz@fhnw.ch
