Slidedeck of the session at UI5Con Brussels 2020

1. Marius Obert, SAP
February 14, 2020
Consume (UI5) Web Apps
from the HTML5 App Repo

2. 2
@IObert_ |
Developer Advocate
I started my SAP-career 2011 with a bachelor program at the
cooperative state university Karlsruhe. After 3 years there, I
moved to the Silicon Valley where I worked as a UI developer
for SAP Labs Palo Alto. After many won fights against CSS I
decided to relocate to Munich where (there’s better beer) and I
now work as an Developer Advocate for the SAP Cloud
Platform and UI Technologies.
Marius Obert, SAP

3. 3
@IObert_ |
Agenda
Introduction to Cloud Foundry
Old Approach - Web apps on Cloud Foundry
New Approach - Web apps on Cloud Foundry
Live Demo
How to get started

4. 4
@IObert_ |
Hyperscaler-agnostic PaaS

5. 5
@IObert_ |
Cloud Foundry App Model
APPS
(SHOPPING CART)
BACKING SERVICE
(DATABASE)

6. 6
@IObert_ |
Concepts
Service
Broker

7. 7
@IObert_ |
Concepts
Service
Offering

8. 8
@IObert_ |
Concepts
Service Plan

9. 9
@IObert_ |
Concepts
Service
Binding
Service
Instance

10. 10
@IObert_ |
Application runtime Backing services
SAPUI5
Application
Essential CF Components
For UI Development
Application
Router
Destination
service
Connectivity
service
Identity
Authentication
Portal
service

11. 11
@IObert_ |
Web apps on Cloud Foundry
Old Approach
OData
SAP Gateway
Application
Router
Identity
Authentication
Destination
service
Connectivity
service
/ui files
/sap data
<login><login>
/ui files
/sap data

12. 12
@IObert_ |
Application Router
Configuration
Identity
Authentication
Destination
service
Embedded
web app

13. 13
@IObert_ |
Application Router
Configuration
Embedded
web app

14. 14
@IObert_ |
Old Approach
Summary
Fast
Easy setup Horizontal scaling
Re-usage of libs
Linked Lifecycles

15. 15
@IObert_ |
Web apps on Cloud Foundry
New Approach
OData
SAP Gateway
Application
Router
Identity
Authentication
Destination
service
Connectivity
service
/ui files
/sap data
<login>
<login>
/ui files
/sap data
HTML5
Application Repository
Portal
service
/portal

16. 16
@IObert_ |
Application Router
Configuration
Identity
Authentication
Destination
service

17. 17
@IObert_ |
Application Router
Configuration
Identity
Authentication
HTML5
Application Repository

18. 18
@IObert_ |
There are three easy options:
1. CLI command
2. Deployer application
3. Module type
Disclaimer: Add a manifest.json and a xs-app.json file for non SAPUI5 projects.
HTML5 Application Repository
Upload the UI project
cf html5-push –n html5-host-name .

19. 19
@IObert_ |
New Approach
Summary
Portal service
Better Security
Relieves the AR
Re-usage of libs
Build-in cache Slightly more complex
Separate resource

20. 20
@IObert_ |
20
Live demo
Application
Router
HTML5
Application Repository

21. 21
@IObert_ |
References
Blog posts #CloudFoundryFun - HTML5 App Repo Service
#CloudFoundryFun – Integrate a React app in the Fiori Launchpad
HTML5 Plugin Plugin Instructions
App Router Sample on GitHub
React App Sample on GitHub
Getting started Developer Center, Tutorial 1, Tutorial 2

22. Thank you.
Contact information:
Marius Obert
Developer Advocate
@IObert_
people.sap.com/mariusobert
marius.obert@sap.com