Slides from the keynote at UI5conBE 2020. TOPICS: Fiori User Experience, Fiori Development Experience, Fiori Adoption Experience, UI5 Technology Innovation, Loading Evolution, Core Downsizing POC, Tooling Evolution, SAPUI5 on NPM (preview), CSS variables, UI5 Web Components Evolution, UI5 Web Components as UI5 controls. DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!

1. Stefan Beck (SAP SE); Peter Muessig (SAP SE)
February 14, 2020
UI5con Belgium
Keynote

3. What are the key pillars to fulfill
the North Star objectives?
SPOTLIGHT
"OpenUI5/SAPUI5"

4. Fiori Development
Experience
Fiori User
Experience
Fiori Adoption
Experience
UI5 Technology Innovation
Modern and Consistent Fiori Experience for the Intelligent Enterprise

5. Fiori User Experience
Fiori 3 enhancements
Like e.g. Fiori moments using a
distinctive visual language that
combines solution-oriented
messages, custom illustrations,
and a conversational tone.
Key User Flexibility
Simplified, cost-effective, easy to use
and modification free UI change
process
Situations
Automatically identify urgent and
important issues. Bring them to
the right groups of users and offer
intelligent support for making
the right decisions
Fiori 3
Flexible, simple, and convenient,
with machine intelligence guiding
users to make their work easier
“Provides the technical assets to achieve a modern, fast, consistent and appealing
User Experience, along the Fiori Design System for Fiori Applications for the central
Fiori launchpad and for the SAP Work Zone scenarios!”
Performance
Significant performance improve-
ments for Fiori Apps and FLP

6. Fiori Development Experience
Test Recorder
Simplify and speed up the creation
of automated tests for SAPUI5
applications. Available in each UI5
application (starting with 1.74 )
New Control Features
GridListItem, PlanningCalendar,
Harmonized InputControls,
Avatar, DynamicPage, etc.
UI5 Flex for customers
The new way to create adaption
projects on SAP CP for customers
and partners
UI5con
Growing developer community
and 2 events hosted by SAP
last year with 900+ participants
“Aims to improve the development environment by providing Fiori elements and a
declarative UI5 programming model with the goals to harmonize and reduce the
overall TCO!”
Stateful UI5 stack
Renovated UI5 stack using
OData V4 which optimally
supports the cloud application
programming model (CAP) on
Cloud Foundry and RAP on
ABAP
New UI Tools
Business App Studio
extensions to simplify Fiori
Elements development

7. Fiori Adoption Experience
CSS variables
To support a common theming
experience, UI frameworks should
support a shared set of CSS
variables which can be generated
by the UI theme designer
UI Integration Cards
Declarative approach to expose
content into applications or
dashboards cross products. UI5
provides a variety of card types for
different use-cases.
Common CSS
UI5 controls are currently the Fiori 3
reference implementation. The goal is
to extract and share the CSS to have a
common layer with e.g. Fiori
Fundamentals
UI5 Web Components
The framework agnostic offering to
ensure UX consistency on visual and
behavioral level for LoBs using other
UI frameworks.
“Provides solutions to allow and to simplify the integration of the LoBs into the
Intelligent Enterprise by providing e.g. UI5 Web Components or a common CSS
layer, which harmonizes the visual appearance across applications!”

8. UI5 Technology Innovation
Universal Toolbox
Become a universal toolbox with
different kind of individual reuse
functionality, such as i18n,
CLDR, …
Build & Dev Tooling
Open-source, Node.js-based CLI tooling to
build, test and run applications, components
and libraries. Extensible by design to enable
community driven extensions.
Standards & Trends
Moving closer to standards, e.g.
ES6, TypeScript, CSS Variables,
and more to benefit as much as
possible from well known tools
of the JS ecosystem.
Modular Core
Reworking the framework to get rid of
Globals, provide fine-granular modules,
introduce async APIs, remove jQuery,
and to support to shift code execution
from runtime into build-time.
“Has the goal of modernizing the foundation technology of the Fiori stack: UI5.
The UI5 Evolution project, which deals with performance, modularization, standards
& trends, openness and compatibility, drives the modernization!”
Rendering
Moving towards DOM-based rendering
to increase performance, maintainability
and enable side-by-side usage with
other UI technologies.
Web Components
Enable support for Web
Components in UI5 to allow to
integrate UI5 Web Components
back into UI5 as the standard
way to build agnostic UI elements
for UI5.

