The document discusses UI5 Evolution, which is a project to address current problems and advance the UI5 framework, tooling, and controls. It aims to split UI5 into modular layers including a modular core, build and development tools, lightweight controls and declarative renderers, and support for multiple programming models. The key pillars of innovation are performance, modularization, standards and trends, openness, and compatibility.

1. Evolution

2. What is “UI5 Evolution”?
It is “UI5’s innovation project” to solve today’s problems and to advance the
framework, tooling and controls! It is the successor of project “Cheetah” defining
the innovation key pillars.

3. Brief History of Time
2009
Project Phoenix was
started with the goal to
provide an open, flexible
and platform agnostic UI
layer.
2011
Strong momentum at
SAP, renamed to SAPUI5,
new Multi-Channel
Delivery to ABAP, Java,
Cloud.
2016
Fiori 2.0, Blackbird,
Project Cheetah initiated
to define the innovation
key pillars and roadmap.
2014
OpenUI5, Web IDE, Fiori,
SFIN support for SAPHIRE
(entry to S/4H), strong
growth (Sofia) …

4. Innovation Key Pillars
Perfor-mance
Modular-
ization
Standards &
Trends
Openness
Compa-tibility

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

6. The Solution
“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!”

7. Modular
Core
Build and Development
Tools
Rendering&
Controls
Programming
Models

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

9. 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
“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.
Emerging technologies
Benefit from evolving
features such as ES6
modules or ES6 language
features. Be open to
supportTypeScript in
upper layers or support
transpiled code. For the
framework we are mainly
locked to ES5 due to
browser shipment matrix.
Asynchronous
Loader & APIs
Deprecate sync XHR!
Enable module loader to
be basically AMD
compatible. Establish
asynchronous APIs for
loading Libraries,
Components, Views &
Controllers, i18n files.
Enable asynchronous
XMLView processing.
Become ready for latest
web features.

10. Modular
Core
Build and Development
Tools
Rendering&
Controls
Programming
Models
“Collection of Bricks”
Asynchronous Loader
& APIs
Universal JavaScript
Emerging
Technologies

11. Build & Development Tooling
“Create an open-source Node.js based build & development environment to
support both application developers and framework developers!”

12. Build & Development Tooling
Agnostic Build
Modules
Build modules shall be
independent from a
specific task runner to
recycle them for arbitrary
JavaScript environments
like Node, Grunt, Gulp,
etc. and to replace the
existing in-house,
Maven-based tool chain.
Command Line
Interface
Implement a simplistic
CLI which assists
developers during build
and development
lifecycle based on a
dedicated set of standard
build modules.The CLI
will also include a set of
migration tools to assist
apps to migrate to the
new feature set.
Self-contained
packages
Generate a self-
contained package for
the application ready for
deployment. Leverage
dependency
management and
sophisticated bundling to
only include required and
optimized resources.
Option to generate dep-
cache info for http/2
environments.
Open, extensible tool
chain
Complete app lifecycle
aspects such as initial
creation of a individual,
pre-configured app
project; improve dev
experience for minimal
round-trip (e.g. watch &
reload) and provide
additional compile-time
optimizations.

13. Available as Open Source!!

14. Modular
Core
Build and Development
Tools
Rendering&
Controls
Programming
Models
“Collection of Bricks”
Asynchronous Loader
& APIs
Universal JavaScript
Emerging
Technologies
Agnostic Build
Modules
Command Line
Interface
Self-contained
packages
Open and extensible
tool chain

15. Rendering & Controls
“Define a modern control framework which simplifies the creation of agnostic,
declarative, universal and themable controls which can be used with a
minimalistic footprint!”

16. Rendering & Controls
Lightweight Controls
Implement new Control
foundation, which is
individually usable and
requires just a
minimalistic Core. Rework
the “bread and butter”
controls. Lightweight
Controls should replace
the similar old Control.
Allow a side-by-side usage
with the old Controls.
Declarative Renderers
Introduce a template-like
declaration of Control
renderers, which
improve the agnostic
usage of a renderer for
different technologies.
Add dependencies from
a renderer to the CSS of
the Control to allow for a
determination of
necessary CSS.
Rendering Technology
Introduce a modern
rendering technology,
which allows for an
optimal re-rendering of
Controls without the
need to implement
custom setters manually
(minimize Control
footprint by reduction of
code). Integrate async
rendering.
Simplified Composition
Reduce the overhead of
Control composition by
merging the indivi-dual
Control renderers and
behaviors at build time
without writing manual
glue code. Should ensure
to get rid of variations of
Controls, as of today
having 500+ Controls just
for slight diffs.

17. Rendering Core (minimalistic subset of UI5 Core)
Lightweight Control
Renderer
Rendering Technology
String streaming lit-html
Behavior
Declarative Renderer
Render Context
CSS
Rendering & Controls
UI5 classic

18. Modular
Core
Build and Development
Tools
Rendering&
Controls
Programming
Models
“Collection of Bricks”
Asynchronous Loader
& APIs
Universal JavaScript
Emerging
Technologies
Agnostic Build
Modules
Command Line
Interface
Self-contained
packages
Open and extensible
tool chain
Lightweight Controls Declarative Renderers Rendering Technology
Control Set &
Composition

19. Programming Models
“Continue support for existing UI5 programming model, but move closer to de-
facto standards and support trends to enable reuse of individual UI5 layers for
other programming models!”

20. Programming Models
UI5 classic
Continuous support, but
will also be affected by
new APIs. A compatibility
layer will ensure that
legacy applications
(being timeless) continue
to work with UI5
Evolution and can
partially benefit from
improvements made in
the Core and the
Rendering layer.
Web Components
New default API for the
UI5 Controls: easy to
integrate, requiring a
minimal footprint. Share
fundamental UI5 qualities
with others (Fiori UX,
enterprise grade, …)
Usage of latest browser
standards like ES6
classes, Custom
Elements, Shadow DOM
and other features.
Others
Support for other
frameworks like Angular,
React andVue by
providing the UI5
Controls as Web
Components or
Lightweight Controls. For
such frameworks, there is
no need for the features
of the programming
model of UI5 and thus
usage of the UI5 Controls
is sufficient.
…

21. Rendering Core (minimalistic subset of UI5 Core)
Lightweight Control
Renderer
Rendering Technology
String streaming lit-html
Behavior
Declarative Renderer
Render Context
CSS
Programming Models
UI5 classic UI5 Web Components

22. Modular
Core
Build and Development
Tools
Rendering&
Controls
Programming
Models
“Collection of Bricks”
Asynchronous Loader
& APIs
Universal JavaScript
Emerging
Technologies
Agnostic Build
Modules
Command Line
Interface
Self-contained
packages
Open and extensible
tool chain
Lightweight Controls Declarative Renderers Rendering Technology
Control Set &
Composition
UI5 classic Web Components … Others

23. But – there is one more thing!
“Humans are learning from Nature and implementing it’s solutions. The evolution is a
great concept of Nature and comes with an essential feature we yet miss! Curious??”

24. Declare your
dependencies!Master async and be
progressive!
Orchestrate your code
execution!Stop using deprecated
APIs!
We need you!

25. Thank You!
Contact Information:
Peter Muessig
Lead Architect UI5
peter.muessig@sap.com
@pmuessig
Andreas Ecker
Product Owner UI5 Core and Runtime
andreas.ecker@sap.com