SAP’s OpenUI5, an Open Source JavaScript UI Library – InApps Technology 2022

In advance of OSCON 2015 this week in Portland, SAP Developer Evangelist Alexander Graebe demonstrated OpenUI5, an open source JavaScript UI library, maintained by SAP, and available under the Apache 2.0 license.

The basis of this project is a tool for building enterprise-ready web applications, responsive to all devices, running on almost any browser. Alexander begins by displaying the GitHub page of OpenUI5, where it’s been since October 2014.

“At the beginning it was called ‘SAP UI5.’ It was available only internally for customers, but now we’re open-sourcing it,” says Alexander. “We were using open source technologies for this specific library, and we wanted to give back to the community.”

OpenUI5 focuses on enterprise-ready applications, so it employs internalization, routing, extensibility, theming, templating, and so forth. “We’re considering different use cases that you might not consider when you start up with a very small web app,” Alexander says. He notes that OpenUI5 also allows for the creation of applications in different formats, including XML, HTML, JavaScript and JSON.

Then he introduces the code example, showing a very simple application of OpenUI5, which loads data from the GitHub API, makes the data accessible within the new UI5 application, and then shows it within the UI.

(The example is hosted at: http://jsbin.com/poyozu/1/edit?html,output)

“Just to give you a perspective of how UI5 looks,” Alexander continues, “it is really just a JavaScript library that you include within your HTML file, and then out of that you can create your UI5 application.”

He points out the script tags regarding theming and the type of library, and in particular the “placeAt” tag which, Alexander says, “is where the magic happens.”

“The JavaScript library is essentially working like a framework. We tell the library how it should create UI components or UI elements, and then based on that it figures out on which platform it’s running, on which device it’s running, and then it’s generating the code automatically and placing it into a specific HTML element.”

OpenUI5 has two-way data binding included, and it also can be configured as having one-way data binding. With the two-way data binding, Alexander explains, whenever the code side changes, the UI updates as well, automatically.

He points out the template-based modular list hierarchy, mentioning that lists can be overwhelming, “there are so many different lists, and sometimes they look similar and sometimes they look different.”

“We’re trying to allow people with simple use cases to get started quick, but if you do have complex use cases you can switch over the template, and then you can display more detail and complex information,” such as reassembling object statuses, quantities, and currencies.

SAP is a sponsor of InApps Technology.

Feature image: “Open Wires” by opensource.com is licensed under CC BY-SA 2.0.