In this session, different techniques are explored that were applied to optimize an SAP Fiori app. The following topics are covered: measuring the performance of an app, load optimization of the app until it is fully rendered, optimizing OData models, optimizing rendering time of controls, doing things asynchronous, and memory optimization. We start with a very slow app and demonstrate the different techniques and show how much improvement you will obtain.

1. Optimizing an SAP Fiori Application Based on
a Real World Example
Session ID: DX301
Manuel Blechschmidt, FarmFacts GmbH, SAP Community Network
25. - 29.9.2017 SAP TechEd Las Vegas

2. 23.07.17FarmFacts GmbH, Abteilung, Verfasser Seite 2
Please build the best digital
farming platform on earth

3. Challenge accepted!

4. Architecture
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 4

5. OpenUI5 Client & Openlayers
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 5

6. Development cycle
In the first year we did this weekly
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 6
Develop
Release
Analyze
Feedback

7. After one and a half year
Your application is
awesome
but it is so slow
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 7

8. 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
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 8

9. Performance definitions
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 9

10. Standard techniques for performance improvement UI5
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 10
– 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

11. Advanced techniques
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 11
– 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

12. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 12
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)

13. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 13

14. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 14

15. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 15

16. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 16

17. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 17

18. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 18

19. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 19

20. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 20

21. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 21

22. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 22

23. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 23

24. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 24

25. Standard Techniques Case Study
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 25

26. Advanced techniques, Disable invalidation
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 26

27. Advanced techniques, only render visible area
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 27

28. Advanced techniques, OpenUI5 support assistant
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 28

29. Advanced techniques, OpenUI5 support assistant
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 29

30. Questions?
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 30

31. 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
23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 31

32. Feedback
Please complete a session evaluation for this
session DX301!