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. Graham Robinson

    Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.

     

    (You all know who I mean)

    (0) 
  2. Jan Penninkhof

    This is really great news. Thanks so much for making this possible Andreas, and a lot of others! Best x-mas gift you could give to the developer community ever!

    And I’m sure that it will work in SAP’s benefit as well!

    (0) 
  3. DJ Adams

    This is great news, and there a few things that make this even better:

     

    1. one of many core SAPUI5 team heroes Andreas is the one to make the all important introduction to the world; these folks deserve all the recognition they get and much more
    2. I might be speaking for myself alone, but I think that I speak for many when I say SAP surprised us in making this happen earlier than usual (just in time for the holidays, too)
    3. the power of the community is shown at its best; not only the SAPUI5 folks internally at SAP were pushing for this, but also a myriad people outside, people like the SAP Mentors and other developers and interested parties. And SAP listened
    4. It makes the Open Source SAPUI5 tshirt that I pre-ordered more, not less relevant ๐Ÿ™‚
    5. SAP will be using its fledgling presence on Github to make the contribution

     

    And there are others too many to list.

     

    So thanks SAP and mostly thanks to the folks in the boiler room (you all know who you are, and I know who you are ๐Ÿ™‚ for creating a great framework.

     

    dj

    (0) 
  4. Fred Verheul

    Great news indeed!

     

    From an outsider’s perspective it’s easy to look at this as if the external community (SAP Mentors and other community folks) pressed SAP to open source it and succeeded. Therefore it’s good to keep in mind that internally you guys must also have fought hard to make this possible. Kudos to all the SAP internal developers who made this happen!

     

    Cheers, Fred

    (0) 
    1. Wout de Jong

      I surely agree.

      Tim Back (SAP) “already” mentioned at TechEd 2013 Las Vegas that SAP planned to opensource SAPUI5. That the obstacles were removed so quickly is really nice. Of course, the nagging and praising by the Community will have helped as well. ๐Ÿ™‚

      Wout

      (0) 
  5. Barbara De Bruyn

    I Like!

     

    For us, SAP customers, this is an extra reason to go for  UI 5 for all web app development’, hoping that the UI5 community will grow very fast now …

     

    Barbara

    (0) 
  6. Roel van den Berge

    What an awesome news to wake up to! Thank you and your colleagues so much Andreas! Also a well-deserved shout-out to Jan Penninkhof! I have to admit that I (and a lot of people I know) did not think this would happen on such short notice. Therefore even more kudos to you all for making this happen in 2013! You WILL reap the benefits of this! You said you were serious about attracting developers from outside the ecosystem. Now you’ve SHOWN that you are committed to that. You now really have something to bring to development conferences like OSCON!

     

    Cheers, Roel

     

    P.S.: Did I read correctly that there are plans to make the ThemeDesigner open-source as well?

    (0) 
    1. Andreas Kunz Post author

      I did not intend to imply that Theme Designer will be Open Source. Honestly, I have no idea what the plan is. Maybe yes, maybe no. Things have to settle down first and will evolve then and we’ll see.

      (0) 
  7. Peter Muessig

    Great job Andreas. I especially like the section where you talk from the history of UI5/Phoenix. Finally we made it now and we made the first step into our intended direction we had in mind in the early days of the project to make it Open Source. Thanks for this great article. Sleep well – you must have written the whole night – at least the half one…

    (0) 
  8. Tom Van Doorslaer

    This is superb news!

     

    okay, there’s still some bits and pieces that need to fall in place, but those are all details.

    The first giant step has been made

    The UI5 open-source contribution from SAP is a fact

     

    Thanks to all the people, both internally and externally, influencing the decision makers at SAP, and thanks to the decision makers for listening with an open mind and seeing the bigger benefits!

    And at lightning speed (in business terms) I may add.

    (0) 
  9. Cesar Martin

    Hi Andreas,

     

    This is an excellent piece of news!!!!! Much expected by the whole SAP community!!!!

     

    What it is the exact Open Source License that will be used?

     

    Thanks,

     

          César.

    (0) 
    1. Peter Conrad

      Hi César,

       

      We’ve chosen the Apache License 2.0.

       

      Once we allow contributions there will be and additional license agreement for contributions.

       

      Peter

      (0) 
  10. Giovanni Degani

    Congratulations guys!!!! I have been using UI5 since I discovered a misterious internal project called Phoenix a couple years ago, since then I have always been a internal advocate for using it! in my 7,5  years working in SAP, I never felt so proud for it! It literally filled my eyes with tears when I saw the blog post!

     

    Congratulations again and keep the excellent work!

    (0) 
  11. Robert Wetzold

    As one of the hardcore UI5 users and strong evangelist from the early days I love that you made this happen. This is huge. I will spread the word with many friends outside SAP now who were waiting for this to happen. There are just so many use-cases when UI5 will save many of us myriads of hours of work.

     

    Where will the community be established for usage, feature and bug discussions? Any plans yet?

    (0) 
  12. Robert Eijpe

    Great news for the SAP and non-SAP communities. It is now to us, developers, trainers, people to promote OPENUI5 to the rest of the world. Many thanks to all who make this happens.


    Robert Eijpe

    SAP Teacher for SAPUI5 courses and initiator of SAPUI5.ORG


    (0) 
  13. Dave Fish

    This might not be the best place to post this, but does anyone have any tips for loading it into Eclipse (ala SAPUI5)? I’ve downloaded it and unzipped it to a local file. It doesn’t seem to work when trying Eclipse’s Help\Install New Software menu option.

    (0) 
      1. Dave Fish

        Thanks Samuli, is that for the OpenUI5 libraries? The link you provided seems to be for the SAPUI5 libraries. I know they are essentially the same but I want to set it up with the Open UI5 files.

        (0) 
        1. Andreas Kunz Post author

          Hi,

          good question… I’m not too familiar with the tools… they are not Open Source at this moment (the Open Source download does not contain the Eclipse tools), but of course the trial version from SCN could be used even by non-customers to try out whether the OpenUI5 sources can be integrated…. There is currently no official support for this, though.

          Regards

          Andreas

          (0) 
          1. Dave Fish

            Thanks Andreas. An Eclipse tools installation would be fantastic, but I think a plugin would be more useful to people interested in exploring Open UI5 as they probably already have an Eclipse installation.

            In the meantime I’m still looking for steps to get started using Open UI5 in an Eclipse web application. If anyone can tell me what files need to be added to a new or existing web application to make it work the biggest hurdle would be cleared.

            Regards,

            Dave

            (0) 
  14. Michael Herzog

    SAP and Open Source?!?!? This is one for the books!!!! As a customer and ex-Java and C++ developer, i have to congratulate SAP on this decision. Now, every web-developer can work with UI5 and contribute to this cool framework.

    (0) 
  15. Christian Grail

    Great news!

    I would love to see the SAP UI5 team working primary on OpenUI5 and open on github rather then cherry picking parts from the internal SAP UI5 version.

    If you mean it serious with OpenUI5 let SAP UI5 be based on OpenUI5 rather than the other way around. This should’nt be a technical issue.

    If you want a collaborating community you will need to give them a chance to see the development activity. If the community will just recieve monthly updates to the public git repository then their interest and participation will slowly but steadily decrease.

    (0) 
    1. Stefan Beck

      Hello Christian,

      I agree to most of your points, but the situation is not that easy. You are aware of SAP processes and rules like a shipment matrix etc. However, also for the non SAP employees, I give one example. Think of a security whole in SAPUI5 that we have to fix. When we do it directly in github, the vulnerability is disclosed before any SAP customer has had the chance to update his systems.This is then a perfect window to run attacks against our customers systems.

      I’m not saying that we won’t look for the best possible solution, but first, we will enable contributions and most likely do daily updates for standard fixes, special fixes and major development will be updated every quarter what isn’t too bad in my eyes.  Once we have this, we can still strive for more ๐Ÿ™‚

      This obviously is intended for the major/central framework pieces. In forked code lines of partners/individuals or central sample code sections, things could run differently. 

      But again, this discussion gives you and others the room to give feedback on my initial thoughts.

      Best regards

      Stefan

      (0) 
      1. Christian Grail

        Hi Stefan,

        thanks for your fast response. I know that the situation isn’t that easy and that there are a lot of concerns and worries. I was even one of the developers who implemented the SAP git based correction and security fix process.

        But I think for a nearly pure JavaScript framework fixing of vulnerabilities should be a real exception and not the rule.

        By just open sourcing the framework we are just getting the disadvantage of open source like getting no money for the framework. We will only get the advantages of open source like the vibrant contribution of non-SAP developers, if they feel that their contribution matters and that they are part of the development process.

        In the past I have been developing a lot of UIs based on Adobe Flex. The sources of Flex have also been open and Adobe published new versions all the time. But you could feel that they didn’t want to live open source and contributions from outside where more the exception then the rule.

        A good example for open source is Gerrit. It was initially developed by Google but they really wanted contribution from the outside. As of today many companies like Nokia, Quallcomm and SAP contribute to Gerrit even with full-time developers.

        My hope is that OpenUI5 willl become the next “Gerrit” and not the next “Flex”.

        Best regards,

        Christian

        (0) 
        1. Stefan Beck

          Hi Christian,

          as written above, I’m not at all questioning contributions – this is what we want and what we need to be as successful as possible. We have to find a reasonable way for the how.

          Best regards

          Stefan

          (0) 
  16. M.Saad Siddiqui

    Regarding comparison, I would like to see a comparison between OpenUI5 and ExtJS/Sencha Touch. ExtJS/Sencha Touch is also enterprise level JavaScript framework. It seems to me that tools like ‘Sencha Cmd’ are missing from OpenUI5/SAPUI5, which are essential for performance.

    (0) 
    1. Andreas Kunz Post author

      Hi,

      such a comparison would indeed be interesting, but a lot of effort if carefully done and comparing features of equal size and not omitting features of either library. Which I think would be mandatory for a good comparison.

      We are working on a list of what we see as features of UI5, this could be a good starting point, then.

      I think many capabilities of Sencha Cmd are also available from the UI5 build used internally which we try to simplify and document and publish.

      It does not have a built-in web server, but it has e.g. the code minification of JavaScript and CSS and uses LESS for having variables in CSS. It even has features beyond those of Sencha Cmd, like automatic generation of a right-to-left version of the CSS. In contrast to what Sencha Cmd appears to be doing it is not primarily meant as tool to package applications, but to package the UI5 runtime.

      So there is something similar in UI5, but not exactly the same thing.

      Another main difference is already contained in your question when it mentions “ExtJs/Sencha”, where one runs on desktop platforms and the other, meant for mobile devices, only in webkit browsers.

      Regards

      Andreas

      (0) 
    1. Andreas Kunz Post author

      Hi Tobias,

      I think both the runtime.war and the sdk.war have been left out intentionally because they added to the confusion around too many variants of UI5 to download. The current set of three is more easy to explain and works on any server.

      And the WAR versions had very limited additional value: basically only the search in the demokit. And this feature is still available in the online version of the SDK. If demand is large, we may re-add the demokit.war, though.

      Regards

      Andreas

      (0) 
      1. Tobias LeiรŸner

        Hi Andreas,

        as I’m on a SAP NetWeaver AS Java, the WAR archives are a way to deploy the software on the server. Of course I can use the SDA files from SAP Service Marketplace, but they are always outdated.

        Do you think in future the WAR archives will be gone completely? If so, I have to copy the runtime files into the /resource folder of the xApp for the SAP NetWeaver AS Java.

        Keep up the great work!

        Regards

        Tobias

        (0) 
        1. Stefan Beck

          Hi Tobias,

          please provide more information about old SDA files. In my opinion, we release every patch and new release rather quickly after RTC on ABAP. In case you wait for the next SP of the NW stack, you see that delay, but please specifically look for UI5 patches.

          Once we have the build tools for OpenUI5 in place, the assembly of the war file should be easy going or an easy contribution ๐Ÿ˜‰

          Best regards

          Stefan

          (0) 

Leave a Reply