UI5 is an open-source, extensible JavaScript framework that builds enterprise-grade HTML5 user interfaces, adhering to SAP Fiori design principles. It supports modularization for enhanced performance, especially on mobile devices, and offers a range of controls for various applications. The framework is continuously evolving, with a focus on compatibility, standards, and community contributions through initiatives like OpenUI5 and UI5Lab.

2. UI5 Evolution
What is UI5?
Open Source
Agenda

3. Framework

4. What can I build with UI5?

5. What else can I build with UI5?

6. What is UI5?
Rich, extensible, responsive and theme-able control set which
supports Fiori design principles
Client-side, platform independent JavaScript framework for
building enterprise-grade HTML5 UIs
Fulfills the SAP product standards
De-facto standard SAP UI technology to develop Fiori Applications

7. Ingredients
Tracing
SupportTool
Control
Libraries
Composite
ManagedObject
Eventing
Metadata
Configuration
Component
Application
View
Router
Controller
Time
Currency
Edm
Formatting
Model
ListBinding
AnalyticsJSON
OData
Chrome
EdgeSafari

8. UI5 can be simple... Let the code speak!
Creating a JSON model: Create and render Controls:
Bootstrapping UI5:

9. Working with Mass-Data in UI5
OData Models support paging and drill-down
of hierarchies
Controls to display mass-data: Grid Table,
Growing List, Charts*, …
Create your own Model to control the data
being loaded
Update Models via server push to implement a
live update feature IoT app

10. What is UI5?
Rich, extensible, responsive and theme-able control set which
supports Fiori design principles
Client-side, platform independent JavaScript framework for
building enterprise-grade HTML5 UIs
Fulfills the SAP product standards
De-facto standard SAP UI technology to develop Fiori Applications

11. Many different UI libraries that offer
controls for different purposes, e.g.:
sap.m (~150 controls & elements)
• Started for mobile devices
• Adding responsiveness
• Adding cozy and compact mode
• Now standard library for all devices
Rich and extensible

12. Responsive

13. Theme-able

14. What is UI5?
Rich, extensible, responsive and theme-able control set which
supports Fiori design principles
Client-side, platform independent JavaScript framework for
building enterprise-grade HTML5 UIs
Fulfills the SAP product standards
De-facto standard SAP UI technology to develop Fiori Applications

15. Product Standards
Internationalization
37 languages, CLDR data for formatters, RTL support, calendars
Security
XSS, clickjacking,CSRF, CSP
Accessibility
Screen reader, keyboard navigation, high contrast theme, …
Stability & Maintainability
API stability over time, extra quality assurance, support and debugging tools
Theming

16. Comprehensive Documentation
• Tutorials
• API Reference
• Samples
• Demo Apps
• Tools

17. What is UI5?
Rich, extensible, responsive and theme-able control set which
supports Fiori design principles
Client-side, platform independent JavaScript framework for
building enterprise-grade HTML5 UIs
Fulfills the SAP product standards
De-facto standard SAP UI technology to develop Fiori Applications

18. Fiori Design and FLP Integration
MeArea Notifications

