4Developers 2015: Responsywne aplikacje web'owe z użyciem OpenUI5 - Witalij Rudnicki
Transcript of 4Developers 2015: Responsywne aplikacje web'owe z użyciem OpenUI5 - Witalij Rudnicki
Witalij @Sygyzmundovych Rudnicki
4Developers, Warszawa, April 2015
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 2 Public
Let’s start with…
… me :) Witalij Rudnicki
(as well Vitaliy Rudnytskiy)
@Sygyzmundovych [sygyƷmuːndɔvytʃ]
SAP’s Developer Center team
- developers.sap.com
Based in Wrocław, Poland
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 8 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.
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 9 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 11 Public
…and now fast-forward to SAP Fiori
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 12 Public
Responsiveness out of the Box
https://youtu.be/t9QsGZuf4qY
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 14 Public
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)
15 © 2014 SAP SE or an SAP affiliate company. All rights reserved.
?
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 16 Public
At SAP we do use open source software…
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 17 Public
At SAP we do contribute to open source projects as well!
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 21 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 23 Public
<!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 Warsaw! ” ”
Try at http://jsbin.com/wukiji/2/watch?html,output
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 24 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 25 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 26 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 27 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 28 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 29 Public
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
Try at https://themedesigner.hanatrial.ondemand.com/
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 30 Public
Theming
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 31 Public
Theming at Ziggo a Dutch cable operator
Check at http://scn.sap.com/docs/DOC-62919
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 32 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 33 Public
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 34 Public
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 35 Public Link
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 36 Public
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 37 Public
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 39 Public
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
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 40 Public
OpenUI5 + PhoneGap
Try.it()! Join->community; Explore: http://OpenUI5.org
Learn it: https://open.sap.com/
@OpenUI5, #OpenUI5
© 2014 SAP SE or an SAP affiliate company. All rights reserved. 42 Public
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. 44 Public
© 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.