Five years ago, SAP guru dj.adams asked me to write about the history of UI5, as a foreword for his eBook “30 Days of UI5” (content available here). Five years! Time for an update!
This post might be interesting for anyone in for a brief “what is it?” and a slightly longer “how did it develop into what it is?”.
What is UI5
For those not aware of what UI5 (SAPUI5/OpenUI5 – we’ll come to this later) is at all: it’s a JavaScript-based web user interface framework.
One that is specifically targeting enterprise use-cases, covering everything that comes along with it: long-term compatibility and maintenance, internationalization, robustness, security, accessibility, mass data handling, tools for support and efficient development, and bucketloads of features and UI widgets (called “controls”) – literally several hundreds of them. Last but not least, all of this is implemented with a consistent, pleasant, award-winning and well-thought-out visual design named “Fiori”.
Project Phoenix – the Origin
It all started back in November 2008, with five or six people from different teams squeezed into a room that was meant to accommodate four. We were asked to create a new UI technology. One that was flexible, extensible, modern, and independent from the backend technology. None of us had any idea at this point in time where this would eventually lead us to.
The need for this had arisen because previous UI technologies at SAP were:
- not extensible, so the UI dev team was a bottleneck for new features
- shielding application developers from the browser, which was a good thing in terms of avoiding problems, but prevented the usage of new browser features and CSS styling
- strongly coupled with the backend version, which prevented customers from easily upgrading to a newer and more modern version of the UI
- also strongly coupled with the backend technology (ABAP or Java), which made them unusable for other companies acquired by SAP at that time, as they all came with their own different technology stacks
The Rise of SAPUI5
It was a long journey with changing stakeholders, directions, visual designs – but always with an enthusiastic and very engaged small team that was willing to help app developers wherever possible.
This and the freedom to tweak and extend, as well as the ease of creating impressive results quickly (like bringing up the then-modern-looking “Gold Reflection Shell” with one line of code) helped a lot to make UI5 a popular choice among SAP developers for prototypes and spare-time projects.
Sort of a revolution: devs happily chose an SAP UI technology for beauty and ease?!
The breakthrough in the mainstream of SAP applications began in May 2013 when “SAP Fiori” was announced, a set of 25 new applications which were designed for beauty, usability, responsiveness across devices – and built using SAPUI5. Hundreds and thousands of applications would follow.
Not only has UI5 been used since then for new mainstream business-suite-like apps, but also for exotic ones like e.g. SAP Sports One, where the design flexibility of UI5 really shines – and helped winning more visual design awards.
In this phase, the UI5 team started growing: first into a full-fledged Scrum-team-of-ten, then it was split into a core team and one creating the “sap.m” controls. These controls were first solely meant for touch devices (and “m” stood for “mobile”), but then re-defined to be the cross-device “main” control library of UI5 (guess what the “m” now stands for…).
Appearances of UI5 in the past – the Gold Reflection Shell and the first Fiori apps
Going Open Source – the Birth of OpenUI5
As we were die-hard open source fans and avid users of other open source libraries within UI5, the dev team pushed from the beginning to make SAPUI5 itself open source. We hoped for benefits like being able to collaborate more easily with the outside community, getting early feedback and bug reports, and growing UI5 know-how in the outside developer world.
It was a tough endeavor back then, with few SAP projects published under an open source license before, no processes in place, and mindsets not always open to that idea. So, it needed the right moment and some push from the outside SAP community. On December 11th 2013 it was announced that UI5 would be available as “OpenUI5” under the Apache 2.0 open-source license.
Although having had the open source dream for a long time, we were a bit taken by surprise, when we had the go-ahead all of a sudden. While OpenUI5 was immediately available for download and the web page was ready, it took a couple of months to get all the internal Maven-based legacy infrastructure rewritten in Grunt and prepared for developing in public. Finally, on October 10th 2014 (the commit itself is from 9th), the GitHub repository was populated and we started accepting contributions.
A small step for a developer, but a giant leap for UI5 – a live screenshot from when we first populated the public GitHub repository
Since then, there have been 65,000 code commits (more than 5-10 other popular web frameworks combined), hundreds of pull requests by outside contributors and 2,400 bug reports. These reports mostly have an excellent quality and lead to an actual fix in about half of the cases, which is a very good ratio, as compared to other sources of bug reports. In a nutshell, our hopes were fulfilled.
One more thing to mention: the open-source version "OpenUI5" encompasses the core of the SAPUI5 framework and a big number of control libraries – basically most things the UI5 teams in the UI department of SAP are working on. But some control libraries, mostly developed in other departments, are not part of OpenUI5, they are only available in SAPUI5: they are e.g. too specific to SAP use-cases or contain IP which is not intended to be given away under an open source license.
Community
The open-sourcing did not only help us with bug reports, early feedback and contributions, but it also opened the gates for a wealth of community interaction! Some examples:
- UI5con conferences: in 2016, the external UI5 community and us started jointly organizing conferences around UI5, first in Frankfurt, then in Eindhoven (purely organized by the community), then Frankfurt again. Motivated by the huge success and popularity we decided to think bigger and organize our own UI5con@SAP 2017 at SAP in St. Leon Rot, Germany, for 400 attendees. Tickets were booked quickly and all attendees happy. Therefore we repeated the conference in 2018 and extended the experience with an additional conference in Bangalore, India. Tickets were gone even quicker and for the next UI5con@SAP 2019 they were even all gone within less than half an hour. Again, there was a sister UI5con in Bangalore that year. COVID-19 destroyed our plans for 2020, so we went all-online this year with the first “UI5con ON AIR”.
- External conferences: being open source, we could talk about and present OpenUI5 at important international conferences like OSCON 2014, FOSDEM and Fluent in 2015, OSCON 2016, and many more. It was interesting to see how reactions changed over the years from “Open source at SAP? What?” to “Ah, OpenUI5… we are using it!” (well, sometimes).
- Communication channels: Different types of channels were sometimes initiated by the community, such as the OpenUI5 Slack space, sometimes by the UI5 team, like the blog post series “UI5ers BUZZ”, the podcast series “UI5 NewsCast”, the @OpenUI5 Twitter account for news and announcements, and the OpenUI5 Youtube channel with more than 100 videos, including many UI5con conference session recordings. The latest member of this family, is „UI5ers live“, a monthly interactive Zoom session, where UI5 developers from our dev team and the outside community can present projects and discuss new ideas.
- Community collaboration projects: larger, formal ones, like the ui5lab.io repository for custom controls developed by the community, or smaller-scale collaboration like when UI5 lead architect peter.muessig and vobu, a UI5 veteran from an external company, sat together and worked on things in the UI5 tooling area.
The first UI5con@SAP conference in 2017
Growth, Evolution, Offspring
Many projects around UI5 have grown over the years: Fiori Launchpad, SAP WebIDE, tools like the UI5 Inspector browser plugin, the UIVeri5 testing framework, even a jump ’n’ run game named “Flush!”. The UI5 tooling is a new set of command-line tools for building and optimizing.
At least 10% of all SAP open source projects at https://github.com/SAP are related to UI5 right now!
But the framework itself has also not only grown in terms of features and number of UI controls. It has also evolved. This is a main pillar of our strategy: remain relevant and attractive by adopting new standards and trends – without sacrificing the long-term compatibility required by app developers.
One of the related efforts is literally called “UI5 evolution”. It is about modularization, proper dependency declaration and in particular about adopting a more asynchronous way of programming, to get rid of any synchronous browser requests and speed up the framework. Care has been taken – as always – that this causes no disruption to existing apps, but can be adopted as easily as possible to profit from the enhancements. Also the "Fiori" design is constantly evolving, as nicely explained here.
More development teams were added as well – in particular in Sofia, Bulgaria, focusing on control development and infrastructure. Also in Walldorf, there are now more teams, e.g. one dealing with the data models, one with the tables, one with the upcoming “sap.ui.mdc” smart controls, more around flexibility, FLP etc. And many control libraries (mostly the SAPUI5-only ones) are being contributed in an “inner-source” process by teams in other locations and continents.
It’s also interesting to see how the delivery/consumption options of OpenUI5 for outside developers have changed – improved! – over the years: initially it was a zip download, nothing else. Then came Bower, then the distributed content delivery network for direct consumption without any downloading. Two years ago we started providing OpenUI5 via npm registry, where we currently count 5,000 downloads per week – on top of the direct downloads and CDN consumption. And from quarterly releases we have moved to monthly ones, with the additional availability of public servers running the latest nightly build.
Last, but not least, there is another very important and big project to mention: the UI5 Web Components! It is a set of UI elements on its own, developed as real HTML elements (according to the web components standard), so they can be used within any other web framework (like Angular, React, Vue and others) as if they were regular HTML tags. It is a complementary offering for applications which do not need the entire wealth of UI5 features or are already implemented with a different framework, but still want to profit from the enterprise qualities in the UI elements. The UI5 Web Components were very well received in the web development world and repeatedly named one of the “Top 9 Web Components UI Libraries” or of the “9 Web Components UI Libraries You Should Know in 2020”.
Not only UI5 evolved, but also its logo. The cutter for Christmas cutout cookies still has the old shape, though.
Future
As you can guess from the things happening in the past, there’s plenty going on towards the future. One topic is to extend the synergies between OpenUI5 and the UI5 Web Components. One of our goals is to be able to write UI5 controls as web components and seamlessly use them with or without the overall UI5 framework.
Another topic for the next months is establishing proper TypeScript support. There is some, but nothing truly complete and official.
But these were just two examples. There is much more and of course also the regular improvements, performance enhancements, and general features here and there. If you are interested in a broader and deeper overview of what’s going on in 2020 and beyond, Margot has written a great blog post. Those with an SAP login (or willing to quickly create one) can also check out SAPUI5 in the SAP Roadmap Explorer.
For OpenUI5 and everybody involved times won’t be boring anytime soon!
- SAP Managed Tags:
7 Comments
