Sogenannte „Dashboards“ zur Visualisierung und Analyse von Geschäftsdaten werden bei vielen Unternehmen zunehmend beliebter. Sie sind einfach zu bedienen, optisch ansprechend und liefern alle wichtigen Informationen auf einen Blick.
Das SAP Lumira Framework und die Entwicklungsumgebung Lumira Designer ermöglichen die schnelle und einfache Erstellung von Dashboards ohne Programmierkenntnisse. Mittels eines visuellen Editors können vorgefertigte Komponenten per „Drag & Drop“ zusammengestellt werden. Dabei stehen zahlreiche Standardkomponenten für unterschiedlichste Zwecke wie Datentabellen, Charts, Menüs und Layout–Elemente zur Verfügung. Natürlich ist hier nicht jede individuelle Anforderung abgedeckt. Gerade bei innovativen Projekten werden oft spezielle Komponenten benötigt, die nicht in der Standard–Komponentenbibliothek des Lumira Designers enthalten sind. Für derartige Fälle bietet Lumira die Möglichkeit, eigene Komponenten, sogenannte Lumira SDK Extensions, zu entwickeln.
SAP Lumira SDK Extensions
Die Implementierung erfolgt auf Basis der Web–Technologien HTML, CSS und JavaScript. Die hierfür bereitgestellte API besteht aus einer JavaScript–Klasse mit Callback–Funktionen für Systemereignisse. Von dieser werden alle selbstentwickelten Komponenten abgeleitet. Jede Instanz einer Komponenten-Klasse enthält zudem eine Referenz auf ein <div>-Element, mit dem die Komponente in die HTML–Struktur des Dashboards eingebettet wird. Über diese Referenz kann das HTML und CSS der Komponente per JavaScript manipuliert werden. Außerdem sind bereits einige bekannte JavaScript–Bibliotheken, wie JQuery und D3 in die Lumira-Laufzeitumgebung integriert, welche wir unmittelbar nutzen können. Die Einbindung weiterer Abhängigkeiten ist uns durch Require.js ermöglicht, eine Bibliothek zum dynamischen Laden von JavaScript–Modulen zur Laufzeit.
Damit entspricht der technische Rahmen zur Entwicklung von Lumira–Erweiterungen mehr oder weniger dem Stand von vor fünf bis zehn Jahren: Das ehemals äußerst beliebte JQuery wurde inzwischen von moderneren, produktiveren Technologien wie Angular, React und Vue.js abgelöst. Statt des Nachladens einzelner JavaScript–Dateien zur Laufzeit wird in der modernen Front–End–Entwicklung meist auf Bundling–Werkzeuge wie Browserify oder Webpack gesetzt. Diese führen einen Build–Prozess ein, der alle benötigten Module vor der Auslieferung des Programms zu einer einzigen JavaScript–Datei zusammenfasst. Lumira ignoriert auch die zunehmende Beliebtheit von Compilern und Transpilern zur Unterstützung neuer, komfortabler Programmiersprachen wie TypeScript. TypeScript-Definitionen für die Lumira–JavaScript–API, gar verfügbar in dem globalen JavaScript–Repository npm? – Fehlanzeige. Auch das Lumira–eigene System zur Vererbung von Objekteigenschaften ist nicht mit der Standardlösung kompatibel, wie sie z.B. von TypeScripts „class“–Notation implementiert wird.
Entwicklung von Lumira SDK Extensions mit modernen Werkzeugen?
All das bedeutet jedoch nicht, dass die Entwicklung von Lumira SDK Extensions mit modernen Werkzeugen nicht möglich ist. Denn egal welche Toolchain wir verwenden, am Ende entsteht immer „Feld–Wald–Wiesen–JavaScript“. Das versteht jeder moderne Webbrowser und kann in beliebigen JavaScript–Projekten verwendet werden – also auch in Lumira–Komponenten. Und zumindest in einer Hinsicht kommt uns Lumira sogar ein Stück weit entgegen: Require.js unterstützt das Laden von JavaScript–Modulen, die im sogenannten AMD–Format (Asynchronous Module Definition) definiert sind. Die Integration einer modernen Toolchain in die Entwicklung von Lumira–Komponenten ist dadurch sehr einfach, denn: Das beliebte Bundling–Tool Webpack kann JavaScript–Bibliotheken-Bundles im AMD-Format generieren. Webpack wiederum versteht sich prima mit npm, TypeScript und vielen weiteren enorm produktivitätssteigernden Tools und Bibliotheken. Der volle Zugriff auf diese Schatzkiste bei der Entwicklung von Lumira–Komponenten ist somit nur ein paar Zeilen Konfiguration entfernt.
Essentials
Für Entwickler:innen bleibt damit vor allem die Qual der Wahl aus einer schier unerschöpflichen Sammlung von JavaScript–Entwicklungswerkzeugen und -Bibliotheken. Essenziell für die komfortable JS–Entwicklung sind aus unserer Sicht vor allem folgende:
- Webpack, sowie npm als Abhängigkeitsverwaltung und unverzichtbare Grundlage für die Nutzung von Webpack
- TypeScript als „besseres JavaScript“ mit Unterstützung für äußerst hilfreiche Codeanalyse- und Refactoring–Funktionen in vielen IDEs
- Ein modernes Framework zur einfachen, strukturierten Entwicklung von HTML–basierten Benutzeroberflächen
Bezüglich des letzten Punkts empfiehlt sich z.B. Vue.js. Es eignet sich aufgrund seiner Kompaktheit und Flexibilität besonders gut zur Integration in bestehende Anwendungen, die auf Grundlage einer anderen Technologie aufgebaut sind. Außerdem hat Vue.js eine sehr geringe Download–Größe (unter 70 Kilobyte) und ist in den meisten Benchmarks schneller als React. Angesichts dessen fiel die Entscheidung für Vue.js leicht. Auch einige „Helferlein“, wie ein SCSS–Compiler und erweiterter TypeScript–Support für Vue.js sind nützlich. Letztlich ermöglicht all das uns, qualitativ hochwertige Lumira SDK Extensions weitaus schneller und komfortabler zu entwickeln, als es ohne sie möglich wäre.
