Slides from the session at UI5con@SAP 2017. DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time! OVERVIEW: This session will explain the boostrap and component performance optimization options for UI5 Components step-by-step. In addition, it will explain some new feature and provide an outlook for upcoming features. Initial project can be found on GitHub here: https://github.com/petermuessig/ui5con17-components-performance

1. Peter Muessig, SAP SE
June 30, 2017
UI5 Components
More Performance…
DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!

2. 2
Making applications performant is unfortunately still a manual step. Due to compatibility reasons
UI5 cannot change the defaults of applications to ensure a performant bootstrap and runtime.
The session is inspired by the performance guide in the demokit and Frederic Bergs’ blogs. In
addition, it provides some more of the latest noteworthy features around Components.
References
 https://sapui5.hana.ondemand.com/#docs/guide/408b40efed3c416681e1bd8cdd8910d4.html
 https://blogs.sap.com/2016/10/29/sapui5-application-startup-performance-best-practices/
 https://blogs.sap.com/2016/11/19/sapui5-application-startup-performance-advanced-topics/
Overview

3. 3
• Subscribe for a hanatrial account for usage of SAP Web IDE: https://hanatrial.ondemand.com or
use your existing account for SAP Web IDE
• Initial project can be found on GitHub and should be synced into SAP Web IDE workspace:
https://github.com/petermuessig/ui5con17-components-performance
• In addition to the initial project a destination for the Northwind service has to be created. Details
for that are explained in one of the next slides
Prerequisites

4. 4
 Project structure:
– index.html: The HTML page to run the UI5 application
– manifest.json: The descriptor for applications contains the application metadata
incl. the libraries, dependencies, models for UI5 applications
– Component.js: The component controller which provides the runtime metadata
and the component methods.
– controller: Javascript files with the controller implementations for the
corresponding views
– css: Application specific CSS files (if required)
– i18n: Contains the properties files which contain the application’s resource files
in their respective translation
– model: Application specific models and their respective modules for
implementation
– view: Typically XML files for all view definitions
Getting Started: New UI5 Application created in Web IDE on hanatrial

5. 5
 Edit index.html:
– Remove the <link> to style.css
 Edit manifest.json:
– Remove all library dependencies besides sap.ui.core and sap.m
Preparation step #1: Manual adoption of UI5 Application

6. 6
 SAP Cloud Cockpit: https://account.hanatrial.ondemand.com/cockpit
– Create new destination:
▫ Name: northwind
▫ URL: http://services.odata.org/V2/OData/OData.svc/
▫ Proxy Type: Internet
▫ Authentication: NoAuthentication
▫ Additional Properties:
 WebIDEEnabled: true
 WebIDEUsage: odata_gen
Preparation step #2: Setup destination to Northwind

7. 7
 Edit neo-app.json:
– Insert a new route which uses the northwind destination
Preparation step #3: Make Northwind service available

8. 8
 Edit manifest.json:
– Use the northwind destination for the default ODataModel
Preparation step #4: Use Northwind service as default model

9. 9
 Edit Main.view.xml:
– Insert a sap.m.Table control to display the Products of the Northwind service
Preparation step #5: Use Northwind service for sap.m.Table

10. 10
 Application is a simple sap.m.Table displaying the products from
Nothwind service (w/o special adoptions)
 Run the application via Web IDE preview but remove the URL
parameter sap-ui-appCacheBuster for performance analysis
 Results of examination of network trace:
– Outgoing requests are synchronous
– UI5 is loaded from the same origin
– Application resources are loaded
individually (no preload is used!)
– 404 requests for i18n files
– OData metadata request is sync and
delays XML view processing
Initial Situation: Application + Performance

11. Bootstrap Performance

12. 12
 Set the bootstrap configuration option
“sap-ui-preload” to value “async”
 Background information:
– UI5 bootstrap mechanism changes to behave
asynchronously. This affects all resources,
libraries and modules being required and
specified for bootstrap.
– Usage of Core#attachInit required to get informed
once the Core is fully intialized
Takeaway #1: Async Preloading of Libraries

13. 13
 Load the bootstrap script from UI5 Akamai-enabled
CDN
– Available versions:
https://sapui5.hana.ondemand.com/versionoverview.html
 Background information:
– Most often resources on Edge servers are closer
than SAP data centers
– Benefit from resources being cached
– Server with language fallback logic (no 404 for
i18n resources from CDN server)
Takeaway #2: Use Akamai to reduce latency

14. 14
 Set the concrete language to e.g. “en”
 Create “en” variant of i18n.properties file
 Background information:
– UI5 determines the browser language and
requests the concrete i18n files from the backend
and in case of 404s a more general request take
place
Takeaway #3: Avoid 404s; e.g. language fallbacks

15. 15
 Remove library preload on bootstrap
 Load the Component via the Component factory in
the asynchronous way
 Background information:
