Make Fiori Run Like Never Before

Fiori UI5 SAP 23 April 2015

One of the major challenges of software development is managing complexity. A common way of reducing some of the complexity of a codebase is to separate the code into different files based on what the code does. In this way, you could have a file that contains your utility functions, a file for each of your classes etc.

The Problem

When applications run locally, on a computer with lightning-fast read speeds from the disk, the performance impact is negligible. However, when web applications need to be loaded into the browser there is a noticeable difference in speed between downloading a single large file and downloading many smaller files.

The Solution

In order to improve loading performance, we need to package the Javascript files in a way that allows us to only send one file to the browser that contains all of the code. SAP packages their UI5 libraries into single files called "preloads". This same method can be used for the application code of UI5 apps. In order to make the packaging step as quick as possible we will use a Javascript task runner.

The Tools

Automated build steps for Javascript projects are quite popular these days and projects like Grunt and Gulp are the leading Javascript task runners.

In this example we are going to be using Gulp and specifically the gulp-ui5-preload plugin.

Prerequisites

Before we can use Gulp, we first have to install Node.js and npm on the system.

Node.js can be downloaded for Windows and OS X from https://www.npmjs.com. npm is bundled with the Node.js installer and there is no need to install it separately.

On Ubuntu, Node.js and npm can be installed by executing the following commands in the terminal:

sudo apt-get install -y nodejs
sudo apt-get install -y npm
sudo ln /usr/bin/nodejs /usr/bin/node

We are now ready to install gulp. Type the following command on the command line (Windows, Mac or Linux):

sudo npm install gulp -g
sudo npm install gulp-ui5-preload -g
sudo npm install gulp-uglify -g
sudo npm install gulp-if -g

The Build Script

Once this is done create a new file named gulpfile.js in the root of your project (the same folder as your Component.js):

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

var ui5preload = require('gulp-ui5-preload');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');

gulp.task(
  'ui5preload',
  function(){
    return gulp.src(
      [
        '**/**.+(js|xml)',
        '!Component-preload.js',
        '!gulpfile.js',
        '!model/metadata.xml'
      ]
    )
    .pipe(gulpif('**/*.js',uglify()))    //only pass .js files to uglify
    .pipe(ui5preload({base:'.',namespace:'YourNamespace'}))
    .pipe(gulp.dest('.'));
  }
)

Replace the YourNamespace text with your project's namespace.

Executing the Build

In the project root directory execute the following command:

gulp ui5preload

You should see an output similar to the following if it was successful:

[13:34:21] Using gulpfile ~/project/code/src/gulpfile.js
[13:34:21] Starting 'ui5preload'...
[13:34:22] gulp-ui5-preload number of files combined to preload file Component-preload.js:  43
[13:34:22] Finished 'ui5preload' after 1.5 s

In your project root folder you should now see a file named Component-preload.js. In order to utilize this preload, you have to initialize your UI5 project with the data-sap-ui-preload="sync" attribute. Here is an example of this:

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.unified"
  data-sap-ui-theme="sap_bluecrystal"
  data-sap-ui-xx-bindingSyntax="complex"
  data-sap-ui-resourceroots='{"YourNamespace": "./"}'
  data-sap-ui-preload="sync">
</script>

To prove that the web browser is using our Component-preload.js file, here is a screenshot of the Chrome debugging tools as the app loads:

Componenet-preload.js

By loading the Javascript assets into the browser using a preload we are greatly reducing the number of individual files that have to be retrieved from the server and reducing the loading time, especially at high latencies.

If you wish to learn more about how custom-built Fiori apps can improve your company's SAP user experience, please contact us.

Next Post Previous Post