Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing an SAP Fiori Application Based on a Real World Example

725 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Optimizing an SAP Fiori Application Based on a Real World Example

  1. 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. 2. 23.07.17FarmFacts GmbH, Abteilung, Verfasser Seite 2 Please build the best digital farming platform on earth
  3. 3. Challenge accepted!
  4. 4. Architecture 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 4
  5. 5. OpenUI5 Client & Openlayers 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 5
  6. 6. Development cycle In the first year we did this weekly 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 6 Develop Release Analyze Feedback
  7. 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. 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. 9. Performance definitions 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 9
  10. 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. 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. 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. 13. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 13
  14. 14. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 14
  15. 15. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 15
  16. 16. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 16
  17. 17. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 17
  18. 18. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 18
  19. 19. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 19
  20. 20. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 20
  21. 21. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 21
  22. 22. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 22
  23. 23. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 23
  24. 24. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 24
  25. 25. Standard Techniques Case Study 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 25
  26. 26. Advanced techniques, Disable invalidation 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 26
  27. 27. Advanced techniques, only render visible area 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 27
  28. 28. Advanced techniques, OpenUI5 support assistant 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 28
  29. 29. Advanced techniques, OpenUI5 support assistant 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 29
  30. 30. Questions? 23.07.17FarmFacts GmbH, Manuel Blechschmidt Seite 30
  31. 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. 32. Feedback Please complete a session evaluation for this session DX301!

×