Modular core changes and Best practises

1. Frederic Berg, Ram Prasad GS, SAP SE
July 20, 2018
UI5 Evolution
The Core Changes & Best Practices

2. 2
Evolution

3. 3
fast
modular
future-
proof
open
compat-
ible
GOALS

4. 4
think evo use evo

5. 5
“The evolution is already there in today’s UI5 codebase and can be
used for applications: declare your dependencies, use the new
asynchronous APIs and orchestrate your code execution!”

6. 6
“To carefully split our codebase in a compatible way, to provide a
state-of-the-art build and development tooling and to redefine the
individual layers to make them usable in a more fine granular way.”

7. 7
“UI5 today is quite monolithic! Although it has been designed for
modularization, there is a tight coupling between and within the
Core, the Rendering & Controls and the Programming Model!”

8. 8
“Split the different parts of UI5 into distinct yet modular layers: the
Core, the Rendering & Controls and the Programming Model and
allow for an individual and fine-modular consumption!”

9. 9
Modular
Core
Build and
Development
Tooling
Rendering
&Controls
Prog.
Models

10. 10
Modular
Core
Build and
Development
Tooling
Rendering
&Controls
Prog.
Models

11. 11
“Establish a future-proof foundation for code organization and
dependency management, enabling applications to run with just the
minimum amount of resources!”

12. 12
“Collection of
Bricks”
Restructure the Core
modules by splitting
them into a more fine
granular module set
for individual use.
Introduce AMD-like
module syntax to
enforce dependency
declaration and to get
rid of Globals. Applies
also to controls and
libraries.
Universal
JavaScript
Independence of DOM
and jQuery. Lower
layers of the Core are
usable in DOM-less
environments like
Node.js or Workers to
enable e.g. compile-
time pre-processing
of XMLViews.
Higher layers incl.
controls could get rid
of jQuery.
MODULAR CORE

13. UI5 Evolution
Initial
Framework + Apps
Module API
( jquery.sap.* )
UI5
Globals
1.52
legacy

14. UI5 Evolution
Initial
Framework + Apps
Preparing
Framework + Apps
Module API
( jquery.sap.* )
UI5
1.52
legacy internal
Module dependencies
Module API
1.54
GlobalsGlobals
uibase

15. UI5 Evolution
Initial
Framework + Apps
Preparing
Framework + Apps
Module API
( jquery.sap.* )
UI5
Preparing
Framework + Apps
1.52
legacy internal
Stubbing layer
internal
Module dependencies
Module API
1.54
1.56
GlobalsGlobals
uibase

16. UI5 Evolution
Initial
Framework + Apps
Preparing
Framework + Apps
Module API
( jquery.sap.* )
UI5
Preparing
Framework + Apps
1.52
legacy internal public
Stubbing layer
Migrating
Apps
internal
Module dependencies
Module API
Target
Framework
+ Apps
1.58
1.54
1.56
GlobalsGlobals
uibase

17. Get rid of sync XHR (typically via synchronous API).
They block the main thread, disallow execution of code in
the meantime or of other requests.
Task
…
Task
…Pending
Promise
Task
…
Promise
Task
…
Async APIs

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

19. UI5 Evolution
Initial
Apps
jquery.sap.global
UI5
1.52
legacy
jquery.sap.declare()
jquery.sap.require()
AMDspec
sap.ui.define()
sap.ui.require()
• sync
• async (preload)

20. UI5 Evolution
Initial
Apps
jquery.sap.global
UI5
Migrating
Apps
ui5loader
1.52
legacy
Private Interface
jquery.sap.global
Legacy
Apps
sap.ui.define()
sap.ui.require()
1.54
jquery.sap.declare()
jquery.sap.require()
compat
• sync
• async (experimental)
AMDspec
jquery.sap.declare()
jquery.sap.require()
sap.ui.define()
sap.ui.require()
• sync
• async (preload)

21. UI5 Evolution
Initial
Apps
jquery.sap.global
UI5
Migrating
Apps
ui5loader
1.52
legacy
Migrating
Apps
Private Interface
jquery.sap.global
1.56
Legacy
Apps
ui5loader
sap.ui.define()
sap.ui.require()
1.54
jquery.sap.declare()
jquery.sap.require()
sap.ui.define()
sap.ui.require()
sap.ui.loader.config(
{async: true})
compat public
define()
require()
sap.ui.loader.config(
{amd: true})
• sync
• async (experimental)
• sync
• async (config)
AMDspec
jquery.sap.declare()
jquery.sap.require()
sap.ui.define()
sap.ui.require()
• sync
• async (preload)

22. Demo: UI5 Loader

23. Demo: UI5 Loader

24. 24
Asynchronous Loader
• A basic AMD compatible ui5loader ships
• sap.ui.loader more robust, with public config()
Asynchronous APIs
• Replaced many sync APIs by async alternatives
• Async XMLTemplateProcessor (optional)
(
• Reduced sync calls, coupled renderer + control
• OpenUI5 sample app starts up fully async
• Harmonized global factory APIs (all async)
1.52
1.54
1.56
1.54
1.56
“Collection of Bricks”
• Promote sap.ui.define() and sap.ui.require()
• New modules, internal behind compat layer
• Stubbing, so apps work in modular environment
• Avoid hard dependencies via lazy instanceof
• Fine-granular modules become public
(replacing legacy jquery.sap.* modules)
• Remove calls to legacy jquery.sap.* API
Universal JavaScript
• jQuery removed in lower layers or pushed upwards
• DOM-less "base" core and a ”ui" layer
1.54
1.56
1.58
1.58

25. 25
Modular
Core
Build and
Development
Tooling
Rendering
&Controls
Prog.
Models

26. 26
sap.ui.core
openui5-sample-app
sap.m
openui5-sample-app
Preload Self-Contained
≈ 480 KB (gzip)≈ 1.100 KB (gzip)
Bundling
~ 1.100 kB (gzip) ~ 480 kB (gzip)
today!
sap.ui.core
sap.m

27. Demo: Preload Bundling
Demo: Self-Contained Bundling

28. 28
UI5 Best Practices

29. 29
• Asynchronous loading
• AMD-like module definition
• Avoid Global
• Async APIs
Topics

30. Asynchronous Loading

31. 31
{
"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

32. 32
§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>

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

34. 34
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) { ... });

35. 35
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");
});

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

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

38. 38
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) {
...
});

39. 39
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) {...});

40. AMD-like Module Definition

41. 41
§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)
AMD-like module definition

42. 42
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(...);
}
...
});

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

44. 44
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

45. 45
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

46. Avoid Globals

47. 47
§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
});

48. 48
think evo use evo

49. Contact information:
Frederic Berg
frederic.berg@sap.com
VP SAP Cloud Platform UI Core Services
Ram Prasad GS,
ram.prasad.gs@sap.com
Developer, UI5 Flexibility Services.
Thank you.

50. Think evo!
Contact information:
Frederic Berg
andreas.ecker@sap.com
VP SAP Cloud Platform UI Core Services
Ram Prasad GS,
ram.prasad.gs@sap.com
Developer, UI5 Flexibility Services.