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
UI5con 2017 - UI5 Components - More 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
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
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)
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!
Initial: 28 Requests; 1.0 MB transferred; Finish: 2.47 s; DOMContentLoaded: 2.33 s; Load: 2.41 s
Final: 21 Requests; 1.0 MB transferred; Finish: 1.50 s; DOMContentLoaded: 0,2 s; Load: 1,34 s
Language => language is set by FLP but should be available in Component
Previous: 20 Requests; 1.0 MB transferred; Finish: 1.40 s; DOMContentLoaded: 0,22 s; Load: 0,97 s
Next: 20 Requests; 1.0 MB transferred; Finish: 1.29 s; DOMContentLoaded: 0,2 s; Load: 1,03 s
https://sapui5.hana.ondemand.com/#docs/guide/26ba6a5c1e5c417f8b21cce1411dba2c.html
Only works with Component Load Async & ManifestFirst
Previous: 20 Requests; 1.0 MB transferred; Finish: 1.29 s; DOMContentLoaded: 0,2 s; Load: 1,03 s
Next: 17 Requests; 1.0 MB transferred; Finish: 1.23 s; DOMContentLoaded: 0,17 s; Load: 0,48 s
Show how it looks when to include manifest.json and properties into preload package:
sap.watt.uitools.sapui5clientbuild/service/builder/PreloadComponentCreator
Magic: 16 Requests; 1.0 MB transferred; Finish: 0,8 s; DOMContentLoaded: 0,16 s; Load: 0,46 s
ComponentContainer takes care to destroy the Components associated with the ComponentContainer once the ComponentContainer is destroyed or a new Component is associated