You are on page 1of 30

CGE210 – SAPUI5 Evolution:

Gain Performance, Close Gaps, and Use New


Technologies
PUBLIC
Speakers 2018

SAP TechEd Las Vegas Frederic Berg


October 2–5, 2018

SAP TechEd Barcelona Stefan Beck


October 23–25, 2018

SAP TechEd Bangalore Ramprasad GS


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 CGE210
on 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


Agenda

What is SAPUI5 Evolution

Architecture

Modular Core

Build and Development Tooling

Rendering and Controls

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


What is SAPUI5 evolution?

The innovation project of SAPUI5 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


SAPUI5 apps and provide evolution guidelines and tools

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


What is SAPUI5 evolution?

The innovation project of SAPUI5 to solve today’s problems


and advance the framework tooling and controls

Targeting for performance especially on mobile devices by Performance


reducing 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


SAPUI5 apps and provide evolution guidelines and tools

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


What is SAPUI5 evolution?

The innovation project of SAPUI5 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


SAPUI5 apps and provide evolution guidelines and tools

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


What is SAPUI5 evolution?

The innovation project of SAPUI5 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


SAPUI5 apps and provide evolution guidelines and tools Compatibility

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


Agenda

What is SAPUI5 Evolution

Architecture

Modular Core

Build and Development Tooling

Rendering and Controls

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


The monolithic architecture

SAPUI5 Libraries

sap.ui.layout sap.m sap.suite.ui.commons

Button Label Input


sap.ui.unified sap.gantt
Dialog List DatePicker
sap.ui.table sap.viz

SAPUI5 Framework & Programming Model (SAPUI5)

Module Loader Rendering & Controls OData Client MVC (XMLView, JSView, …)

Configuration Databinding Models (JSON, OData) Components

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


The layered architecture

Programming Model (SAPUI5)

Databinding Models (JSON, OData) MVC (XMLView, JSView, …) Components

Controls
Button Label Input Dialog List DatePicker Table

Rendering & Controls Framework

Minimalistic Core Utilities

Module Loader Configuration Internationalization OData Client

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


Agenda

What is SAPUI5 Evolution

Architecture

Modular Core

Build and Development Tooling

Rendering and Controls

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


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 14


SAPUI5 SAPUI5 Evolution

Initial Legacy Migrating Migrating


Apps Apps Apps Apps

ui5loader
jquery.sap.global jquery.sap.global
define()
jquery.sap.declare() jquery.sap.declare() require()
jquery.sap.require() jquery.sap.require()

AMD spec
sap.ui.loader.config(
{amd: true})
sap.ui.define() Private Interface
sap.ui.require()
sap.ui.define()
sap.ui.require()
ui5loader
sap.ui.define() sap.ui.loader.config(
sap.ui.require() {async: true})

• sync • sync • sync


• async (preload) • async (experimental) • async (config)

legacy compat public


Agenda

What is SAPUI5 Evolution

Architecture

Modular Core

Build and Development Tooling

Rendering and Controls

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


Tooling evolution

Maven Tooling Grunt Tooling Node.js Tooling


 Based on Maven (Java)  Based on the Grunt Task  Based on Node.js
 Full-fledged feature-set Runner (JavaScript)
(/w legacy)  Limited feature-set  Full-fledged feature-set
 Proprietary / SAP internal  Open Source (Apache 2.0) (w/o legacy)
 Open Source (Apache 2.0)

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


CLI commands

ui5 init ui5 serve ui5 build

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


Development experience

npm install -g @ui5/cli

git clone -b ui5-tooling https://github.com/SAP/openui5-sample-app.git

cd openui5-sample-app

npm install

npm start

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


CLI commands

ui5 init ui5 serve ui5 build

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


Bundling and packaging

Preload Bundles Self-Contained Bundle

openui5-sample-app openui5-sample-app

sap.ui.core sap.ui.core

sap.m sap.m

≈ 1.170 KB (gzip) ≈ 480 KB (gzip)

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


Available as Open Source

https://github.com/SAP/ui5-tooling https://www.npmjs.com/org/ui5

#tooling on (get invited) https://www.npmjs.com/org/openui5


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

What is SAPUI5 Evolution

Architecture

Modular Core

Build and Development Tooling

Rendering and Controls

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


Rendering and controls

Lightweight Declarative Rendering Simplified


Controls Renderers Technology Composition

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

This is the current state of planning and may be changed by SAP at any time without notice.
© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 24
Lightweight controls

Rendering & Controls Framework

Lightweight Control
Metadata & Behavior Renderer CSS
API
Render Context

Minimalistic Core

This is the current state of planning and may be changed by SAP at any time without notice.
© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 25
Declarative renderer

Rendering & Controls Framework

Lightweight Control
Metadata & Behavior Renderer CSS
API
Render Context Declarative Renderer

Minimalistic Core

This is the current state of planning and may be changed by SAP at any time without notice.
© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 26
Rendering technology

Rendering & Controls Framework

Lightweight Control
Metadata & Behavior Renderer CSS
API
Render Context Declarative Renderer

Rendering Engine (Technologies)


String streaming Incremental DOM HTML templating (lit-html)

Minimalistic Core

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


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 28


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 29
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 CGE210. 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 30