What are Web Components?

“Web components are a set of web platform APIs that allow you to create custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.” (This is a quote from https://www.webcomponents.org.)

In short: A web component is a custom HTML tag to realize a custom UI element.

Why is SAP investing in Web Components?

SAP and specifically the SAP Design System strive for an efficient implementation of a consistent user experience across all SAP solutions. This includes various UI technology stacks of SAP, of acquired solutions and even of non-SAP solutions. To realize this, SAP wants to rely on a single, reusable, central layer of UI components, offering consistent UI qualities to all different solutions.

Picture 1: Web Components: Building apps with reusable components for any framework

Where is SAP today?

SAP’s UI technologies offer essential qualities for building Web UIs in different scenarios:

• Consistent UX: enabling the SAP Fiori design evolution towards a consistent user experience across SAP solutions (and beyond)
• Use anywhere: allowing a single, responsive app implementation for all browsers, platforms, and devices
• Rich set of enterprise UI elements for building professional UIs for an enterprise context
• Benefit from innovations: bringing a clear lifecycle separation of application and UI technology to centrally innovate while being upgrade-compatible

Specifically, there are UI5 Web Components, SAP’s growing open source offering of currently 65 (status November 2022) core web components to be adopted with any UI technology stack. We notice a strong demand for using these components and their qualities in many different SAP contexts. UI5 Web Components are already used by some SAP products and because they are so successful, they are also reused within SAPUI5.

What are SAP Web Components?

SAP Web Components are SAP’s new approach to provide enterprise-ready UI components for professional developers using any Web UI framework. Developers can use SAP Web Components to benefit from generic and as well as SAP product-specific UI components in all SAP solutions.

SAP Web Components are built in SAP with an inner source approach, which combines generic, common components with domain-specific components for individual business use cases. This approach will foster an SAP internal ecosystem for developing common components for all purposes and corresponds to SAP’s model for evolving the SAP Design System.

SAP Web Components will become the standard reuse layer across SAP solutions.

Picture 2: A tailored approach with SAP Web Components for every business solution

SAP Web Components are SAP’s UI components for the future. They

• … reduce the total cost of application development with a common re-use layer for any Web UI
• … are easy to understand
• … deliver UI innovations faster
• … are the reference implementation of the SAP Design System and its future evolution
• … can easily be shared due to common technology and know-how
• … offer SAP support, just like SAPUI5

How will you benefit from SAP Web Components?

You will encounter one of these scenarios:

• I want to build a new app
  • Use SAPUI5 if your technology stack offers SAPUI5 and you want to leverage a full application framework.
  • Use UI5 Web Components and SAP Web Components if you need individual UI components with any Web UI technology.
• I have an SAPUI5 app: Stay with SAPUI5. It continues to be SAP’s strategic Web UI framework.
• I have an app using UI5 Web Components: Stay with UI5 Web Components. Going forward, you may additionally use SAP Web Components for domain-specific UI components.

Going forward

SAP is going to publish more, concrete information on SAP Web Components as soon as possible.

(Disclaimer: SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice.)