Day 1 of CodeConnect 2025, the UI5con

Web Components

One of the most frequently mentioned topics at UI5con was certainly the UI5 Web Components. While they have been around for some time, they were often overshadowed by the official UI5-Controls. However, over the past few years, the Web Components have been steadily expanded, and many UI5 controls are now also available as Web Components.

Advantages

The biggest advantage of Web Components is that they are framework-agnostic. This means they are not built specifically for the UI5 framework but can also be used with other frameworks like React, Svelte, or Vue. This makes it possible to build applications with the framework of your choice while still providing users with the familiar SAPUI5 look and feel.

In addition, the UI5 Web Components are based on the official Web Components HTML-Spezifikation. This gives confidence that these components will continue to work reliably in the future, which is a crucial factor for business-critical applications.

In several talks and workshops, the templating language JSX (or TSX) was also a topic, which integrates very well with Web Components. This reinforces our impression that the XML templating language is one of the "weak points" of SAPUI5, especially when it comes to developer experience.

Disadvantages

Web Components have existed in the web world for a long time and are already used or offered by many solutions. However, there are many voices (e.g. https://dev.to/ryansolid/web-components-are-not-the-future-48bh) arguing that they may not represent the future of web development. Several arguments support this view:

The biggest issue with Web Components is that they can only be rendered on the client side. This means that when Web Components are used in a web application or website, they are only constructed after the page has loaded. This can cause unwanted layout shifts, which negatively affect the user experience. However, the latest browsers offer a standard-based solution: the so-called Declarative Shadow DOM.

This allows a template to be server-rendered for the component's layout, which is then replaced on the client side by the “real” Shadow DOM template. There is already an implementation of this via the Lit framework (https://www.npmjs.com/package/@lit-labs/ssr), but it is still in “lab” status. It’s also worth noting that UI5 Fiori apps are strictly single-page applications (SPAs), so server-side rendering is not an issue in this context.

Using this new standard is still quite complex for more advanced components, which is why not many libraries and frameworks support it yet. This brings us to the second issue with Web Components: the learning curve. Both using and implementing Web Components can be quite steep and require practice before one can build them efficiently. This is mainly because most of the work happens inside the so-called Shadow DOM. The Shadow DOM enables Web Components to run completely isolated from the surrounding page, avoiding side effects in terms of styling or behavior. To work within this abstraction, many new language concepts (CSS selectors, JavaScript APIs) have been introduced into HTML, which can feel unfamiliar at first, especially for web developers new to the topic.anfühlen.

Tooling

In addition to Web Components, tooling and developer experience with UI5 were also major topics. There were several talks as well as a very interesting panel discussion on the subject.

VSCode has become the "standard" (see our blog post Blogpost Develop SAP Fiori Applications with VSCode), and even MacBooks are now "allowed" in the SAP world. Tech nerds could even use the UI5 Language Server in NeoVIM. The UI5 team consistently relies on JavaScript for tooling and avoids complex dependencies from build systems like Vite. While this may seem old-fashioned at first glance, it follows a clear strategy: SAP retains control over the lifecycle management of its tools without relying on third parties. Smart!

TypeScript

TypeScript seems to have gained solid ground in UI5 development. In most talks, the code snippets were already written in TypeScript. Unlike previous UI5cons, there were no talks specifically focusing on TypeScript. We interpret this as a sign that TypeScript has arrived in the UI5 world and is now accepted as a standard.

This is certainly a very positive development, as it significantly improves the quality of JavaScript applications. It also makes code refactoring and extension much easier.

However, many resources on the web, such as documentation and tutorials, are still not available in TypeScript. This will likely change more and more over time.

Accessibility

There were also several talks and workshops on the topic of accessibility. The team behind it shared some examples and plugins in their Figma workspace (https://www.figma.com/community/file/1301101696020142882). These help designers to conceptualize Fiori apps and to integrate behaviors like tab order, shortcuts, key commands, and text-to-speech consistently into Figma designs. Developers then have clear guidelines and can implement accessibility as intended.

It is always encouraging to see that accessibility is playing a growing role in web applications. When implemented consistently, it not only supports people with impairments but also benefits power users, which can be especially important in the development of internal applications.

Design

Although the focus of this conference was on technical talks, the topic of UX came up repeatedly. SAP is determined to shed the legacy of its old user interfaces and is moving toward a modern future with several initiatives. One of these efforts is the unification of SAP’s entire appearance. They are now aligning the user interface from the core application all the way to marketing materials with a single design system.

In addition to this, we learned that SAP is currently developing user experience guidelines and is internally pushing hard for an optimal UX. Their goal is to ensure that partners like us can also benefit from this expertise.

Conclusion

All in all, it was a very exciting day with many interesting topics.
Here is a summary of our key takeaways:

🧩 Web Components are becoming increasingly important, especially in relation to using JSX/TSX as a templating language.

🏗️ Tooling for UI5 development continues to improve. Using modern editors like VSCode is no longer a barrier.

🧑🏻‍💻 TypeScript has arrived in the UI5 world, and more and more resources related to UI5 are now available in TypeScript.

🎯 Accessibility is an important topic for UI5 applications. In addition to supporting users with impairments, it can also benefit power users.

🎨 SAP is working to unify its design across platforms and is providing supporting resources for developers.

Many thanks to SAP and everyone involved for the great organization, the catering, and the conversations. Also, a big thank you to the entire community for the engaging talks and interesting discussions.

Continuing with re>≡CAP

The second day focused on CAP (BTP) and backend development.
Our summary of the re>≡CAP day will follow in the next blog post.