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]) 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.
  • 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
  • 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.

To report this post you need to login first.

110 Comments

You must be Logged on to comment or reply to a post.

    1. Andreas Kunz Post author

      Yeah, well, we might.

      But since after waiting so long the actual Open Source release was kind of rushed, we’d like to fix some issues first and make sure we are ready for a broader audience and also have some answers for the typical questions as well as a more concrete plan moving forward (e.g. related to issue tracking and contributions).

      Regards

      Andreas

      (0) 
  1. Patrick Li

    It’s really fantastic news! Is it possible to make UI5 and Extjs work together? e.g. for grid control, the rendering performance of UI5 is much slower than Extjs if lazy rendering is disable intentionally(in UI5, by default only the first 7 rows will be rendered), we are thinking the possibility to leverage both library. Thanks!

    (0) 
  2. Abhijeet Kulkarni

    This is a godsend! We have been thinking of building our non-ERP apps in SAPUI5, so that as and when the ERP (and EP) migrates entirely to SAPUI5, the end users would get a seamless interface. With OpenSAP, this, and much more is possible.

    I am sure the developer community will love this initiative. 🙂

    (0) 
  3. Ge Lin

    Great work, especially the “part Especially when you want this to happen on all kinds of platforms, from mobile phones to big desktop PC screens.”

    Is it really true? Per my understanding even jQuery requires a different “light” lib when you want to build mobile UIs. Does it mean your based the code on jQuery mobile? If so, maybe make that clearer in the post would solve doubts like mine immediately.

    I checked out the controls, really really useful, will try to build things on this.

    On the open source part, I agree with Christian Grail in certain points, the open source spirit must thrive (though you need to figure out how), and here I guess the view of management is very important, they have to understand the benefits to give you guys full support. Keep the stake high 😉

    Keep my fingers crossed for news, updates, new projects basing on this great kit.

    (0) 
    1. Michael Graf

      Hello Ge,

      yes it is really true and AFAIK we are currently the only library that covers Phone, Tablet, and Desktop with one set of responsive controls. To be more specific, the responsive controls are in the library “sap.m” shipped in OpenUI5 and SAPUI5. UI5 is built using features of jQuery, but not jQuery mobile.

      Kind Regards,

      Michael

      (0) 
      1. Ge Lin

        Thanks Michael for resolving my doubt. I was looking for such lib but without luck. This will be definitely one winning point for this lib to go viral ➕

        (0) 
      2. Ge Lin

        Maybe one more point to add to this – actually jQuery Mobile is also cross-platform, but of course it has a different focus. I would say now it has a rival from SAP 😎

        Since UI5 is created by SAP teams, I would expect you guys have a focus on enterprise UI framework (well maybe not only for that, but I would say a strong focus), while jQuery Mobile continues to be general platform. Anyone interested might need to understand his needs to decide which framework to use (or load both libs but not good for performance and might have limitations since both frameworks are not necessarily using the same jQuery core version?).

        So here comes to a wild idea – why not move the core technology on jQuery part to jQuery Mobile (which again also builds on jQuery core)? Don’t know if it can be done due to the license but do think so – after all it’s open source. Just thinking loud, I guess the move would be great from a technical point of view, but maybe less attractive when we think about all the released software SAP already sold… Anyways, just a thought.

        (0) 
        1. Andreas Kunz Post author

          Hi,

          jQuery mobile has a quite different approach for UI construction which is very much focused on declaration and close to the HTML of the page. While with UI5 you CAN use a similar declarative way to build the UI, the overall concept of UI5 is broader and more open (like people can plug in their own View types which may be declarative but using a different notation) and internally based on programmatic UI construction, so I don’t think it would be easy to combine them.

          But parts of UI5 (the lower-level components that do not depend on our UI control model) are indeed built as jQuery plug-ins (search for files starting with “jQuery*”…) and the initial idea was to contribute them to jQuery if there is enough interest, or to provide them as standalone jQuery plug-ins. Well, this has not happened yet… it’s additional effort and given that the whole thing is Open Source now, I’m not sure whether anyone would benefit from this.

          Regards

          Andreas

          (0) 
    1. Michael Graf

      Hello Krishna,

      yes, we will release all features for SAPUI5 also to OpenUI5 and vice versa.

      The most recent version for OpenUI5 is 1.22.4 (2014-07-16) and the next patch set will be released soon. Check our official home page on http://www.openui5.org for further details.

      Cheers,

      Michael

      (0) 
  4. Alexander Zulechner

    Hi Andreas,

    can you answer me some questions?:

    sapui5 is on special Netweaver Releases on the system, or on older versions it can be added with some patches.

    • which patches do i need, or which system requirements do i need for installing sapui5 on the system?
    • how can openui5 resources be used on SAP Systems? are there batches for them or do we need to upload the resources manually in a mime repository?
    • is there still support from SAPUI5 or are there only updates, features and bugfixes on OPENUI5?

    thanks and br,

    Alex

    (0) 
    1. Abhijeet Kulkarni

      Hello Alex,

      SAP UI5 can be brought into SAP ABAP stack through a component CA-UI5 (SAP UI development toolkit for HTML5 – Rendering library). This is supported between SAP NW ABAP 7.0 to 7.31. It is a pre-installed component in SAP NW ABAP 7.4. Refer SAP Notes 1747308, 1666368 and 1666369.

      SAP UI5 artifacts are best built on Eclipse, connected to your SAP ABAP landscape through ADT (Refer notes 1708020 and 1718399). This setup moves the Eclipse project to a SAP BSP application. However, you can build SAP UI5 based BSP application by hand, pointing the bootstrap url to the pre-defined installation location of SAP UI5 libraries.

      To my knowledge, OpenUI5 lags behind SAP UI5 in features by certain release cycles. That is, OpenUI5 is SAP UI5 – minus proprietary libraries like charting – after a gap of few weeks.

      (0) 
      1. Andreas Kunz Post author

        No, OpenUI5 and SAPUI5 are completely in sync!

        There are no separate codelines, same version means identical code, just with a different label on it and different license headers.

        But you are right that the overall functionality is not exactly the same: SAPUI5 contains some control libraries that are not contained in OpenUI5. This is not a matter of versions lagging, but those libraries are just not Open Source. This is the case for the chart library as most significant example and some others that are anyway less relevant outside SAP scenarios. So all the important stuff is in OpenUI5 as well, and in the same version. This includes the entire UI5 core with all framework-like functionality.

        Regards

        Andreas

        (0) 
    2. Andreas Kunz Post author

      Hi Alex,

      • Abhijeet already answered the patch question better than I could.
      • There is no special mechanism to import OpenUI5 resources on SAP systems, but it’s really not required because you get the same code with SAPUI5 (plus some more that is not in OpenUI5).
      • SAPUI5 and OpenUI5 are both fully supported with features and bugfixes. As written in my reply to Abhijeet, they are both built from the identical codeline.

      Regards

      Andreas

      P.S.: regarding “identical” OpenUI5 and SAPUI5 one has to be aware that the version numbering is a bit confusing: SAPUI5 has an overall version AND a version for each of the libraries inside, which can be slightly different! So SAPUI5 in version 1.24.5 contains the UI5 core in version 1.24.4(!). And OpenUI5 is using the core version number. So OpenUI5 1.24.4 is identical to SAPUI5 1.24.5. But both were build from exactly the same code at the same time.

      Just a minor detail to confuse everyone. 😉

      (0) 
  5. To Sha

    Hi Andreas,

    The newest version of openui5 is 1.26.X,

    But sapui5 still remains the version 1.24.X.

    Do you have any idea when the sapui5 1.26.X will be release?

    thanks.

    To, Sha

    (0) 
    1. Andreas Kunz Post author

      Hi To Sha,

      SAPUI5 is available (for SAP customers) since about a week from the usual channels.

      If you refer to the online installation at sapui5.hana.ondemand.com, this deployment is handled by some other team. I don’t know their update schedule, but some internal documents suggest that it might happen in the next few days…

      Regards

      Andreas

      (0) 

Leave a Reply