The SAPUI5 framework is constantly evolving – as are coding best practices. This session will demonstrate how developers get their Apps ready for today's features (such as "Adaptation at Runtime") and future SAPUI5 evolvements by just applying a few small code changes. UI5 development experts will discuss topics like stable IDs, asynchronous loading and preparing for UI5 Evolution. They will share helpful tips and tricks for rookies and experienced SAPUI5 App developers alike.

1. Ayham Tanbari, SAP SE
Arnd vom Hofe, SAP SE
June 22, 2018
UI5 – Best Practices
& Tips

2. 2
▪Features from version 1.50 and beyond
▪Latest Best Practices might reverse former Best
Practices
▪Some Best Practices have no immediate impact,
but prepare for future compatibility
SAPUI5 Best Practices 2018

3. 3
• Stable IDs
• Asynchronous loading
• AMD-like module definition
• Avoid Global
• Async APIs
• Future Enhancements
Topics

4. Stable IDs

5. 5
▪Automated Testing / OPA Test
▪Troubleshooting / Debugging
▪Support Assistant
▪UI Adaptation at Runtime (RTA)
–add labels
–combine fields
–add / remove entire sections
Why Stable IDs?

6. 6
What is UI Adaptation at Runtime ?
from Blog
UI5ers Buzz#21

7. 7
▪In XML View
Stable IDs of Controls
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page id="page">
<content>
<Table id="table">
</Table>
</content>
</Page>
</mvc:View>

8. 8
▪index.html
Stable IDs of Components
new Shell({
app: new ComponentContainer({
height : "100%",
name : "sap.ui.demo.worklist",
settings: {
id: "worklist"
}
})
}).placeAt("content");

9. 9
▪If you are doing it this way, you are doing it wrong!
Stable IDs of Views
<mvc:View id="myView"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page id="page">
<content>
…
</content>
</Page>
</mvc:View>
▪ View IDs are not defined in the View but in
manifest.json!