– Unblock the main thread while loading the
Component dependencies and resources
– Usage of sap.ui.require (TODO!!!)
Takeaway #4: Load components asynchronously

16. 16
 Load the manifest.json of the Component first to
analyze and preload the dependencies during
Component load
 Background information:
– Uses the information from the manifest.json to
load dependencies, includes resources during the
component load
– Attention: property will be deprecated with 1.50
and another property “manifest” should be used
Takeaway #5: Use “ManiFirst” to load the component

17. 17
 Initial Situation
– 28 requests / 2,47 secs
 #1: Async Preloading of Libraries
– 28 requests / 1,83 secs
 #2: Use Akamai to reduce latency
– 26 requests / 1,91 secs
 #3: Avoid 404s; e.g. language fallbacks
– 22 requests / 1,47 secs
 #4: Load components asynchronously
– 20 requests / 1,53 secs
 #5: Use “ManiFirst” to load the component
– 21 requests / 1,5 secs
 BUT: Bootstrap Performance tweaks are not relevant when running Component inside LauchPad
Summary: Bootstrap Performance

18. Component Performance

19. 19
 Use ODataModel V2 for databinding with an
OData service
 Background information:
– ODataModel V2 loads resources
asynchronously and doesn’t block the UI
thread
– By default uses $batch operation to fetch
multiple requests at once
– For Northwind service the XSRF token
handling should be deactivated which is not
supported for that service
Takeaway #1: Usage of ODataModel V2

20. 20
 Preload models are created when load the
Component modules and creating the
Component instance
 Background information:
– Components can preload models which
modules are already loaded otherwise a
warning will be shown
– Especially the ODataModel V2 benefits
because the metadata can be loaded in
parallel during Component load
– No benefit for local models since it will omit the
content from Component preload!
Takeaway #2: Use model preload feature

21. 21
 Generate a component preload to minimize
roundtrips by enabling the project type “SAPUI5
Client Build”
 Background info:
– Reduces the amount of round trips for a
component
– Required for asynchronous preload
– Web IDE packaging of today only combines JS
and View files but skips the manifest.json and the
properties
Takeaway #3, #4: Optimize application resources (Web IDE)

22. 22
 Initial Situation
– 28 requests / 2,47 secs
 Bootstrap Performance
– 21 requests / 1,5 secs
 #1: Usage of ODataModel V2
– 20 requests / 1,2 secs
 #2: Use model preload feature
– 20 requests / 1,29 secs
 #3: Optimize application resources
– 17 requests / 1,23 secs
 #4: Optimize application resources (Magic)
– 16 requests / 0,8 secs
Summary: Component Performance

23. Conclusion

24. 24
 Avoid sync requests
 Unblock UI thread
 Use idle times
 Reduce roundtrips
 Avoid 404s
Conclusion

25. Noteworthy

26. 26
 Introduced ComponentLifecycle to control the destruction
time of the Component
 ComponentLifecycle:
– Legacy: ComponentContainer takes care to destroy
the Component which is associated with the
ComponentContainer once the ComponentContainer is
destroyed but not when a new Component is
associated
– Application: Application takes care to destroy the
Components associated with the ComponentContainer
– Container: ComponentContainer takes care to destroy
the Components associated with the
ComponentContainer once the ComponentContainer is
destroyed or a new Component is associated
ComponentContainer: Component Lifecycle

27. 27
 The property “async” of the ComponentContainer has
been introduced to allow the asynchronous creation of the
Component by the Container
 Property defaults to “false” to be compatible
 Callback (thenable) missing once the Component is
created; will be added most probably with 1.50
ComponentContainer: Async Component Loading

28. 28
 The property “autoPrefixId” of the ComponentContainer
has been introduced to enable the prefixing of the
Component ID with the ComponentContainer ID
 Necessary when reusing a View multiple times or for
databinding scenarios with the ComponentContainer
ComponentContainer: AutoPrefixId

29. 29
 Explicit declaration of used components
– Every reuse component being used inside another
component must be declared!
 New section sap.ui5/componentUsages
– Reuse components are declared via their name incl.
default settings and componentData
– Dependency to reuse component is still needed
Component: Component Usage

30. 30
 The property “manifest” harmonizes the properties
“manifestFirst”, “manifestUrl” and provides the
option to pass a object to the Component factory
 Get rid of confusions!
 manifest=true: loads the default manifest.json
 manifest=url: loads the manifest.json from the
specified url
 manifest=object: uses the provided manifest for the
Component
Component: Harmonized manifest property

31. 31
 Code-free declaration of Components in
index.html page
 Multiple components can be declared via
separate tag with custom attributes in
HTML page
Idea: Declaration of Component on index.html

32. Thank you.
Contact information:
Peter Muessig
@pmuessig
You are welcome to give feedback for this session
in the UI5con Event App
DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!