So-called "dashboards" for the visualization and analysis of business data are becoming increasingly popular with many companies. They are easy to use, visually appealing and provide all important information at a glance.
The SAP Lumira Framework and the Lumira Designer development environment enable the quick and easy creation of dashboards without programming knowledge. Using a visual editor, prefabricated components can be put together via drag & drop. Numerous standard components are available for a wide variety of purposes, such as data tables, charts, menus and layout elements. Of course, not every individual requirement is covered here. Innovative projects in particular often require special components that are not included in the standard Lumira Designer component library. For such cases, Lumira offers the option of developing your own components, so-called Lumira SDK Extensions.
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.
This means that the technical framework for developing Lumira extensions is more or less the same as it was five to ten years ago: The once extremely popular JQuery has since been replaced by more modern, productive technologies such as Angular, React and Vue.js. Instead of reloading individual JavaScript files at runtime, modern front-end development usually relies on bundling tools such as Browserify or Webpack. These introduce a build process that combines all the required modules into a single JavaScript file before the program is delivered. Lumira also ignores the increasing popularity of compilers and transpilers to support new, convenient programming languages such as TypeScript. TypeScript definitions for the Lumira JavaScript API, even available in the global JavaScript repository npm? - Not at all. Lumira's own system for inheriting object properties is also not compatible with the standard solution as implemented by TypeScript's "class" notation, for example.
Development of Lumira SDK extensions with modern tools?
However, this does not mean that the development of Lumira SDK extensions with modern tools is not possible. Because no matter which toolchain we use, the end result is always "field-forest-meadow-JavaScript". Every modern web browser understands this and it can be used in any JavaScript project - including Lumira components. And in at least one respect, Lumira even accommodates us a little: Require.js supports the loading of JavaScript modules that are defined in the so-called AMD format (Asynchronous Module Definition). This makes it very easy to integrate a modern toolchain into the development of Lumira components, because: The popular bundling tool Webpack can generate JavaScript library bundles in AMD format. Webpack, in turn, gets on well with npm, TypeScript and many other enormously productivity-enhancing tools and libraries. Full access to this treasure trove when developing Lumira components is therefore just a few lines of configuration away.
Essentials
For developers, this leaves them spoiled for choice from an almost inexhaustible collection of JavaScript development tools and libraries. In our view, the following are essential for convenient JS development:
- Webpack, as well as npm as dependency management and indispensable basis for the use of Webpack
- TypeScript as "better JavaScript" with support for extremely helpful code analysis and refactoring functions in many IDEs
- A modern framework for the simple, structured development of HTML-based user interfaces
With regard to the last point, Vue.js, for example, is recommended. Due to its compactness and flexibility, it is particularly suitable for integration into existing applications that are built on the basis of another technology. In addition, Vue.js has a very small download size (less than 70 kilobytes) and is faster than React in most benchmarks. In view of this, the decision in favor of Vue.js was an easy one. Some "little helpers" such as an SCSS compiler and extended TypeScript support for Vue.js are also useful. Ultimately, all of this enables us to develop high-quality Lumira SDK extensions far more quickly and conveniently than would be possible without them.
