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

/wp-content/uploads/2014/08/grunt1_515638.jpg

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

XML_VALIDATOR


Command: grunt xml_validator:scn

/wp-content/uploads/2014/08/grunt2_515836.jpg

Again: nothing wrong with the files.

HTMLHINT

Command: grunt htmlhint:scn

/wp-content/uploads/2014/08/grunt3_515837.jpg

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

/wp-content/uploads/2014/08/grunt4_515838.jpg

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

/wp-content/uploads/2014/08/grunt5_515839.jpg

Images

Command: grunt imagemin:scn

Result: Saved 10.31 KB in space

/wp-content/uploads/2014/08/grunt6_515840.jpg

Result

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

/wp-content/uploads/2014/08/grunt7_515841.jpg

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.

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. Matt Harding

    Nice work Tobias, and good to see minimification included in a UI5 discussion…An important topic in itself for publishing production ready apps.

    (0) 
  2. John Patterson

    hi Tobias, hope you followup this blog with other blogs on using Grunt for build and continuous integration etc.

    A great place to start for ui5 developers wanting to learn grunt is saschakiefer/generator-openui5 · GitHub .

    For those interested  there is a grunt-ui5 plugin which has a very useful component-preload.js feature similar to that which you find in Fiori apps, this file gets loaded on app bootstrap, all of the needed app modules and resources js, json, xml, html etc you want to pre-load gets minified and concatenated into a single file, optimizing app load by minimizing the amount of render blocking round trips.

    The whole area of app optimization seems to be a topic which doesn’t get much attention on SCN. I think your comment about GZIP is very important and often overlooked, minifying resources gives very small pay offs when compared to GZIP.

    I like to use tools like Googles PageSpeed Insights (can setup inside browser as well as running onliine), which analyzes your application and makes recommendations on how you can increase you apps performance, like using cache headers, minifying and using GZIP, it also gives the indicative savings – for example using GZIP on a concatenated and minified preload library or component file will yield saving of around 80%, big win for small effort.

    Example of PageSpeed Insights on a github page site running the full openui5 library, luckily the site has compression enabled, without any improvements I see developers apps getting a score around 20/100, it is possible to follow the recommendations and get scores in the 90+/100 with SAPUI5, takes work.

    These are the types of things i intend to cover in my SAP Dcode talk.

    Cheers

    John P

    (0) 
    1. Tobias Hofmann Post author

      minifying resources gives very small pay offs when compared to GZIP.

      Not sure what you mean. In a current project the zipped non-minified version (excluding images) is 90KB, the zipped minimized version is 38KB.

      Why? My grunt build for the release version excludes comments, debug code and console.log. Including images the non-minimized zipped version is 459KB and everything minizmized and zipped is only 323KB.

      Of course minimizing and zipping is only one part, the right configuration of the web server is another story. The HCP trial server’s configuration gzip’s files, but not all. Looks a file size limit is in place. Which reminds me of NW configuration

      AJAX, JSON and GZIP responses from SAP Portal

      CI? There is not much that isn’t going through my CI setup

      Continuous integration

      Getting started with Continuous Integration

      Can you use NW Cloud to run … Jenkins?

      (0) 
      1. John Patterson

        Should have been more precise, by resources i meant js, json, xml and html. Most image formats and Pdf’s are already compressed, GZIP may actually add weight.

        Some good stuff their on CI, did much change in the setup for JavaScript?

        (0) 
  3. Trond Stroemme

    Why would I want to use an external tool – which even seems to be running in a DOS window reminiscent of the 80’s – to do a job that should ideally be provided by the UI5 development itself?

    I believe RDE will address these issues, and let us check/optimize the code within the development environment itself.

    After all, we don’t rely on a command-line based tool to do syntax checking for ABAP??

    I’m sure grunt and its various plugins have their uses, but I don’t see this as a very effective and intuitive way of checking our development objects.

    As developers within an industry-leader platform, we should be provided with proper IDE’s that do this in an integrated and intuitive way. After all, we’re not a bunch of open-source hackers, stooped over our keyboards between school assignments and bedtime, right?

    🙂

    (0) 
    1. Tobias Hofmann Post author

      Right, SE80 is the way to go, specially HTML5 apps have to be done 100% in ABAP. Continuous integration will never be accepted, it’s just totally hyped.

      (0) 
        1. Tobias Hofmann Post author

          🙂

          Grunt delivers more than syntax checking. It gives you a set of plugins to execute certain tasks when an event is triggered. Therefore, it should be part of a CI process. Locally, grunt takes care that my UI5 code is also copied to my hybrid and web app, as well as unit tests are executed. After all, why commit code that does not meet your quality guidelines?

          In case the shell bothers you: integrate grunt with Eclipse.

          UI5 is not only for SAP projects.

          (0) 
    2. Nigel James

      Why would you use an external tool? Because in the real web world that is how it is done. In the real web development world developers do testing, compression, continuous integration, testing, distributed source control and did I mention testing already?

      Don’t be scared of the command line – if cmd.exe scares you upgrade to Ubuntu and use a real command line 😉

      (0) 
      1. Daniel Ruiz

        hi Nigel,

        Windows devs. can always use something like cygwin.. I find it pretty decent. Also, it’s kinda hard to explain your statement “this is how it’s done in the real world” – it sort of implies another question like “why SAP doesn’t deliver A or B then?” – I totally agree with the statement btw.

        🙂

        Cheers,

        Dan.

        (0) 
        1. Nigel James

          Hi Dan, I use windows all the time – most of my clients systems don’t have the freedom to set the OS like I can. When on windows I usually use GitBash which gives a cygwin / unixy / bash environment it also comes with GitWin and GitCmd so lots of options.

          I am not saying you have to use one tool or the other. Use whatever makes you the most productive.

          As to the real world comment ? I have work in pure webdev / startup environments where you have to hustle to make the project work and are not waiting for mr vendor to make all nice and gui. I think sap have done a great job with UI5 and the fact that they are using open tools like grunt is brilliant. At last they are not reinventing the wheel.

          N

          (0) 
  4. Gregor Brett

    Great blog! I’ve used linting plugins when using Sublime as an editor and they are a great help.

    I’m guessing this wouldn’t fit when using Eclipse though? The integration to the transport layer in Eclipse is still a big benefit for me.

    Looking at the source of a recent Fiori app they seem to deploy a minified version of each file along with the pretty printed source with a “-dbg” extension. I suppose this must be automated in a similar fashion. I need to watch more videos on here! -> Let’s Code: Test-Driven JavaScript

    (0) 

Leave a Reply