19. Versioning Strategy
1.46
(Innovation)
1.52
(Maintenance)
1.48
(Innovation)
1.50
(Innovation)
1.52
(Innovation)
1.54
(Innovation)
1.60
(Maintenan
1.56
(Innovation)
1.60
(Innovation)
1.62
(Innovation
1.58
(Innovation)
• Quarterly release cycle of Innovation versions
• Innovation version will be replaced by next Innovation version
• Every 4th Innovation version becomes a Maintenance version
• Maintenance versions will be supported for max. 2 years
• Most versions are available via CDN

20. Evolution

21. What is UI5 Evolution?
Targeting for performance especially on mobile devices by reducing
the footprint with modularization
The innovation project of UI5 to solve today’s problems and
advance the framework, tooling and controls
Move closer towards standards and trends to benefit from
innovations, tools and man-power of Open Source
Ensure compatibility to safe the investment of existing UI5 apps and
provide evolution guidelines and tools

22. What is UI5 Evolution?
Targeting for performance especially on mobile devices by reducing
the footprint with modularization
The innovation project of UI5 to solve today’s problems and
advance the framework, tooling and controls
Move closer towards standards and trends to benefit from
innovations, tools and man-power of Open Source
Ensure compatibility to safe the investment of existing UI5 apps and
provide evolution guidelines and tools
Performance
Modularization

23. What is UI5 Evolution?
Targeting for performance especially on mobile devices by reducing
the footprint with modularization
The innovation project of UI5 to solve today’s problems and
advance the framework, tooling and controls
Move closer towards standards and trends to benefit from
innovations, tools and man-power of Open Source
Ensure compatibility to safe the investment of existing UI5 apps and
provide evolution guidelines and tools
Standards & Trends
Openness

24. What is UI5 Evolution?
Targeting for performance especially on mobile devices by reducing
the footprint with modularization
The innovation project of UI5 to solve today’s problems and
advance the framework, tooling and controls
Move closer towards standards and trends to benefit from
innovations, tools and man-power of Open Source
Ensure compatibility to safe the investment of existing UI5 apps and
provide evolution guidelines and tools
Compatibility

25. Modular
Core
Build and Development
Tools
Rendering&
Controls
Programming
Models
“Establish a future-proof foundation for code organization and dependency
management, enabling applications to run with just the minimum amount of
resources!”
“Create an
open-source
Node.js based
build and
development
environment to
support both
application
developers and
framework
developers!”
“Define a modern control framework which simplifies the creation of
agnostic, declarative, universal and theme-able controls which can be used
with a minimalistic footprint!”
“Continue support for existing UI5 programming model, but move closer to
de-facto standards and support trends to enable reuse of UI5 layers for other
programming models!”

26. Open Source

27. Major Open Source Projects of UI5
OpenUI5
The UI Framework incl. libraries and themes
https://openui5.org/ or https://openui5.hana.ondemand.com/
UI5 tooling
The Build and Development Tooling
https://sap.github.io/ui5-tooling/
ui5-cli
ui5-builder
ui5-server
fs project logger
https://github.com/SAP/ui5-tooling
https://github.com/SAP/openui5

28. OpenUI5? SAPUI5? What is it?
OpenUI5 is the Open Source foundation of UI5 providing
the UI framework, major UI libraries and themes available
via CDN.
SAPUI5 is the SAP distribution of UI5 being shipped on all
major SAP platforms. It extends OpenUI5 it with additional
UI libraries.

29. Some SAPUI5 libraries
Gantt Charts Process Flow Micro Charts

30. What’s the difference? Not much…
• Libraries: ~20
• License: Apache 2.0
• Support: GitHub issues
• Libraries: ~50
• License: SAP License
• Support: SAP Support Tickets

31. OpenUI5 ⊆ SAPUI5
What is OpenUI5/SAPUI5?

32. Contributions are very welcome
Contribute bug fixes or new features by creating
Pull Requests
Help us by reporting issues on GitHub
Join the RFC process for UI5 tooling features
and help us to shape it
More details in our contribution guidelines for
OpenUI5 and UI5 tooling

33. UI5Lab: create and share UI libraries
Central place to share UI5 Control Libraries
with others
Initiated by SAP, jointly managed together with
the UI5 community
Consumption via the new UI5 tooling is work in
progress
Visit: https://ui5lab.io/

34. Active Open Source Community
Visit UI5con: learn.explore.connect.
Follow @OpenUI5 on Twitter
Listen to our UI5 NewsCast (a podcast around
UI5 in German)
Join the slack. community

35. Active Open Source
Community
Comprehensive
UI Framework
Framework Evolution
UI5con
Slack
UI5Lab
StackOverflow
Twitter
Modularization
Performance
Compatibility
Standards & Trends
Openness
Is Open Source,
Uses Open Source
~10 years of
experience
Enterprise-grade
Extensible Responsive
SAP UI technology
for Fiori apps
600+ controls
“OpenUI5 is the
heart of SAPUI5!”
“UI5 Evolution ensures
competitiveness and
guaranteed future!”
Apache 2.0 license
Includes several
Open Source libs
GitHub
npm
Bower

36. Thank You
Contact Information:
Peter Muessig
SAP SE, Lead Architect UI5
peter.muessig@sap.com
@pmuessig