> For the complete documentation index, see [llms.txt](https://biglazytables.gitbook.io/big-lazy-tables/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://biglazytables.gitbook.io/big-lazy-tables/bachelorarbeit-ip6-big-lazy-tables-fur-das-kolibri-toolkit.md). # Bachelorarbeit IP6 - Big Lazy Tables für das Kolibri Toolkit von Niki Stohler und Ives With ![](https://3950294961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc3pqMW5ZzqJsqoL0PPqS%2Fuploads%2FmhueAgVIstXu7sAnyZ2X%2FbltLogo.png?alt=media\&token=787bc049-9ea4-44d0-ae22-a46c47ec075e) {% embed url="" %} Link zum Repository {% endembed %} ## Abstract 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.
Inhaltsverzeichnis * System * [Aufbau](/big-lazy-tables/system/aufbau.md) * Module * [Controller](/big-lazy-tables/system/module/controller.md) * [Presentation Model](/big-lazy-tables/system/module/presentation-model.md) * [Projectors](/big-lazy-tables/system/module/projectors.md) * [Service](/big-lazy-tables/system/module/service.md) * Funktionen * [Scrolling & Lazy Loading](/big-lazy-tables/funktionen/scrolling-and-lazy-loading.md) * [Filtering & Sorting](/big-lazy-tables/funktionen/filtering-and-sorting.md) * [Column Resizing](/big-lazy-tables/funktionen/column-resizing.md) * Konzepte * [Lazy Loading](/big-lazy-tables/konzepte/lazy-loading.md) * [MVC](/big-lazy-tables/konzepte/mvc.md) * [Observer Pattern](/big-lazy-tables/konzepte/observer-pattern.md) * [Projector Pattern](/big-lazy-tables/konzepte/projector-pattern.md) * Qualitätssicherung * [Testing](/big-lazy-tables/qualitatssicherung/testing.md) * [JS Doc](/big-lazy-tables/qualitatssicherung/js-doc.md) * Verweise * [Glossar](/big-lazy-tables/verweise/glossar.md) * [Quellen](/big-lazy-tables/verweise/quellen.md)
## Einleitung 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 ](/big-lazy-tables/verweise/quellen.md)- 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](/big-lazy-tables/verweise/glossar.md#geschaeftsanwendungen-business-applications) 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. Im Rahmen dieses Projekts wurde mit BigLazyTables eine robuste und hochwertige Tabellen-Komponente entwickelt. Das Produkt soll Teil des an der [Fachhochschule entwickelten open-source Kolibri UI-Toolkits](https://webengineering-fhnw.github.io/Kolibri/index.html) werden. Im Projekt wurden folgende Ziele umgesetzt: * Eruierung der verschiedener **Möglichkeiten und Limitierungen des Browsers** für das Bauen von Tabellen * Anzeigen von Datenmengen mit bis zu **250'000 Einträgen** * Unterstützung von **Asynchronität** und **Lazy Loading** * **Modularität** der View durch Aufteilung in Widgets * Einfache **Implementierung** und **Erweiterbarkeit** für Entwickler * Open-Source und Unabhängigkeit durch den Verzicht auf Frameworks ### Aufbau der Dokumentation Das Kapitel Aufbau führt in die Architektur und Struktur des Systems ein und zeigt die Aufgabenverteilung der einzelnen Module. Im Kapitel Funktionen wird die Umsetzung der drei Hauptfunktionalitäten Scrolling, Filtering und Sorting detailliert. Unter Konzepte finden sich Erklärungen zu den in dieser Arbeit angewandten Entwurfsmuster. Massnahmen die zur Qualitätssicherung eingesetzt wurden, werden im gleichnamigen Kapitel aufgeführt. ## Erkenntnisse Der Browser als UI Toolkit bringt viele Herausforderungen mit sich, welche gemeistert werden mussten. Da Browser nur bedingt Kontrolle zulässt, musste oftmals ein Kompromiss bei der Umsetzung eingegangen werden. Insbesondere die Umsetzung des Scrolling benötigte hohen Zeitaufwand. Das Entwickeln ohne Framework bot sehr viel Freiheit und schuf eine Kontrolle über die Codebasis. Dafür musste ein gewisser Mehraufwand geleistet werden, da auf wenig Helper Funktionen/ Interfaces zugegriffen werden konnte. Die Observierung von Werten bestätigte sich als fundamental. Erst so konnte eine solide MVC Struktur aufgebaut werden, in welcher View Elemente auf Änderungen im Model unkompliziert reagieren können. Es fiel jedoch auch auf, dass in zunehmender Komplexität der Applikation die Übersicht über Abhängigkeiten unter den Observables verloren ging und sich Änderungsketten bildeten. Nach unzähligen Umstrukturierungen im Code zeigte sich, dass ein frühes Umsetzen des MVC Prinzips sehr viel Struktur schafft und eine gute Vorbeugung ist gegen ein zeitaufwändiges Refactoring. Die klare Trennung von Model, View und Controller war stets ein Leitgedanke im Studium, festigte sich jedoch durch diese Bachelorarbeit für uns zu einem Grundsatz. ### Ausblick Der Fokus der Entwicklung liegt auf dem Aufbau eines soliden Fundaments, das es ermöglicht, die Komponente um weitere Funktionalitäten zu erweitern. Für eine vollwertige Business Komponente benötigt es Features wie die Direktmanipulation der Daten, ein reichhaltigeres Presentation Model und die Möglichkeit ein eigenes Filter Objekt zu definieren. Ebenfalls ist eine stärkere Aufgabenteilung der Komponenten denkbar: Die Projektoren können in weitere Sub Projektoren aufgeteilt und der Controller in spezifischere Controller zerlegt werden. Damit würde Anwendungslogik und Präsentationslogik sinnvoller und eindeutiger verteilt sein. Ein grosses Dankeschön an unsere Projektbetreuer und Auftraggeber: **Prof. Dierk König** **Dr. Dieter Holz**