OpenUI5

Vitaliy @Sygyzmundovych Rudnytskiy
TopConf Bucharest, Sep 2015

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 2Public
Disclaimer
This presentation outlines our general product direction and should not be relied on in
making a purchase decision. This presentation is not subject to your license
agreement or any other agreement with SAP. SAP has no obligation to pursue any
course of business outlined in this presentation or to develop or release any
functionality mentioned in this presentation. This presentation and SAP's strategy and
possible future developments are subject to change and may be changed by SAP at
any time for any reason without notice. This document 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.
SAP assumes no responsibility for errors or omissions in this document, except if
such damages were caused by SAP intentionally or grossly negligent.

Let’s start with…
… me :) Vitaliy Rudnytskiy
@Sygyzmundovych [sygyƷmuːndɔvytʃ]
SAP’s Developer Center team
- developers.sap.com
Based in Wrocław, Poland

Let me take you on a journey back in time to SAPGUI…
http://www.sapdesignguild.org/goodies/r3_history.asp

…and now fast-forward to SAP Fiori

SAP Fiori 2.0 user experience (UX) design concept won
a Red Dot in the Interaction Category at the Red Dot Award:
Design Concept 2015

Responsiveness out of the Box
https://youtu.be/t9QsGZuf4qY

Screen Sizes in 2014
https://opensignal.com/reports/2014/android-fragmentation/
Android iOS

JavaScript UI framework/library
Most current browsers and (touch) devices
Responsive design
Huge number of UI controls
MVC, data binding…
“Enterprise-grade”
Uses Open Source
With the help of SAPUI5
Became an Open Source
#OpenUI5 (as Apache 2.0)

SAPUI5 was free, but closed, yet…
 We are Open Source fans, ~30 other OS libs in UI5
 SAP community pushed for it
December 2013: Yay! OpenUI5 is born!
http://openui5.org/
https://github.com/SAP/openui5/
October 2014: Source is forkable!
https://twitter.com/OpenUI5/status/520554335215042560
The road to Open Source

21© 2014 SAP SE or an SAP affiliate company. All rights reserved.
?

At SAP we do use open source software…

At SAP we do contribute to open source projects as well!

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="OpenUI5: Step 1" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>4Developers Warsaw 2015</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script>
<script>
new sap.ui.ux3.Shell({
content: new sap.ui.commons.Button({
text:'Hello Wrocław!',
press:function(){
alert("Cześć!");
}
})
}).placeAt('content');
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Hello Bucharest!
” ”
Try at http://jsbin.com/wukiji/2/watch?html,output

The Demo Apps: https://openui5.hana.ondemand.com/#demoapps.html
Controls Exploration: https://openui5.hana.ondemand.com/explored.html
The Developer Guide:
https://openui5.hana.ondemand.com/#docs/guide/Documentation.html
Your own exploration with Demokit

Views should be easy to write, and easy to read, and easy to extend
Different view types and models should be there to meet everyone’s needs
MVC done right
Try at http://jsbin.com/heqazo/2/watch

Powered by Handlebars.js
UI5 model and data binding
Can also be used to define new controls
HTML Templating
<div id="simpleTemplate"
data-type="text/x-handlebars-
template">
<div>{{text
path="/name"}}:</div>
<ul>
{{#each path="/players"}}
<li>
{{text path="first"}}
{{text path="last"}}
</li>
{{/each}}
</ul>
</div>
Try at http://jsbin.com/kezec/4/watch

Extra quality assurance
Supportability (e.g. Ctrl-Alt-Shift-S popup)
Internationalization and right-to-left support
Accessibility
Extensibility
Theming
CDN-support (via Akamai)
Enterprise-grade

Controls can be created using JS
and OpenUI5 API
Data binding etc. out of the box
A Google Map control:
http://jsbin.com/vukara/5/watch?html,output
Note the two-way data binding!
Custom Controls

Theming in UI5
OpenUI5
makes use of .less to generate
CSS files for themes
comes with several
predefined themes
themes can differ a lot from each other,
little constraints are applied
themes can also be edited
with the Theme Designer
More at http://scn.sap.com/docs/DOC-52952

Theming

Theming at Ziggo
a Dutch cable operator
Check at http://scn.sap.com/docs/DOC-62919

Development with SAP Web IDE
Extensible development environment with a growing set of embedded tools
covering the end-to-end development process
Lets you rapidly design, build, and deploy Fiori-like web applications based
on OpenUI5
• Improved developer productivity
through wizards, templates,
and code editors
• Customize or build SAP Fiori apps
• Develop your apps once and run them
on mobile devices, or your desktop
More at http://scn.sap.com/docs/DOC-55465

Who uses OpenUI5
Danone
using UI5 and the SAP Hana Cloud Platform, e.g. for a CRM Call Center in South
Africa and the Nutricia Metabolics Web Shop
SAS
decided to do "all of their new web application development with OpenUI5"
adidas
has reported about its usage of UI5 in its dealer portal
National Center for Tumor Diseases
developed a UI5-based app called "Medical Research Insights". This product won
the "German Design Award 2015" in the category "Excellent Communications
Design"
…
http://openui5.org/whoUsesUI5.html

OpenUI5 + PhoneGap

Try.it()! Join->community;
Explore: http://OpenUI5.org
Learn it: https://open.sap.com/
@OpenUI5, #OpenUI5

Content: Christiane Kurz, Andreas Kunz and the rest of brave OpenUI5 team
Advisory: Alexander Graebe from Developer Center team
Thanks / Creative Commons

© 2014 SAP SE or an SAP affiliate company. All rights reserved.
Thank("you")
Witalij Rudnicki
SAP Developer Center
http://twitter.com/sygyzmundovych
http://scn.sap.com/people/vitaliy.rudnytskiy
http://about.me/witalij

© 2014 SAP SE or an SAP affiliate company.
All rights reserved.
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.
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. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
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 SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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/or platform 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, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

OpenUI5

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (20)

Similar to OpenUI5

Similar to OpenUI5 (20)

More from Vitaliy Rudnytskiy

More from Vitaliy Rudnytskiy (20)

Recently uploaded

Recently uploaded (20)

OpenUI5