10. 10
▪ In manifest.json
Stable IDs for Views
{
"sap.ui5": {
"rootView": {
"viewName": "namespace.view.Root",
"id" : "rootView",
"async": true,
"type": "XML"
}
...
"routing": {
...
"targets": {
"myTarget": {
"viewName": "MyView",
"viewId": "myView"
}
}
}
}

11. Asynchronous Loading

12. 12
▪Performance
▪Parser blocking
▪Resource blocking
▪Small Demo
Why Asynchronous Loading?

13. 13
▪Bootstrapping in index.html
Asynchronous Loading of Components
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/
sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>

14. 14
Asynchronous Loading of Components
sap.ui.getCore().attachInit(function () {
sap.ui.component({
name: "ui5evolution",
async: true,
manifest: true
}).then(function (oComponent) {
…

15. 15
{
"sap.ui5": {
"rootView": {
"viewName": "namespace.view.Root",
"id" : "rootView",
"async": true,
"type": "XML"
}
...
"routing": {
...
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
...
"async": true
}
Activate Asynchronous Loading of Views in manifest.json

16. AMD-like Module Definition

17. 17
▪Do not use jQuery.sap.declare or jQuery.sap.require anymore
▪Use sap.ui.define and sap.ui.require instead
▪sap.ui.define: Dependencies are loaded in advance before executing the defined
module (static Dependencies)
▪sap.ui.require: Dependencies are resolved on demand after the initial module
execution (when the user interact with app) (Dynamic Dependencies)
▪Read Modules and Dependencies
AMD-like module definition

18. 18
sap.ui.define / sap.ui.require
sap.ui.define("my/Button", [
"sap/m/Button"
], function(Button) {
"use strict";
return Button.extend("my.Button", {
...
onclick: function(oEvent) {
// lazy require
sap.ui.require([
"sap/m/MessageBox"
], function(MessageBox) {
return MessageBox.show(...);
});
}
...
jQuery.sap.declare("my.Button");
jQuery.sap.require("sap.m.Button");
var Button = sap.m.Button.extend("my.Button",
{
...
onclick: function(oEvent) {
// lazy require w/o jQuery.sap.require
sap.m.MessageBox.show(...);
}
...
});

19. 19
Lazy instance check
var XYButton= sap.ui.require("sap/xy/Button");
typeof XYButton === "function" &&
oEvent.getSource() instanceof XYButton
oEvent.getSource() instanceof sap.xy.Button

20. 20
Lazy instance check (since 1.56)
sap.ui.define("my/Button", [
"sap/ui/base/Object"
], function(BaseObject) {
"use strict";
...
// lazy instanceof check (since 1.56)
BaseObject.isA(oEvent.getSource(),
"sap.xy.Button");
oEvent.getSource() instanceof sap.xy.Button

21. 21
Combining Renderer and Controls
// Provides control sap.m.Text
sap.ui.define([
'./library',
'sap/ui/core/Control',
'sap/ui/core/library',
'sap/ui/Device',
'./TextRenderer'
],
function(library, Control, coreLibrary, Device, TextRenderer)
{
"use strict";
…
▪Controls “require” their own Renderer
Example: sap.m.Text

22. Avoid Globals

23. 23
▪Do not use globally declared
namespaces like sap.* and
jQuery.sap.* anymore !
Avoid Globals
bodyText = new sap.m.Text({
id: this.getId() + '-body',
text: this.getDescription(),
maxLines: 2
});

24. Async APIs

25. 25
Sync to Async: Loading Components
sap.ui.component({
name: "my.comp"
});
sap.ui.component({
name: "my.comp",
manifest: true,
async: true
}).then(function(oComp) {
...
});

26. 26
Sync to Async: Loading Components (since 1.56)
sap.ui.component({
name: "my.comp"
});
sap.ui.require(['sap/ui/core/Component'],
function(Component){
Component.create({
name: "my.comp"
}).then(function(oComp) { ... });

27. 27
Sync to Async: Loading ComponentContainers
var oCont = new sap.ui.core.ComponentContainer({
name: "my.comp"
});
oCont.placeAt("content");
sap.ui.require([
"sap/ui/core/ComponentContainer”
], function(ComponentContainer) {
var oCont = new ComponentContainer({
name: "my.comp",
async: true,
componentCreated: function(oEvent) {
var oComp = oEvent.getParameter("component");
}
});
oCont.placeAt("content");
});

28. 28
Sync to Async: Loading Libraries
sap.ui.getCore().loadLibrary("sap.m"); sap.ui.getCore().loadLibrary("sap.m", {
async: true
}).then(function() {
...
});

29. 29
Sync to Async: Loading i18n Texts
var oBundle = jQuery.sap.resources({
url: "mybundle.properties"
});
jQuery.sap.resources({
url: "mybundle.properties"
}).then(function(oBundle) {
...
});

30. 30
Sync to Async: Loading Views
var oView = sap.ui.view({
view: "my.View",
type: ViewType.XML
});
sap.ui.view({
view: "my.View",
type: ViewType.XML,
async: true
}).loaded().then(function(oView) {
...
});

31. 31
Sync to Async: Loading Views (since 1.56)
var oView = sap.ui.view({
view: "my.View",
type: ViewType.XML
});
sap.ui.require(['sap/ui/core/View'],
function(View){
View.create({
view: "my.View",
type: ViewType.XML
}).then(function(oView) {...});

32. Future Enhancements
Work In Progress
Features might change …

33. 33
Future enhancements
var oView = sap.ui.fragment({
type: "xml"
});
sap.ui.require(['sap/ui/core/Fragment'],function(
Fragment){
Fragment.load({
type: "xml"
}).then(function(aControls) { ... });

34. 34
Future enhancements
var oInfo = sap.ui.getVersionInfo();
sap.ui.require(['sap/ui/core/VersionInfo'],
function(VersionInfo){
VersionInfo.load({
...
}).then(function(oVersionInfo){...});
...
})

35. Any Questions?

36. Thank you.
Contact information:
Ayham Tanbari
UI5 Developer
ayham.tanbari@sap.com
Arnd vom Hofe
UI5 Developer
a.vom.hofe@sap.com

37. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.
The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components
of other software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated
companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are
set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release
any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and
platforms, directions, and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information
in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and
uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they
should not be relied upon in making purchasing decisions.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company)
in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.
See http://global.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
© 2018 SAP SE or an SAP affiliate company. All rights reserved.

38. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche
Genehmigung durch SAP SE oder ein SAP-Konzernunternehmen nicht gestattet.
In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden. Die von SAP SE oder deren Vertriebsfirmen angebotenen Softwareprodukte
können Softwarekomponenten auch anderer Softwarehersteller enthalten. Produkte können länderspezifische Unterschiede aufweisen.
Die vorliegenden Unterlagen werden von der SAP SE oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu Informationszwecken.
Die SAP SE oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in dieser Publikation.
Die SAP SE oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die jeweiligen Produkte und
Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu interpretieren.
Insbesondere sind die SAP SE oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation dargestellte Geschäftsabläufe
zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder eine zugehörige Präsentation, die Strategie und etwaige künftige
Entwicklungen, Produkte und/oder Plattformen der SAP SE oder ihrer Konzernunternehmen können von der SAP SE oder ihren Konzernunternehmen jederzeit und ohne Angabe
von Gründen unangekündigt geändert werden. Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur
Lieferung von Material, Code oder Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die tatsächlichen
Ergebnisse von den Erwartungen abweichen können. Dem Leser wird empfohlen, diesen vorausschauenden Aussagen kein übertriebenes Vertrauen zu schenken und sich bei
Kaufentscheidungen nicht auf sie zu stützen.
SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP SE
(oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern weltweit. Alle anderen Namen von Produkten und Dienstleistungen sind Marken
der jeweiligen Firmen.
Zusätzliche Informationen zur Marke und Vermerke finden Sie auf der Seite http://www.sap.com/corporate-de/legal/copyright/index.epx
© 2018 SAP SE oder ein SAP-Konzernunternehmen. Alle Rechte vorbehalten.