Optimizing an SAP Fiori Application Based on a Real World Example

Optimizing an SAP Fiori Application Based on

a Real World ExampleSession ID: DX301

Manuel Blechschmidt, FarmFacts GmbH, SAP Community Network

25. - 29.9.2017 SAP TechEd Las Vegas

23.07.17FarmFacts GmbH, Abteilung, Verfasser Seite 2

Please build the best digital

farming platform on earth

Challenge accepted!

Architecture

23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 4

OpenUI5 Client & Openlayers


Development cycle

In the first year we did this weekly


Develop

Release

Analyze

Feedback

After one and a half year

Your application is

awesome

but it is so slow


We started performance optimization

1. Define performance goals from the customer perspective

2. Measure performance goals in different set ups

3. Tweak as long as the performance goals are not met

Rule of thumb doubling performance means 10% - 30% more effort. Sometimes you

have to be 8 times faster which means 3*10% - 30% ~ 60% more development effort


Performance definitions


Standard techniques for performance improvement UI5


– Use Chrome

– Reduce amount of HTTP requests

▪ Bundle controllers, controls and view as Component-preload.js

▪ Use batch for ODataModel

▪ Use client mode for ODataModel binding

▪ Use OpenUI5 from a CDN and hope it is already cached

– Reduce size of HTTP requests

▪ Compress HTTP requests

▪ Use HTTP2

– Parallize HTTP requests

▪ Use sap.ui.define (AMD) syntax

Advanced techniques


– Optimize rendering by disabling invalidation and updating DOM

– Using virtual lists by just rendering the elements shown in the viewpost

– Using canvas for rendering objects (openlayers)

– Use webpack to only bundle the JavaScript that is needed

– Use new Chrome Developer Tools to find the code that is really executed (coverage)

– Use new support assistent to analyze runtime behavior

– Send samples of live application to monitoring database

Standard Techniques Case Study


Connection Regular 3G Regular

3G

Regular

3G

Regular 3G Regular 3G Regular

3G

No

throtteling

Debug

Sources

X O O O O O O

No Cache X X O O O O O

No async X X X O O O O

No Compoent-

preload.js

X X X X O O O

No Server

Compression

X X X X X O O

Load Time (s) 87,5 40,5 1,8 1,5 1,1 0,7 0,64

0,1

1

10

100

0 1 2 3 4 5 6 7 8

Load Time (s)



























Advanced techniques, Disable invalidation


Advanced techniques, only render visible area


Advanced techniques, OpenUI5 support assistant


Advanced techniques, OpenUI5 support assistant


Questions?


Source, image credits.

Sources

https://openui5nightly.hana.ondemand.com/

https://developer.chrome.com/devtools

Slide 2

men in black by radacina https://openclipart.org/detail/20605/men-in-black

Slide 9

blueprint github project https://github.com/ManuelB/blueprint


https://openclipart.org/detail/20605/men-in-black

https://github.com/ManuelB/blueprint

Feedback

Please complete a session evaluation for this

session DX301!

Technology

Optimizing an SAP Fiori Application Based on a Real World Example