Fun = Agile + SAPUI5; //Part 2

[tamasszirtes]

This blog is a follow up on my previous blog, where I introduced the project scope, approach, etc. I think this blog makes more sense after reading the previous one.

As mentioned, the most exciting aspect of this project was the responsive design for “all newer browsers” on desktop, tablet and smartphone. This resulted in a css with several thousands of line of code and we even had a review session with a css expert, who suggested tricks like replacing gradient borders with before selector.

Some more design lessons learned

• It is hard to create a site which makes use of the screen property in an optimal way on all screen formats. It required a lot of interaction among designers, users and developers. Testing is a big challenge. We used browserstack which allows for virtual testing on many devices and operating systems. For the most used devices, think of IPhone, iPad, Samsung Galaxy, etc, we used physical devices for testing. Browsertack did a 99% job, but for these top devices we aimed to know with 100% certainty what works and what not.
• The designer came up with a dropdown hover menu for desktop and a separate touch-based menu for phones. Since tablets don’t support hover, we used the touch-based menu for tablets too.
• In order to handle all the different formats, we used a combination of two approaches for the css. We detect the device (e.g. sap.ui.Device.system.desktop) and also the screen width ($(window).width()). We have to know if the user has e.g. a large tablet (big widths, but touch) or a small monitor (small width, but hover), etc. to offer the optimal design.

Some more technical lessons learned

• The Application Cache Buster introduced a significant improvement to the performance. We turned it on for production, but left the development system without it.
• Still, the initial load of the SAPUI5 libraries takes some time. I understand SAP is working on this area. We just adopted a simple technique described by konstantin.anikeev: we added a spinning wheel and load the SAPUI5 libraries as described in the blog. From a user point of view, this was a huge improvement.
• We integrated Google Analytics as described by craig.gutjahr3 in his blog. We raise our own events and I must say the business loves to see the usage in the real time dashboard. It was also very useful for the go-live, because we could monitor how the usage was taking up.
• We created a deployment script. It does some adjustments to the code, which are necessary before transporting to production. One example is to minify the code. We use yuicompressor.

As always, I am curious if you recognize these points or your experience is different.