What is OpenUI5 / SAPUI5 ?

A basic overview for anyone who has not heard of OpenUI5 / SAPUI5 before

[Note: this blog post has been written in December 2013, when UI5 was open-sourced. However, I have added updates where required. – January 2015]

Intro

So now this JavaScript library named “OpenUI5” (the Open-Source-licensed version of SAPUI5) has left its SAP niche and stepped into public. And you are web developer and wonder what to make of it.

The easiest thing would be to just ignore it. You know, it comes from that big business software company, so it hardly can be cool or useful. And there are plenty of other libraries, so why care?

Because you might be missing something. Seriously.

First of all, relax: UI5 is in no way limited to business software and its developers are a bunch of people like you who just happen to work for that company named SAP. And who happen to love Open Source, so they not only used LOTS of Open Source libraries when building UI5, but also fought for open sourcing UI5 itself.

So now what is OpenUI5 / SAPUI5?

It is a JavaScript UI library consisting of a feature-rich core and a really large number of UI controls which are organized in a handful of libraries.

By “feature-rich” I mean stuff like data binding and models for different data sources, an efficient engine for creating and updating the HTML of the controls, support for a Model-View-Controller concept, support for declarative UI construction and HTML templates, automatic loading of the appropriate language resources and many other features along these lines.

The controls (around 100 or 140 of them? Hard to count exactly… [as of January 2015 there are roughly 200 controls, as of May 2018: 360 controls]) range from simple Button controls to complex ones like the sap.m.SplitContainer (with a responsive master-detail behavior and animated page navigation) and provide support for accessibility, keyboard navigation, touch interaction, right-to-left languages etc. out of the box. Different visual themes are available and can be adapted by either modifying the CSS or using the Theme Designer (a WYSIWYG tool, which is currently not yet released as Open Source, though [but a special free version for users of OpenUI5 will be offered]).

SAP is using this UI library for business applications, where standards like security and supportability are crucial, so protection against cross-site scripting and other attacks and a powerful error analysis/inspection tool is integrated. And for sure SAP is investing a lot into automated and manual tests, from unit tests to screenshot comparisons.

UI5 is based on jQuery, which of course can be directly used in UI5 applications, but there’s a lot on top of it, so most of the time you might rather find yourself working with the controls.

Many other Open Source libraries are used in UI5 and come bundled with it, e.g. LESS, the famous CSS processor, or datajs, the OData library.

This blog entry is not going to be a programming introduction, but if you want to see more code and more about the usage of UI5, you will find links with plenty of resources at the end of this blog entry.

A bit of History

Even though UI5 is only now stepping out into the Open Source space, it has in fact been developed and matured for years (initially under the codename “Phoenix”, hence the bird-like logo). So don’t expect a beta.

SAP has been using UI5 in a couple of products already, most notably the family of “Fiori” applications revealed earlier this year (see https://experience.sap.com/fiori for information and screenshots). Decoupling UI development (where customers expect frequent iterations to follow web UI trends and to get support for the newest devices) from backend updates (where typical SAP customers expect to run the same version for many years without expensive and disruptive upgrades) has been a major driving force behind the development and adoption of UI5. As well as the desire for a UI technology which is more standards-based, flexible and extensible than before and at the same time still fulfills all the stability, accessibility and security standards required from business software.

If you do a Google Image Search on “sapui5 fiori”, or just on “sapui5”, you will get an impression of SAP’s software using UI5 as well as prototypes and applications of customers/partners.

Why is UI5 Open Source now?

One reason was there from the very beginning of UI5, when it was still called “Phoenix”: we always felt it should be Open Source. It just felt right and in line with the basic principles of UI5 which were all about openness and standards. But as you can imagine, in big companies and considering all the legal implications, open-sourcing something is not an easy task, so among all the pressure for features this topic got pushed back again and again.

However, with the growing popularity of SAPUI5 within the SAP developer community demand to open it up has increased (e.g. Jan Penninkhof and others have compiled a list of good reasons to open-source UI5).

And we also felt it was time to do it before it was too late – UI5 will profit when more people are using it. Be it due to feedback, bug reports, contributions, or simply because there is a bigger pool of UI5-aware developers in the world who can help each other.

How and why is “OpenUI5” different from “SAPUI5”?

“OpenUI5” is the free version available under the Apache 2.0 Open Source license.

“SAPUI5” is the version that may only be used by SAP customers with a certain kind of license. (It’s still free for them, but they have paid some other SAP product.)

The good news is: most importantly, the entire core of “OpenUI5” and “SAPUI5” (containing all central functionality) is identical. The most-commonly used control libraries, containing the vast majority of all existing controls, are identical. All of this can now be used for free, when using OpenUI5.

The difference is in some more exotic control libraries which have not (or not yet) been put under an Open Source license. There are several reasons, including legal issues, organizational clarifications (developed in different parts of SAP) – and after all SAP is still a company which has to pay its employees (thanks! ;-)), so it may choose not to give everything away for free. You find the same pattern with other Open Source libraries and products…

