Slides for the ROOT workshop 2018 in Sarajevo (https://cern.ch/root2018) to give an overview: What is UI5? The UI5 Evolution project, and UI5 & OpenSource.
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
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
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
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
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!”
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.
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
