UI5con 2019 - Keynote: Welcome, ROOT, Fiori 3 Concept, Renovated UI Stack, UI5 Evolution, UI5 Tooling Ecosystem, Challenges of a Modern Web Stack, UI5 Web Components, UI5 Evolution for Rendering & Controls Links: https://blogs.sap.com/2018/04/26/ui5ers-buzz-29-asynchronify-your-app/ https://blogs.sap.com/2018/11/19/ui5ers-buzz-38-modularization-of-the-sapui5-core/ https://blogs.sap.com/2018/12/17/ui5ers-buzz-40-ui5-evolution-the-modular-core/ https://blogs.sap.com/2018/12/18/ui5ers-buzz-41-best-practices-for-async-loading-in-ui5/ https://blogs.sap.com/2018/12/27/ui5ers-buzz-41-ui5-evolution-the-build-and-development-tooling/ Docu: https://openui5.hana.ondemand.com/#/topic/91f23a736f4d1014b6dd926db0e91070 (Modules and Dependencies) https://openui5.hana.ondemand.com/#/topic/a075ed88ef324261bca41813a6ac4a1c (jQuery.sap Replacement) https://openui5.hana.ondemand.com/#/topic/491bd9c70b9f4c4d913c8c7b4a970833 (Async Factories Functions) https://openui5.hana.ondemand.com/#/topic/676b636446c94eada183b1218a824717 (Use Async Loading) https://openui5.hana.ondemand.com/#/topic/493a15aa978d4fe9a67ea9407166eb01.html (Is your app ready for async?)

1. Frederic Berg (SAP SE)
June 28, 2019
Welcome

2. 2
Sean Campbell
Diego Dora Roel van den Berge
Christian BraukmüllerHP Seitz

3. 3

4. Stefan Beck (SAP SE)
Peter Muessig (SAP SE)
June 28, 2019
Keynote
2019

5. 5

6. 6
UI5 is on a mission to assist
the inventors of the WWW…
BACK TO THE ROOTS

7. 7
ROOT – Data Analysis Framework
Modular Scientific Framework
 Developed by CERN and research community
 Big Data Processing
 Statistical Analysis
 Visualization and Storage
Why UI5?
 Open Source and Apache License, Version 2
 Long Term Support
Where can UI5 help?
 Shift from X11 desktop apps to web apps
 Effective handling of mass data
 Model-View-Controller and Control Set

8. 8
The evolution of SAP Fiori to a
consistent and intuitive UI…
FIORI 3 CONCEPT

9. 9
SAP Fiori 3 is our new target design, which evolves the SAP Fiori design language for all SAP
products to fully support the Intelligent Suite.
SAP Fiori 3
This is the current state of planning and may be changed by SAP at any time without notice.
Flexible, simple, and convenient, with
machine intelligence guiding users
to make their work easier

10. 10
The Evolution of SAP Fiori
Casual User
Self Services
Power User
SAP Fiori
2013
SAP
Fiori 2.0
2016
SAP
Fiori 3
This is the current state of planning and may be changed by SAP at any time without notice.
Conversational
with SAP CoPilot Consistent
Intelligent
Intuitive
now

11. 11
Improve architecture, runtime behavior
and dev efficiency for Fiori apps…
Renovated
Fiori UI Stack

12. 12
Renovated Fiori UI Stack
Stateful Fiori Apps based on Fiori Elements
 Enhance Fiori for stateful Power User Apps
OData V4
 Cross-Service Navigation
 JSON Payload format
 Specific HTTP choreographies
 Many small round-offs and improvements
Meta Data Driven Controls
 On control level and protocol agnostic
 Reusable building blocks
Faster and consistent
 Consistent concepts
 Optimal caching strategy

13. 13
Continuous innovation of framework,
tools and the programming model…
UI5 EVOLUTION

14. 14
Declare your
dependencies!Master async and be
progressive!
Orchestrate your code
execution!Stop using deprecated
APIs!
We need you!2018

15. 15
G/L Line Items Reference App "evolutionized"!
Samsung Galaxy S7

16. 16
G/L Line Items Reference App "evolutionized"!
Samsung Galaxy S7

17. 18
Performance Gain
~60% ~40-50% ~30%
First Paint Initial Load Download Size

18. 19
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019

19. 20
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019

20. 21
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019

21. 22
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019

22. 23
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019

23. 24
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019

24. 25
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019
UI5
1.60

25. 26
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019
UI5
1.60

26. 27
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019
UI5
1.60

27. 28
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019
UI5
1.60
UI5
1.61

28. 29
UI5 Evolution Concepts – Modular Core
UI5con
2017
UI5con
2018
UI5con
2019
UI5
1.60
UI5
1.61

29. 30
UI5 Tooling
Tooling
Open-Source CLI Tooling :
 Build and development tools for UI5
applications, reuse components and libraries
Easy Integration:
 Via CLI into arbitrary Editors and Build Tools
 Standard build for UI5 projects in SAP Web IDE
New Kids on the Block:
 New 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 express middleware
Migration
Karma

30. 31
To accelerate innovation, we
all need to work together…
A NEW ECOSYSTEM
IS GROWING…

31. 32
UI5

32. 33
UI5 and TypeScript
Project:
 https://github.com/SAP/ui5-typescript/
Description:
 Enables TypeScript support for UI5 framework
and control libraries (e.g. for type checks)
 Better IDE integration for UI5 projects (enables
content assist)
 Generates the TypeScript definitions based on
