You are on page 1of 35

LTI147 – Understanding UI5 Evolution

PUBLIC
Speakers 2018

SAP TechEd Las Vegas Frederic Berg, SAP SE


October 2–5, 2018

SAP TechEd Barcelona Stefan Beck, SAP SE


October 23–25, 2018

SAP TechEd Bangalore tbd


November 28–30, 2018

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2


Take the session survey.
We want to hear from you!

Be sure to complete the session evaluation


for this session LT147on the SAP TechEd
mobile app.

Download the app from


iPhone App Store or Google Play.

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3


Disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP.
Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or any other service
or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or any related
document, or to develop or release any functionality mentioned therein.
This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms directions and
functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information in this
presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality. This presentation is provided
without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement. This presentation is for informational purposes and may not be incorporated into a contract. SAP
assumes no responsibility for errors or omissions in this presentation, except if such damages were caused by SAP’s intentional or gross
negligence.
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, which speak only as of their dates,
and they should not be relied upon in making purchasing decisions.

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4


UI5 Evolution
What is UI5 evolution?

The innovation project of UI5 to solve today’s problems and advance


the framework tooling and controls

Targeting for performance especially on mobile devices by reducing


the footprint with modularization

Move closer towards standards and trends to benefit from


innovations, tools and man-power of Open Source

Ensure compatibility to safe the investment of existing UI5 apps and


provide evolution guidelines and tools

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6


What is UI5 Evolution?

The innovation project of UI5 to solve today’s problems and advance


the framework tooling and controls

Targeting for performance especially on mobile devices by reducing Performance


the footprint with modularization
Modularization

Move closer towards standards and trends to benefit from


innovations, tools and man-power of Open Source

Ensure compatibility to safe the investment of existing UI5 apps and


provide evolution guidelines and tools

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7


What is UI5 Evolution?

The innovation project of UI5 to solve today’s problems and advance


the framework tooling and controls

Targeting for performance especially on mobile devices by reducing


the footprint with modularization

Move closer towards standards and trends to benefit from Standards & Trends
innovations, tools and man-power of Open Source
Openness

Ensure compatibility to safe the investment of existing UI5 apps and


provide evolution guidelines and tools

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8


What is UI5 Evolution?

The innovation project of UI5 to solve today’s problems and advance


the framework tooling and controls

Targeting for performance especially on mobile devices by reducing


the footprint with modularization

Move closer towards standards and trends to benefit from


innovations, tools and man-power of Open Source

Ensure compatibility to safe the investment of existing UI5 apps and


provide evolution guidelines and tools Compatibility

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9


Modular Core
Modular core

“Collection of Universal Asynchronous Emerging


Bricks” JavaScript Loader & APIs technologies

Restructure the Core Independence of DOM Deprecate sync XHR! Benefit from evolving
modules by splitting and jQuery. Lower Enable module loader to features such as ES6
them into a more fine layers of the Core are be basically AMD modules or ES6
granular module set for usable in DOM-less compatible. Establish language features. Be
individual use. Introduce environments like asynchronous APIs for open to support
AMD-like module syntax Node.js or Workers to loading Libraries, TypeScript in upper
to enforce dependency enable e.g. compile- Components, Views & layers or support
declaration and to get time pre-processing of Controllers, i18n files. transpiled code. For the
rid of Globals. Applies XMLViews. Higher Enable asynchronous framework we are
also to controls and layers incl. controls XMLView processing. mainly locked to ES5
libraries. could get rid of jQuery. Become ready for latest due to browser
web features. shipment matrix.

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11


Build Tools
Build tools

ui5 init ui5 serve ui5 build

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13


Asynchronous Loading
Why asynchronous loading?

 Performance

 Parser blocking

 Resource blocking

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15


Asynchronous loading of components

 Bootstrapping in index.html
<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>

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16


Asynchronous loading of components

