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.