UI5ers Buzz #39: UI5 Evolution – a quantum leap ahead!

Every developer and user needs a fast, easy to use, flexible and enterprise-proven UI technology. UI5 has grown over the years to be exactly this! The UI5 framework is now largely adopted by many SAP products like SAP S/4HANA, but also outside of SAP with OpenUI5 for the open source community. This shows that great results can be implemented with UI5 in an efficient way.

Looking at the market of web technologies, we  can observe a growing speed of innovation. It is a key priority for UI5 to leverage such new technologies, while at the same time providing enterprise qualities and a consistent Fiori user experience to our customers. This combination is the major strength of UI5.

With this blog I would like to shed some light on the latest UI5 innovations and what is currently under way from UI5 developers in the SAP labs. (I’m using ‘UI5’ as an abbreviation for joint capabilities of SAPUI5 and OpenUI5.)

To improve the startup performance on specific mobile devices, the UI5 developers cut down the amount of data being loaded to bring up the initial screen. While this work showed excellent results, we decided to use this to spark a paradigm shift: UI5 Evolution. This project evolves UI5 towards new technologies and capabilities, which have direct benefits for UI5 developers and their applications:

• Performance
• Modularization
• Standards & Trends
• Openness
• Compatibility

(Note that UI5 Evolution is a project, not a product or a disruptive new release.)

Picture 1: UI5 Evolution

Modular core

UI5 Evolution comes with a new modular framework architecture, enabling consumers of UI5 to load only those resources they actually need for their app. Together with asynchronous APIs and a paradigm shift from runtime to build time, this will increase the performance of UI5 applications.

We re-factored the core modules to become more fine-granular and introduced an AMD-like module syntax to enforce dependency declaration and to get rid of globals.

UI5 build & development tooling

UI5 Evolution comes with an open-source Node.js based build & development environment to support application developers. Analyzing code dependencies, this tooling creates self-contained packages for standalone applications with only the necessary modules. Such a package is considerably smaller and thus boosting the application startup performance which is especially helpful for mobile devices. The build & development tooling comes with its own command line interface.

Rendering & controls

The goal here is to define a modern control framework, which simplifies the creation of lightweight and declarative controls with a minimalistic footprint. With this new approach the creation of composite control becomes a less complex task.

Programming model

Obviously, innovations wrt. to the application programming model have to protect existing investments on application side, both with customers/partners as well as within SAP. At the same time, UI5 Evolution will enable a reuse of UI5 controls for other programming models as web components. With this, also applications built with a programming model such as React or Angular can benefit from UI5 out-of-the-box capabilities like an SAP Fiori user experience, SAP’s product standards (like security or accessibility) and for example ways to create a custom UI theming.

UI5 Web Components are future-proof, easy to adopt by any HTML framework and provide UI components with their design and behavior.

Picture 2: UI5 Web Components

Picture 3: UI5 Web Components – Programming Models

The way forward with UI5 Evolution

UI5 Evolution is a modern and competitive UI technology which combines latest web technologies with classical SAP strengths. It is a secure path forward for all stakeholders, with some capabilities taking effect automatically with the respective UI5 version, while other capabilities can be adopted gradually.

Soon we will publish more UI5ers Buzz blogs with additional technical details on UI5 Evolution. Watch out…

For now you might want to watch the SAP TechEd lecture ‘Understanding the SAPUI5 Evolution‘ or see these links:

• UI5ers Buzz #38: Modularization of the SAPUI5 Core
• UI5 build and development tooling
• UI5con 2018 in Rot (2018-06-22)
  • UI5 Evolution – the Core Changes: Recording and Slides
  • UI5 Build & Development Tooling: Recording and Slides
• Documentation in SAPUI5 Demo Kit, e.g.:
  • Modules and Dependencies
  • Best Practices for Loading Modules
  • Adapting to the Modularization of the Core
  • sap.ui.loader

Previous Post: UI5ers Buzz #38

All Blog Posts: UI5ers Buzz

Oliver is the Area Product Manager for SAP UI technologies and especially UI5. He is passionate about engaging with customers and spreading knowledge on how to improve our lives.