But anyway, the vast majority of all things UI5, including all things which have been developed close to the core of it are free. And there are no paid extensions. There is no intention to make any money with UI5.

This was the technical perspective. Beyond that, there is a difference regarding support: for SAP customers with that certain sort of license the “commercial version” SAPUI5 comes with support agreements, so SAP guarantees bug fixing (don’t ask me for the terms in detail…). These support guarantees are naturally not coming with the completely free Open Source version of UI5. But still, it is not a fork or so:OpenUI5 also gets the bug fixes done for SAPUI5. It’s the same thing, just a subset. A big one.

How open is OpenUI5?

Very simple:

• It is now available under an Open Source license. So you can use it without any payment to do more or less whatever you want. (So it is “free as in ‘free beer'”.)
• A contribution process has not been set up yet and the sources are not yet available on Github [Update: this has changed in 2014, see the following bullet point]
• The sources are available at GitHub and:
  • you can browse them and follow development directly, which is all happening there
  • you can report bugs and propose enhancements
  • you can contribute changes and bugfixes

…so it is also “free as in ‘freedom'”.

So what should I use OpenUI5 for? And for what shouldn’t I?

When you want to put a clickable button on an otherwise entirely static web page, or when you want to layout a couple of HTML elements on the screen, using UI5 (or any other similar JS library, for that matter) would probably be too much overhead.

But when you want to access JSON or XML data from a server, present it nicely with a rich set of controls, when you want an interactive app to inspect or edit data, when you want users to be able to sort and filter, when you want all these things to happen in a solid and proven way, then you have good reasons to use UI5.

Especially when you want this to happen on all kinds of platforms, from mobile phones to big desktop PC screens.

Comparing OpenUI5 to other JavaScript UI toolkits is a huge task… I’ll leave it for later. It is definitely more feature-rich – sure: and bigger – than low-level toolkits like jQuery or slim UI toolkits like Bootstrap. There are advantages and disadvantages on both sides which have to be considered case by case.

And now?

What I would suggest is:

• go to the OpenUI5 web page and explore it from there.
  • e.g. look at the “Hello World” code examples
  • download the runtime to build your own apps
  • By the way: the “Demo Kit” / SDK available on https://openui5.hana.ondemand.com/ and containing all documentation is the same thing you can download as “UI5 SDK”. So basically that “UI5 SDK” is a copy you can install locally to have it always with you.
• if you are into code, study this small example mobile app (not in IE9 and lower due to cross-domain issues) and try to understand how it works. Should not be too hard, actually, it’s just 1-2 screens of code but already giving you master-detail page animations, data binding etc.
• if you rather want to try it right away, check out the demo apps
  • e.g. the Samples area explaining the most important controls
  • or the “Browse Orders” app which is a typical small UI5 application
• if you prefer understanding the concepts first, start with the Developer Guide which describes loads of things from the first steps to really advanced topics

Be open for new things!

We are open for feedback and comments.