What can grunt do for your UI5 project?

[hofmann]

In case you want to know if grunt can add value to SAPUI5/OpenUI5 projects, this blog may be of interest to you. To understand what grunt can do for your UI5 project, let`s take the POS app from the open UI5 demokit as an example. This app is located in the folder demokit/pos and uses XML views. This is more or less how you would normally develop your own open UI5 app.

When coding a UI5 app, you want to ensure that the code is valid and: without syntax errors and standard compliant. One way to achieve this is to load the page in a browser and see if the page works, although this is not productive. Tools like jshint check the syntax of a JS file. Speeding up the process of syntax checking a lot. As grunt is a task runner it is possible to run a set of configured tasks against your project. This way, the verification process is further automated.

After setting up grunt it`s time to install the plugins. For now, checking the code for errors is more than enough. The plugins for doing so for the POS demo app used by me are:

• jshint: checks Javascript files. These are the controllers and helper files.
• htmlhint: checks the HTML file. Normally this is the index.html which loads the UI5 library.
• xml-validator: UI5 app can use of XML files to define the views. In such case you only will see any XML syntax errors when the view is loaded by UI5.

Lets see how the sample app performs against the grunt plugins. [The configuration of the tasks can be found in the GitHub repository. (will post the link here later)]

JSHINT

Command: grunt jshint:scn

Perfect! Jshint did not find any errors in the sample application.

XML_VALIDATOR

Command: grunt xml_validator:scn

Again: nothing wrong with the files.

HTMLHINT

Command: grunt htmlhint:scn

2 Errors were found! These are related to how tags should be written. Let`s fix these.

• 1st Error. Solution: close tag: <meta charset="UTF-8" />
• 2nd error. Solution: close tag: <link rel="stylesheet" type="text/css" href="css/style.css"/>

Optimize size

Grunt already helped to create a better HTML5 app. The code is now error free, but not optimized in size. Fortunately, there are grunt plugins for that task:

• uglify
• xmlmin
• imagemin
• htmlmin

Note: When creating minimized files it is a good idea to rename them (adding min) or create them in a new folder like target, build, etc.

Javascript

Result: This decreased the Javascript files size from 23.4KB to 13.6KB.

XML

Command: grunt xmlmin:scn

Result: XML files are minimized to 8.84KB, compared to 9.74KB

HTML

Command: grunt htmlmin:scn

Result: From 1.04KB to 1.02KB

Images

Command: grunt imagemin:scn

Result: Saved 10.31 KB in space

Result

After running these grunt plugins in order, the UI5 app contains no syntax errors and is minimized. But does it still work?

Looks good!

Including the model, css and i18n files the project size is now 141 KB, compared to 166 KB. This is a saving of 25KB. Of course, this is not much, but the POS sample app is also nothing really big. The 25 KB saving scales: if you have 10.000 users that access all the resources at least once, it is a saving of 244 MB. Of course if GZIP is configured on the server, the file size shrinks further. But here we also face another problem: normally a web server is not compressing all files, only some (HTML) or only when they are larger than a specific size (NW). In case your web server is only compressing HTML files, the above demonstrated grunt plugins will help you in creating HTML5 apps consuming less space.

To not have to execute the steps manually, I recommend using the watch plugin to execute the tasks automatically.

Verdict

Using grunt to optimize a UI5 app makes sense. Not only will it help you to produce cleaner, more standardized and smaller code, but to establish a development process.