Motivation

In 2018, SAP released one guideline and one note to enable SAPUI5 content from a CDN location. The benefits are multiple, but the most important one is to improve performance for customers with global SAP user access for their Fiori/UI5 applications.

SAP recommends using CDN to access Fiori apps in SAP note 2526542 – How to load SAPUI5 files from CDN for performance improvements in Fiori and Standalone UI5 apps.

This guideline is still relevant and must be used. What SAP mainly describes is a common problem where during the bootstrap, we can determine high network latency for the loading of the SAPU15 libraries for locations that are very far from our SAP Fiori Front-End system and how to use SAP’s CDN to load them from a closer location, but to use SAP’s CDN the customer needs to use SAP Cloud Platform, in this blog we will use AWS cloud.

Jorge Baltazar’s brilliant SAP Fiori for SAP S/4HANA – Performance: What is CDN? steps need to be followed. Although SAP recommends that we use the Customizing option in our backend system for loading SAPUI5 resources from our CDN of choice, we can also use the guidelines proposed by Jorge to do it by enabling loading SAPUI5 resources from a content delivery network (CDN) (/UI2/CONFIG/UI5/CDN) via Target Mapping. To make it simple, Target Mappings allow us to configure the launchpad without modifying any files delivered by SAP, but SAP recommends changing it in the source via customizing.

