Marius Obert presented on consuming web apps from the HTML5 Application Repository on Cloud Foundry. The presentation covered the old approach of hosting web apps on Cloud Foundry using OData and SAP Gateway versus the new approach of leveraging the HTML5 Application Repository. It provided an overview of key Cloud Foundry concepts and the essential CF components for UI development. A live demo was shown and references provided for getting started.

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