OpenUI5

Vitaliy @Sygyzmundovych Rudnytskiy

TopConf Bucharest, Sep 2015

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 2 Public

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

http://developers.sap.com/


Let me take you on a journey back in time to SAPGUI…

htt

p:/

/ww

w.s

ap

de

sig

ngu

ild.o

rg/g

ood

ies/r

3_

his

tory

.asp

http://www.sapdesignguild.org/goodies/r3_history.asp

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

https://openui5.hana.ondemand.com/LICENSE.txt





http://openui5.org/

https://github.com/SAP/openui5/



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

?


At SAP we do use open source software…

http://images.google.com/imgres?imgurl=http://www.hostgatorhosting.net/wp-content/uploads/2009/10/mysql.jpg&imgrefurl=http://www.hostgatorhosting.net/&usg=__MHGsnQJ7dLoZNRIdlC4St5AZKnw=&h=291&w=500&sz=42&hl=de&start=13&um=1&itbs=1&tbnid=kB9XD4caKi9rJM:&tbnh=76&tbnw=130&prev=/images?q=mysql+ab&um=1&hl=de&sa=N&tbs=isch:1

http://images.google.com/imgres?imgurl=http://blogs.zdnet.com/security/images/red_hat_logo_big.jpg&imgrefurl=http://blogs.zdnet.com/security/?p=1784&usg=__Q0A5Wr7to5WJ8CKutVGWnYeJNL4=&h=396&w=360&sz=63&hl=de&start=1&um=1&itbs=1&tbnid=mw3P22rAAis9PM:&tbnh=124&tbnw=113&prev=/images?q=red+hat&um=1&hl=de&sa=N&tbs=isch:1


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

https://www.youtube.com/watch?v=PQaZqxVtln4


<!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

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

https://openui5.hana.ondemand.com/demoapps.html

https://openui5.hana.ondemand.com/demoapps.html

https://openui5.hana.ondemand.com/explored.html

https://openui5.hana.ondemand.com/explored.html

https://openui5.hana.ondemand.com/docs/guide/Documentation.html

https://openui5.hana.ondemand.com/docs/guide/Documentation.html


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

http://jsbin.com/openui5-mvc-worldcupsample/2/edit

http://jsbin.com/heqazo/2/watch

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

http://jsbin.com/kezec/4/watch

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

http://localhost:8080/themedesigner

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








© 2014 SAP SE or an SAP affiliate company. All rights reserved. 40 Public Link

https://ptjsaf06a467e.hana.ondemand.com/sap/pt/cockpit/client/build/client.html




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

http://openui5.org/

http://openui5.org/

http://openui5.org/

http://openui5.org/

http://openui5.org/

http://openui5.org/

https://open.sap.com/




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




http://scn.sap.com/people/vitaliy.rudnytskiy




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

http://global12.sap.com/corporate-en/legal/copyright/index.epx



OpenUI5

Software

sap se

sap affiliate company

new sap

sap fiori

ui5 sap community

public sapui5

public disclaimer

public lets