the JSDoc of UI5
Kudos to:
 Shahar Soel (SAP Web IDE)
+

33. 34
UI5

34. 35
Replace proprietary framework
features with web standards
CHALLENGES OF A
MODERN WEB STACK

35. 36
20192014
Web Stack Evolution: "More Web Standards, Less Frameworks!"
ECMAScript 5
Browser Events
HTML Elements
Rendering
Data Services
Internationalization
Theming (via Less)
UI5 Components
UI5 Controls
(UI Elements)
Modules
Web Components
CSS Variables
Custom Elements
Modules
ECMAScript 7
Browser Events
HTML Elements
Rendering
Data Services
Internationalization
Custom UI Elements
Web Standards
Framework

36. 37
UI5

37. 38
"The enterprise-flavored sugar
on top of native APIs!"
UI5 WEB COMPONENTS

38. 39
Easy consumption of UI5 controls reimplemented as Web
Components for UI framework agnostic usage
Share fundamental UI5 qualities with others to provide enterprise-
grade features, Fiori UX and themeability
Designed for small footprint since Web Components are based on
native APIs rather than UI5 control framework
Targeting for Web Developers who need the flexibility to use
custom HTML tags instead of UI5 controls
What are UI5 Web Components?
Consistency

39. 40
Easy consumption of UI5 controls reimplemented as Web
Components for UI framework agnostic usage
Share fundamental UI5 qualities with others to provide enterprise-
grade features, Fiori UX and themeability
Designed for small footprint since Web Components are based on
native APIs rather than UI5 control framework
Targeting for Web Developers who need the flexibility to use
custom HTML tags instead of UI5 controls
What are UI5 Web Components?
Web Standards

40. 41
Easy consumption of UI5 controls reimplemented as Web
Components for UI framework agnostic usage
Share fundamental UI5 qualities with others to provide enterprise-
grade features, Fiori UX and themeability
Designed for small footprint since Web Components are based on
native APIs rather than UI5 control framework
Targeting for Web Developers who need the flexibility to use
custom HTML tags instead of UI5 controls
What are UI5 Web Components?
Lightweight

41. 42
Easy consumption of UI5 controls reimplemented as Web
Components for UI framework agnostic usage
Share fundamental UI5 qualities with others to provide enterprise-
grade features, Fiori UX and themeability
Designed for small footprint since Web Components are based on
native APIs rather than UI5 control framework
Targeting for Web Developers who need the flexibility to use
custom HTML tags instead of UI5 controls
What are UI5 Web Components?
Web Developers

42. 43
Get Started – Visit our Playground
The GitHub project hosts the Playground
application as GitHub page:
 Discover and get started with the new UI5
Web Components
 Explore the code in the GitHub repository,
the examples in the Playground and the
integration possibilities in other
frameworks in the demo applications
 Read more about the features of each
Web Component in their documentation
 Connect with our community (e.g. Slack:
#webcomponents), help us to improve
them or report issues

43. 44
Fiori 3 Reference App
Show case for Fiori 3 related controls with
UI5 Web Components:
 UI5 Web Components are used as UI
elements
 React is used as programming model to
implement the application flow
 BUT: React using and Web Components
together is a bit cumbersome as of today
 Attaching to Custom Events
 Handling of Boolean Properties
 Auto Completion (via TypeScript)

44. 45
UI5 Web Components for React
The GitHub project hosts the Playground
application as GitHub page:
 Fiori 3 compliant React library built on top
of the UI5 Web Components
 Allows to use UI5 Web Components as if
they were native React components
 Provides layouts and some more complex
components on top of UI5 Web
Components

45. 46
Release Timelines
UI5con
2018
UI5con
2019
Feb 2019

46. 47
”Increase the performance and the
maintainability of UI5 controls!"
UI5 EVOLUTION FOR
RENDERING & CONTROLS

47. 48
Benefits:
 Increase Performance and Maintainability
 Reduce code of UI5 controls (no custom setters)
 Simplify side-by-side use-cases (other fwrks)
Rendering Syntax:
 Compatible with V1 Renderer Syntax
 Incremental DOM like API for V2 Renderer
 No manual DOM patching needed
Rendering Engine:
 Apply the initial mark-up via innerHTML
 Update the UI elements via DOM patching
 Increase FPS for mass control-updates
DOM-based Rendering
V2
V2 V2
V2
V2 V2
V2 V1
V2
V2 V2
V2
V1 V1
Updated on Next Rendering CycleDirty Node requires Update
Codename: Semantic Rendering
UI5
1.67

48. 49
Benefits:
 Increase Performance and Maintainability
 Reduce code of UI5 controls (no custom setters)
 Simplify side-by-side use-cases (other fwrks)
Rendering Syntax:
 Compatible with V1 Renderer Syntax
 Incremental DOM like API for V2 Renderer
 No manual DOM patching needed
Rendering Engine:
 Apply the initial mark-up via innerHTML
 Update the UI elements via DOM patching
 Increase FPS for mass control-updates
DOM-based Rendering
Codename: Semantic Rendering
+
UI5
1.67

49. 50
UI5 Evolution
UI stack renovation
UI5 Web Components
Fiori 3
FOCUS TOPICS

50. 51
…migrate your
Renderers!
…help us to extend the
ecosystem! …enjoy UI5con!
…apply the UI5 Evolution
Concepts!
Now, it’s your turn to…

51. 52

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