UI5 Framework and UI5 Web Components

Some weeks back, I was really excited to be invited to talk about Web Components. During the talk some questions around the UI5 framework and the UI5 Web Components came up which I was not really able to answer properly and so I decided to share them with you all via this blog post.

Looking back in history

11 years back, in 2009, at SAP, we started to develop a framework called Phoenix which has been rebranded to SAPUI5. In 2013, the core of the SAPUI5 framework has been open sourced as OpenUI5 under the Apache 2.0 license. Since 2017 we are working on the innovation of our framework to align with the latest web standards and trends. In the blog post, I will use the term UI5 framework as common term for OpenUI5 and SAPUI5.

What is the UI5 framework?

The UI5 framework is a JavaScript UI framework to build client-side, responsive and enterprise-ready web applications. Enterprise-ready means that the web applications are globalized, secured, accessible, theme-able and backwards compatibility. The UI5 framework as such provides concepts like components (in other frameworks called applications and/or reuse composite components), Model-View-Controller pattern to structure the application, routing to manage the navigation between the views, built-in data binding and much more. In UI5, so-called controls (respectively UI elements) are being used to compose the user-interface. One major benefit of UI5 is: they come with a huge variety of bread & butter, layout and complex controls to build your application. Today, OpenUI5 provides more than 300 and SAPUI5 adds more than 350 additional UI5 controls on top of OpenUI5. Learn more about the difference of OpenUI5 and SAPUI5 here.

Why did SAP develop UI5?

Back in 2009, we looked into several UI frameworks which were present these days. Most of the qualities required for enterprise applications have not been fulfilled by existing open source frameworks. Especially backwards-compatibility is essential if it comes to developing enterprise applications for which we need to guarantee the framework support for about a decade. Since we started 11 years back, many of the applications which have been built years back still run with newer versions of UI5. We are still on major version 1.

What is SAP Fiori?

SAP Fiori is the design language that defines the user experience of SAPs enterprise applications. The design philosophy of SAP Fiori is based on five core principles. The SAP Fiori user experience is role-based, adaptive, simple, coherent, and delightful. The UI5 framework is aligned with the SAP Fiori design guidelines so that the web applications built with UI5 are providing a consistent user experience.

Is UI5 self-contained or does it use open source?

UI5 is using open source software. There are a bunch of open source libraries included in the UI5 framework. The most prominent example of open source being used is jQuery. Back in 2010 we removed our proprietary browser abstraction layer and replaced it with “the” open source library these days: jQuery. Other examples are d3 (Charts), datajs (OData library) or URI.js (URL handling). There are a lot more open source libraries being used and a full list of them can be seen in the LICENSE.txt of the OpenUI5 project.

Is the UI5 framework comparable with Angular/React/Vue?

Yes and no. The closest relationship might be to Angular. Similar like Angular, with UI5, you are getting a complete framework to build your web application. Some people also call this a one-stop shop. You can use the built-in concepts like components, routing, MVC and data binding to create your applications completely in UI5 – no need for additional open source libraries. The UI elements of the UI5 framework are called UI5 controls. The best match in Angular are Angular components. The biggest difference is that the UI5 framework shipped as OpenUI5 or SAPUI5, already provides a lot of UI5 controls structured in libraries which can be used out-of-the-box by application developers.

What is a UI5 control?

A UI5 control is a UI element which is composed by its API (the metadata, like properties, aggregations, events), the behavior (the internal event handling), the renderer (the markup creation) and the CSS. UI5 controls are the built-in offering of the UI5 framework to write UI elements. One special feature is the out-of-the-box data binding support which allows to easily bind the controls to data from different models.

Web Components? Why do we need them?

UI5 controls are proprietary and as of today are tightly coupled to the UI5 framework. Other JavaScript frameworks are not able to use them without pulling the UI5 framework. With Web Components becoming mature there are new possibilities to write UI elements based on web standards. The basic framework is built-in and comes with no footprint. It introduces a clear interface between the consumption and the implementation of the UI element. It also ensures that the consumer cannot interfere the behavior and the layout without explicitly allowing it. This all makes Web Components extremely interesting and we decided to move the development of our UI elements towards Web Components.

What are UI5 Web Components?

UI5 Web Components are based on the web standards around Web Components (as they are: Custom Elements, Shadow DOM, ES modules, and HTML templates). They are framework independent UI elements which are implemented in accordance with the SAP Fiori Design Guidelines and incorporate the SAP Fiori design (see above: What is SAP Fiori?). They also ensure visual and behavioral consistency for static web sites and web applications. UI5 Web Components come with the familiar enterprise-grade features of UI5 such as stability, internationalization, accessibility and theming support.

What is the difference between UI5 Web Components and UI5 controls?

UI5 Web Components are built independent of the UI5 framework. Compared to UI5 controls, the footprint of UI5 Web Components is much smaller because UI5 controls are embedded in an application programming model, whereas UI5 Web Components are not. And exactly this sets UI5 Web Components apart from UI5 controls. They enable you to use our UI elements with any HTML based UI technology of your choice.

Are UI5 Web Components just a wrapper for UI5 controls?

No, definitely not. Right now, UI5 Web Components and UI5 controls are two different concepts. In the near future, it will be vice-versa and controls will be a wrapper of Web Components. With controls, Web Components can be easily integrated in the application programming model of the UI5 framework. The Web Components will gain the integration into the lifecycle and data binding support.

Volker Buzek wrote a nice blog about UI5 with UI5 Web Components last week. Within this blog he explains how both worlds can play together and benefit from each other. In the initial setup, I provided to Volker, I basically sketched the idea of using a UI5 control as a wrapper for a UI5 Web Component to integrate them into UI5. A mature less manual effort-driven solution is about to come from UI5 in future. Stay tuned…

How to get started with the UI5 Web Components?

UI5 Web Components are open source! They are available on GitHub. For now, they are released as a „release candidate” as we want to gather your feedback and keep the possibility to adapt. To get started we invite you to visit our home page. Here, you can discover and get started with the UI5 Web Components. You can explore the code in our GitHub repository, the examples and documentation in the Playground and learn about the integration possibilities into other frameworks.

How can I contribute to the UI5 Web Components?

We really would like to ask you to try out the UI5 Web Components on your own and use them. We kindly ask you to provide feedback: What do you miss? What do you like? What should we improve? Or just help us to improve! In any case, please create a GitHub issue to send us your feedback or open a GitHub pull request to send us your contribution or join our #webcomponents channel of the OpenUI5 Community Slack to discuss the UI5 Web Components with us! We are looking forward to collaborating with you.