sap.ui.getCore().attachInit(function () {
sap.ui.component({
name: "ui5evolution",
async: true,
manifest: true
}).then(function (oComponent) {

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 17


Activate asynchronous loading of views in manifest.json

{
"sap.ui5": {
"rootView": {
"viewName": "namespace.view.Root",
"id" : "rootView",
"async": true,
"type": "XML"
}
...
"routing": {
...
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
...
"async": true
}
© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 18
AMD-like Module Loading
AMD-like module definition

 Do not use jQuery.sap.declare or jQuery.sap.require anymore

 Use sap.ui.define and sap.ui.require instead

 sap.ui.define loads all modules and then calls the module-definition-function to


define a new module

 sap.ui.require loads the module and calls function asynchronously

 Read Modules and Dependencies

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 20


sap.ui.define / sap.ui.require

jQuery.sap.declare("my.Button"); sap.ui.define("my/Button", [
"sap/m/Button"
jQuery.sap.require("sap.m.Button"); ], function(Button) {
"use strict";

var Button = sap.m.Button.extend("my.Button", return Button.extend("my.Button", {


{ ...
... onclick: function(oEvent) {
onclick: function(oEvent) {
// lazy require
// lazy require w/o jQuery.sap.require sap.ui.require([
sap.m.MessageBox.show(...); "sap/m/MessageBox"
], function(MessageBox) {
} return MessageBox.show(...);
... });
}); }
...

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 21


Combining renderer and controls

 Controls “require” their own Renderer


Example: sap.m.Text
// 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";

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 22
Avoid Globals
Avoid Globals

 Do not use globally declared


namespaces like sap.* and
jQuery.sap.* anymore !

bodyText = new sap.m.Text({


id: this.getId() + '-body',
text: this.getDescription(),
maxLines: 2
});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 24


Async APIs
Sync to async: loading components (1)

sap.ui.component({ sap.ui.component({
name: "my.comp" name: "my.comp",
}); manifest: true,
async: true
}).then(function(oComp) {
...
});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 26


Sync to async: loading components (2)

sap.ui.component({ sap.ui.require(['sap/ui/core/Component'],
name: "my.comp" function(Component){
}); Component.create({
name: "my.comp",
manifest: true,
async: true
}).then(function(oComp) { ... });

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 27


Sync to async: loading component containers

var oCont = new sap.ui.core.ComponentContainer({ sap.ui.require([


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

});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 28


Sync to async: loading libraries

sap.ui.getCore().loadLibrary("sap.m"); sap.ui.getCore().loadLibrary("sap.m", {
async: true
}).then(function() {
...
});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 29


Sync to async: loading i18n texts

var oBundle = jQuery.sap.resources({ jQuery.sap.resources({


url: "mybundle.properties" url: "mybundle.properties",
}); async: true
}).then(function(oBundle) {
...
});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 30


Sync to async: loading views (1)

var oView = sap.ui.view({ sap.ui.view({


view: "my.View", view: "my.View",
type: ViewType.XML type: ViewType.XML,
}); async: true
}).loaded().then(function(oView) {
...
});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 31


Sync to async: loading views (2)

var oView = sap.ui.view({ sap.ui.require(['sap/ui/core/View'],


view: "my.View", function(View){
type: ViewType.XML View.create({
}); view: "my.View",
type: ViewType.XML,
async: true
}).then(function(oView) {...});

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 32


SAP TechEd online / SAP Community

Access replays of:


 Keynotes
 SAP TechEd live interviews
 Selected lecture sessions

http://sapteched.com/online

Continue your SAP TechEd discussion after


the event within SAP Community:
 Read and reply to blog posts
 Ask your questions
 Join conversations

sap.com/community
See all SAP TechEd blog posts

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 33


Further information

Related SAP TechEd learning journeys


CGE2 - Design and Develop SAP Fiori apps
CNA8 - How to Build Intelligent Business Applications

Related SAP TechEd sessions


CGE855 – Road Map: SAPUI5
CGE210 – SAPUI5 Evolution: Gain Performance, Close Gaps, and Use New Technologies (Lecture)
CNA220 – Next-Generation Smart SAPUI5 Controls Consuming SAP Cloud Platform Services (Lecture)
CGE371 – How to efficiently develop SAP Fiori with Fiori elements (Hands-On 2h)
CGE372 – Evolved Best Practices and Tips for Working with SAPUI5 (Hands-On 4h)
CGE716 – Everything wrong with… my SAPUI5 App (Code Review)
CGE713 – Prepare your App for SAPUI5 Evolution (Code Review)
CNA376 – Build Applications with the Programming Model on SAP Cloud Platform (Hands-On 2h)
CGE367 – Build Your SAP Fiori App from Back End to User Interface (Hands-On 2h)

Public SAP Web sites


SAP Community: www.sap.com/community
SAP products: www.sap.com/products

SAP training and certification opportunities


www.sap.com/education
© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 34
Thanks for attending this session.

Feedback Contact for further topic inquiries

Please complete your session Frederic Berg


Vice President Cloud Platform UI Core Services
evaluation for LTI147 frederic.berg@sap.com

Stefan Beck
Chief Product Owner SAPUI5 Development
stefan.beck@sap.com
© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 35