In this blog, instead of using the examples from the blogs that use SAP’s CDN served from AKAMAI (https://sapui5.hana.ondemand.com/versionoverview.html) we will use Amazon CloudFront as a custom CDN, benefits are multiple, but the main reason is we will use AWS to store our different SAPUI5 developments (not just Fiori). So, we will use customizing in SAP to achieve it.

SAPUI5

UI5 is nothing but a development tool kit for HTML 5. It contains a lot of predefined JavaScript libraries to design a user interface. UI5 is mainly developed for SAP mobility which means Fiori.

Fiori focuses mainly on mobility. Fiori uses SAPUI5 for Front-End and OData to get Back end data. UI5 uses web technologies like HTML, CSS, and JavaScript.

I will quickly introduce SAP Front-End and Back-End and Fiori.

The SAP Back-End contains Business Logic. The financial, logistics, or manufacturing data, or the users.

The SAP Front-End is a server architecture introduced by SAP in the last years, transforming SAP from 2-tier to 3-tier. Many customers have a separate server for SAP Front End, while others hold the Front-end in the same SAP system as the Back-End (and lately, SAP recommends this architecture). The Front-End combines a Gateway server (containing SAPUI5 control libraries) and App specific Fiori UX add-Ons that have the Fiori Launchpad. The SAP Front-End SAP Gateway facilitates the easy provisioning and consumption of business logic and content of SAP Back-End (Business Suite) systems for mobile and Web applications. It reduces the complexity and skill set required to access SAP data, thereby removing deployment barriers. The use of simple interfaces helps to shorten development times.

SAP Gateway uses OData protocol. OData is based on industry standards and offers database-like access to business data using REST-based architecture. For its consumption outside of SAP, no knowledge of SAP structures is required, and it supports object navigation. Dynamic binding takes place at runtime. OData can be easily consumed by various platforms and offers flexibility (filtering, query options). OData for SAP comprises OData plus SAP annotations. Without knowing SAPUI5 knowledge, Fiori customization is complex. Fiori contains all the business processes in the form of Role-based. Currently, more than 2000 roles are created based on the business process.

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, applications, and APIs to customers globally with low latency and high transfer speeds. CloudFront is integrated with AWS – both physical locations are directly connected to the AWS global infrastructure using regions and edge locations. We will use Amazon S3 as a custom CDN, while SAP Fiori Frontend Server (FES) is the source system for such CDN.

Optionally we can use Route 53 to create an A record from a Public address to the CloudFront address, but that could extend the blog, so that part will not be covered.

Amazon CloudFront caches HTML, CSS or JavaScript files around data centers worldwide, known as Edge Locations. Almost any end-user in the world is close to an AWS Edge Location, and we will use them to deliver the SAP Front-End content.

The result is users will have access to the content from an Edge Location much closer to them, rather than going all the way from the user location to the exposed SAP Web Dispatcher and Gateway on the SAP Front-End.

The content will be in the CDN for a period called TTL, Time to Leave, where CloudFront will check if the S3 bucket has updated the content for the Fiori Apps or any SAPUI5 deployment stored. This will be described later.

STEP 1. Download SAPUI5 runtime for Fiori App

In this blog, we will Bootstrap SAPUI5 Runtime for Fiori in the CDN, but this could be any SAPUI5 application developed by us.

For this test, I have downloaded the SAPUI5 Runtime for Fiori version 1.71 which will be fully compatible with my FES 6.0 version with my backend SAP ECC 6.0 EHP8. If you don’t understand a word, don’t worry, the SAP world it’s complicated.

Also, I have been using Eclipse, and SAP recently decided to retire the SAPUI5 Tools for Eclipse. They will no longer be updated after UI5 release 1.71 and won’t support Eclipse versions higher than 2019-12. Don’t panic; there are plenty of alternatives, source here.

STEP 2. Create a bucket in S3

We create a bucket in S3 to Bootstrap the SAPUI5 for Fiori App. An Amazon S3 bucket is a public cloud storage resource available in Amazon Web Services (AWS) Simple Storage Service (S3), an object storage offering. Amazon S3 buckets, similar to file folders, store objects consisting of data and its descriptive metadata.

In our case, we are in San Francisco, and our SAP System is in Central Europe. The Bucket will be created in the US west. Still, this is not important in reality because, as we will describe later, the content will be accessible using CloudFront, not S3, so the content will be replicated to all the AWS regions.

AWS S3 bucket now contains the SAPUI5 Runtime for Fiori App version 1.71. An exact copy of the same as we have on the ABAP application layer improves the user’s access and performance.

STEP 3. Creating SAP CloudFront CDN

CloudFront will act as a Web Distribution for our S3 content that hosts the SAPUI5 cached content.

First, we will create a Distribution; we will create a CloudFront distribution to tell CloudFront where we want the content to be delivered from and the details about how to track and manage content delivery.

In our case, we use an origin access identity to require that our users access our content using CloudFront URLs, not Amazon S3 URLs. Taking these steps helps us maintain secure access to the files that we serve through CloudFront.

The SAPUI5 Runtime for Fiori files distribution is around 500 MB, so deployment and CloudFront distribution takes some dozens of minutes to initially be deployed and shared to the edge locations around the globe, meaning that we will require some patience on this, but the results in the performance improvement pay for it. After the initial load, changes in the application will only synchronize the delta, making it flawless.

Managing How Long Content Stays in an Edge Cache (Expiration)

We can control how long our files stay in a CloudFront cache before CloudFront forwards another request to our origin. Reducing the duration allows us to serve dynamic content. Increasing the duration means our users perform better because our files are more likely to be served directly from the edge cache. A longer duration also reduces the load on our origin.

Typically, CloudFront serves a file from an edge location until the cache duration that we specified passes—that is, until the file expires. After it expires, the next time the edge location gets a user request for the file, CloudFront forwards the request to the origin server to verify that the cache contains the latest version of the file. The response from the origin depends on whether the file has changed:

The origin returns a 304 status code (Not Modified) if the CloudFront cache already has the latest version.

If the CloudFront cache does not have the latest version, the origin returns a 200 status code (OK) and the newest version of the file.

By default, each file automatically expires after 24 hours. Still, we can change the default behavior by extending the Minimum TTL, Maximum TTL, or Default TTL for path patterns that need more time in the cache before CloudFront queries the origin.

I will make it easy and will not use Cache Based on Selected Request Headers, to improve caching. Instead, I will Select Use Origin Cache Headers, to control how long objects stay in the CloudFront cache. I will customize to specify a minimum time that objects remain in the CloudFront cache regardless of Cache-Control headers.

A value of 604800 is 7 times the default value (24 hours)

The cache can be affected by the setup in the SAP environment; you need to read carefully SAP note 2626394 – Troubleshooting Fiori Apps Cache issue – how-to information; it describes all the settings we need to follow to control the caching from the application layer.

STEP 4. Bootstrapping from Custom CDN

SAPUI5 applications residing on platforms other than SAP Front-End or SAP Cloud Platform can leverage a custom CDN to retrieve the SAPUI5 distribution layer artifacts. The SAPUI5 distribution layer artifacts must be deployed on an SAP web server.

SAPUI5 applications are mainly developed using SAP WEB IDE or Eclipse; Eclipse can easily be integrated with AWS, and other tools are more integrated with Git. I won’t extend this blog to get to that, but our purpose is to use custom CND with the SAPUI5 ABAP repository.

To use Amazon CloudFront CDN with the SAPUI5 ABAP repository, we need to configure this CDN as an external location in the customizing.

Configure SAPUI5 Bootstrapping                                               

In this Customizing activity, we can configure to access our SAPUI5 libraries from a content delivery network (CDN) instead of a local MIME repository (default option) to improve the app performance following SAP recommendations for global access.

Choose to Create New and enter the following information:

• Purpose: Enter DEFAULT. When the bootstrap is executed, it looks for the DEFAULT purpose and uses the URL for loading resources we have entered in the URL Pattern field. We can add additional purposes, for example, TESTING, by using the Business Add-In (BAdI) SAPUI5 Bootstrap: External Location (/UI5/EXTERNAL_LOCATION) to implement our own logic via hooks.
• URL Pattern: Enter the URL of our Amazon CloudFront CDN created in the steps above.

As a result, the system loads the SAPUI5 resources from the respective URL instead of the local MIME repository. That means if there is a DEFAULT entry in the table, CDN consumption is activated. To load the SAPUI5 resources locally again, choose Delete Selected to delete the CDN location from the table.

This makes the bootstrapping from Amazon CloudFront CDN, using our specific Version

we see in the example of the bootstrap for our application SAP Fiori.

<script id=”sap-ui-bootstrap”

type=”text/javascript”

src=”https://d2ub4gtk5bubjm.cloudFront.net/sapui5-rt-1.71.13/resources/sap-ui-core.js”

data-sap-ui-theme=”sap_belize”

data-sap-ui-libs=”sap.m”

data-sap-ui-preload =”asynch” >

</script>

Even that was not necessary because the customizing change immediately modified the origin for our Fiori launchpad to use CDN; as an example, we modified the ui-preload to asynch to follow SAP recommendations to boost performance. The most important setting is data-sap-ui-async=”true“. It enables the runtime to load all the modules and preload files for declared libraries asynchronously if an asynchronous API is used. Setting async=true leverages the browser’s capabilities to execute multiple requests in parallel, without blocking the UI.

Configuration of the bootstrap can only be done for standalone applications and when the bootstrap is under the developer’s control. The bootstrap of applications from a Fiori Launchpad is managed by the Launchpad.

The bootstrap attribute data-sap-ui-async=”true” affects both modules and preload files. If it is not possible to load the modules asynchronously (e.g. for compatibility reasons), use data-sap-ui-preload=”async” to configure at least the preloads for asynchronous loadings, like in our case for Fiori Launchpad.

External resources and essential content

Refer to these essential blogs to know the best practices around SAPUI5 development performance recommendations.

SAPUI5 Application Startup Performance – Best Practices

SAPUI5 Application Startup Performance – Advanced Topics

These recommendations include a few details about the usage of CDN as a UI5 repository.