Die Dokumentation für dieses Projekt ist hier zugänglich: https://biglazytables.gitbook.io/big-lazy-tables/
Eine Demo Implementation für dieses Projekt ist hier zugänglich: https://envaya.github.io/
Obschon das Web 2.0 heute die global meist verwendete Plattform ist, existieren dafür keine hochwertigen Open-Source Tabellen-Komponenten.
Im Rahmen dieser Arbeit wurde mit BigLazyTable eine Lösung entwickelt, die diese Lücke schliessen soll.
Dabei lag der Fokus darauf, ein robustes Fundament anzubieten, das sich auf die grundlegende Funktionalität beschränkt,
und welches Entwicklern erlaubt auf einfache Art Tabellen für reichhaltige Geschäftsanwendungen zu bauen.
JavaScript, HTML, CSS, Open Source, Web, UI Component, Tabelle, Big Data, Lazyloading
Das Ziel dieser Arbeit war die Planung, Konzeption und Umsetzung einer Tabellen-Komponente für das Web,
welche grosse Datenmengen von bis zu 250'000 Einträgen darstellen kann.
Die Komponente sollte dabei das von Prof. Dirk König et al. an der FHNW entwickelten
Web UI Toolkit "Kolibri" erweitern.
Den Grundsätzen des Frameworks folgend, wurde die Tabelle mit Vanilla JavaScript, HTML und CSS und ohne
Einsatz jeglicher Framworks oder Libraries gebaut. Es sollten verschiedene Konzepte aus dem Kolibri Toolkit verwendet werden,
wie bspw. das Observer und das
Projector Pattern.
Ein wichtiger Punkt im Design der Komponente war die Usability für Entwickler.
Diese sollten die Applikation mit möglichst einfach und mit wenig Aufwand implementiert
und ausbauen können. Dabei sollten die für die Handhabung von grösseren Datenmengen nötigen Funktionalitäten
wie das Scrollen, Filtern und Sortieren umgesetzt werden. Um eine akzeptable Performanz garantieren zu können,
musste ein Lazyloading-Mechanismus implementiert werden. Die Applikation sollte mit jeder beliebigen Datenquelle
eingesetzt werden können. Zu diesem Zweck war ein weiteres Ziel die Unterstützung von Asynchronität.
Da der Browser als UI Toolkit viele Herausforderungen und Limitierungen mit sich bringt,
sollte im Rahmen eines Meilensteins verschiedene Möglichkeiten zum Bauen einer Tabelle eruiert und verglichen werden.
Als übergeordnetes Ziel dieses Projekts sollte aufgezeigt werden, welche Chancen und Einschränkungen das Entwickeln
von reichhaltigen Tabellen für den Browser mit sich bringt.
Einst das Standardtool für Layouting im Web, werden Tabellen heutzutage nur noch konservativ eingesetzt. Dabei gelten sie als nützliches Werkzeug um facettenreiche Daten übersichtlich darzustellen und zu bearbeiten. Das bezeugen zum Beispiel Google und Microsoft, die mit Excel und Sheets noch immer dedizierte Software für ihre Office Suites anbieten.< Ein Grund dafür findet sich in der rasanten Zunahme von Mobile Usern im letzten Jahrzehnt. Rund 80% der User holen ihre Informationen via Mobile Plattform - Tabellen sind für Mobile ungeeignet. Heute orientiert sich das Desktop UI an das Mobile (Mobile first). Dies widerspiegelt sich auch darin, dass von Seiten des WW Konsortiums in Bezug auf Tabellen wenig Innovation stattgefunden hat. Gerade für Geschäftsanwendungen sind hochwertige Tabellen jedoch essentiell. Da mittlerweile immer mehr Geschäftsanwendungen für den Browser oder als Desktop Web-Applikation entwickelt werden, herrscht ein klarer Mangel an Komponenten für die Verwaltung tabellarischer Inhalte. Die Lösungen welche von den gängigen UI-Toolkits angeboten werden, bieten entweder zu wenig Funktionalität oder können nicht unabhängig eingesetzt werden.
Module, Service, Flexibilität, robustes Lazyloading
Im Rahmen dieses Projekts wurde mit BigLazyTables eine robuste und hochwertige Tabellen-Komponente entwickelt,
welches Entwicklern erlaubt auf einfache Art Tabellen für reichhaltige Geschäftsanwendungen zu bauen.
Demo Implementation der BLT
Dabei wurden folgende Ziele umgesetzt:
Eruierung der verschiedener Möglichkeiten und Limitierungen des Browsers für das Bauen von Tabellen
Mit verschiedenen technischen Prototypen wurde aufgezeigt, dass das Löschen und Schreiben von Elementen in den
DOM für grössere Anwendungen kein plausibler Lösungsweg ist. Die finale Lösung kommt mit der minimalen Anzahl an DOM-Elementen aus.
Statt Row-Elemente beim Scrollen hinzuzufügen und dann wieder zu löschen, wird die Scrollposition während des Scrollen fortlaufend zurückgesetzt. Gleichzeitig werden die stets selben Rows mit den neuen Daten gefüttert,
sodass für den Nutzer die Illusion des Scrollens durch eine Vielzahl von Rows entsteht
Anzeigen von Datenmengen mit bis zu 250'000 Einträgen
Scrolling und Lazy Loading
Das Scrolling war die grösste Herausforderung, da für diese Funktionalität verschiedene Eigenheiten von Browsern umgangen werden mussten.
Da es aus Performanz-Gründen nicht möglich war, alle Tabellen-Rows als Elemente initial in den DOM zu laden, wurde mithilfe eines kleines Algorithmus bei jedem Scrollevent
anhand der Scroll-Höhe die Höhe eines Puffer-Elements vor und nach den Tabellen-Rows ausgerechnet. Dadurch wird ein Scroll-Effekt simuliert, obschon zu jedem Zeitpunkt nur
gerade so viel Rows gerendert werden wie sichtbar.
Modularität der View durch Aufteilung in Widgets
Die Tabelle wurde mithilfe des Projector-Patterns in verschiedene Teilkomponenten (Header, Body, Filters, Footer) aufgeteilt,
um Entwicklern maximale Freiheit zu geben.
Einfache Implementierung und Erweiterbarkeit für Entwickler
Open-Source und Unabhängigkeit durch den Verzicht auf Frameworks
Projektdauer: 20.09.2021 - Mai 2022
Aufwand in Personenstunden: 2x 360h
Teamgrösse: 2 Personen
FHNW Hochschule für Technik
Institut für Mobile und Verteilte Systeme
Prof. Dierk König, Dr. Dieter Holz
dierk.koenig@fhnw.ch
Ives With, Niki Stohler
Prof. Dierk König
dierk.koenig@fhnw.ch
