Skip to Content
Technical Articles

How to improve the performance of SAPUI5 Apps such as Fiori using Amazon CloudFront as CDN

Motivation

SAP released in 2018 one guideline and one note to enable SAPUI5 content from a CDN location. Benefits are multiple, but the most important one is to achieve a performance improvement for customers that have 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 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 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 the customizing in SAP to achieve it.

 

SAPUI5

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

Fiori focus mainly on mobility. Fiori uses SAPUI5 for Front-End and it uses 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, others hold the Front-end in the same SAP system as the Back-End (and lately SAP recommends this architecture). The Front-End is a combination of Gateway server (containing SAPUI5 control libraries) and App specific Fiori UX add-Ons that contains 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 the 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 it offers flexibility (filtering, query options). OData for SAP comprises OData plus SAP annotations. Without knowing SAPUI5 knowledge Fiori customization is difficult. 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, high transfer speeds. CloudFront is integrated with AWS – both physical locations that are directly connected to the AWS global infrastructure using regions and edge locations. We will use AWS origin S3 hosting the SAPUI5 libraries in this example, but in a real-world situation, this could be any development done on SAPUI5 that needs to be accessed globally.

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 around the world, known as Edge Locations. Almost any end-user in the world is close to an AWS Edge Location, and we will make use of them to deliver the SAP Front-End content.

The result is users will have access to the content from an Edge Location which is 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 located 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 host 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 that 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, SAP world it’s complicated.

Also be informed that 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 host the SAPUI5 Runtime 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, which are similar to file folders, store objects, which consist of data and its descriptive metadata.

In our case we are located in San Francisco and our SAP System is located in Central Europe. The Bucket will be created in US west but in reality this is not important 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 hosts the SAPUI5 Runtime for Fiori App version 1.71.

STEP 3. Creating SAP CloudFront CDN

As described, CloudFront will act as a Web Distribution for our S3 content that hosts the SAPUI5 Runtime for Fiori files.

First, we will create a Distribution, we create a CloudFront distribution to tell CloudFront where we want 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 by using Amazon S3 URLs. Taking these steps help 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 get better performance 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:

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

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

By default, each file automatically expires after 24 hours, but 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 stay 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 hosted on platforms other than SAP Front-End or SAP Cloud Platform can leverage a custom CDN to retrieve the SAPUI5 distribution layer artifacts. For this, 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, as well as other tools more integrated with Git, I won’t extend this blog getting 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 Bootstraping                                               

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

Choose 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 that 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 now 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

https://d2ub4gtk5bubjm.cloudFront.net/sapui5-rt-1.71.13/index.html

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 control of the developer. 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 important content

Refer to these important 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 usage of CDN as UI5 repository.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.