9. UI5 TECHNOLOGY
INNOVATIONIN ACTION

10. Basics:
 Modular Core and UI5 Tooling offer new
possibilities to create standalone application
bundles: Preload, Self-Contained, Progressive
Performance Test Setup:
 UI5 todo application
 UI5 Tooling using standard, self-contained and
custom bundle build
 Lighthouse CI (for automated checks)
 Test Environments: Desktop, Mobile
Expectation:
 Reach the highest possible Lighthouse rating
also for Mobile environments
Loading Evolution
(for standalone UI5 applications)
??
Performance
📱🖥

11. 35 61 88
Loading Evolution
(for standalone UI5 applications)

12. Basics: “Back to the Roots”
 Demonstrate the downsizing possibilities of the
Modular Core to create a bundle including the
Core, Configuration and the Control Framework
Performance Test Setup:
 Write a Minimal Core (no jQuery, no databinding)
 Use the UI5 Tooling to create a minimal self-
contained bundle
 Chrome Dev Tools (Network Tab)
 Test Environments: Desktop, Mobile
Expectation:
 Ultra-fast startup and display of a UI5 Control
 Derive learnings for a future UI5 Core
Core Downsizing POC
Performance
📱🖥
(bare-metal control framework performance)
EARLY PREVIEW

13. Open-Source CLI Tooling :
 Node.js-based Build and development tools to build, test
and run applications, reuse components and libraries
Easy Integration:
 Via CLI into the Editors or CI of your choice
 Via JS API into Build Tools (such as Gulp, …)
Type-oriented/Task-centric Build:
 Based on bare-metal Node.js
 Types define the execution order of Tasks
 Task are lightweight Node.js modules
Middleware-based Dev Server:
 Based on Express.js
 For resource lookup, on-the-fly replace of placeholders,
compilation of less to css, …
Tooling Evolution
2020
>_

14. Integration into SAP Dev Tools:
 The standard build for UI5 applications, components
and libraries in SAP Web IDE
 Via CLI into SAP Business Application Studio and
other environments
Additional Tools:
 Karma UI5 Plugin to simplify testing
 Migration tooling to update the UI5 codebase
Open and Extensible Toolchain:
 Extend the UI5 builder via custom tasks
 Extend the UI5 server via custom server middleware
 More to come…
Tooling Evolution
Migration
Karma
>_

15. proxy static

16. OpenUI5 SAPUI5
Installer
>_

17. Rendering Evolution: CSS Variables
Features:
 Split library.css into CSS variables and skeleton
 Extended UI5 theme build generation
 Added UI5 runtime configuration option
Benefits:
 Enable theming for custom controls
 Support cross-technology theming
Limitations:
 IE11 not supported
Outlook:
 UI theme designer support
 Concept of theme families
CSS variables
Library
Skeleton

18. UI5 Web Components Evolution
(from proprietary to standards)
Evolution highlights since Feb 11th, 2019:
 Alignment on UI5 configuration
 Reuse of UI5 modular core assets
 Reworked asset management
 Reduced the framework size
 From class-based styling to attributes
 New Playground and many new components!
 The next feature!
Missing features for 1.0.0 release:
 UI theme designer support
 Finalize the APIs to write own components
 Integration into UI5 control framework

19. Architecture:
 UI5 will be extended to wrap any kind of Web
Components
 Web Components are the foundation to build
agnostic UI elements
 UI5 Library will contain UI5 Controls which are
the wrappers of UI5 Web Components
 UI5 Controls connect Web Components with the
programming model feature of UI5 such as
databinding or usage in views
Challenges:
 UI5 Web Components are built with latest JS
features which needs to be transpiled into
AMD-like modules for the usage in UI5 Controls
Control Framework Evolution
EARLY PREVIEW
UI5 Web Components
ui5-button ui5-input ui5-datepicker
require(as AMDbundle)
OpenUI5/SAPUI5 Control Library
Button Input DatePicker
usevia custom tags

20. Thank you.
Contact information:
Stefan Beck
Chief Product Owner, UI5
stefan.beck@sap.com
@StefanBeck3
Peter Muessig
Chief Architect, UI5
peter.muessig@sap.com
@pmuessig