openui5 - the new responsive web ui library @ devoxx uk 2014
DESCRIPTION
OpenUI5 is a comprehensive enterprise-grade HTML5 UI library (developed by SAP) which has recently entered the Open Source world. As the developers, we want to demonstrate how you can easily develop responsive web apps that adapt to any current browser and device, from desktop screen to smartphones. 180 controls organized in different libraries are ready to be used within your own applications! Business software maker SAP relies on OpenUI5 for mission-critical applications and you will learn how you profit from SAP’s investment by getting built-in support for 37 languages and 575 locales, accessibility, right-to-left support and more for free. And all of this is based on popular Open Source libraries like jQuery, datajs, LESS, Handlebars, Crossroads, iScroll and others. NOTE: the original presentation contained live coding and demos for key features like the responsive design, declarative UIs and data binding. A full replay of the presentation will be available soon on parleys.com, here are the slides in advance.TRANSCRIPT
@OpenUI5 #OpenUI5
OpenUI5 – the new responsive Web UI library
Andreas Kunz
@aku_dev
@OpenUI5
Christiane Kurz
http://openui5.org
@OpenUI5 #OpenUI5
OpenUI5 – the new responsive Web UI library
•Christiane Kurz
• Senior Developer for UI5
Core/Desktop at SAP
• With UI5 since 2012
• Started developing web
apps when Netscape
Navigator was still alive
•Andreas Kunz
• Architect for UI5 Mobile at
SAP
• With UI5 since its inception
• Open Source fan,
contributed to Mozilla
before Firefox was born
@OpenUI5 #OpenUI5
And now
for something
completely different
@OpenUI5 #OpenUI5
OpenUI5
•JavaScript UI library
•Huge number of UI controls
•MVC, data binding, templating, …
•“Enterprise-grade”
•Most current browsers and (touch) devices
•Responsive design
• Is Open Source, uses Open Source
@OpenUI5 #OpenUI5
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello devoxxUK</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.ux3'></script>
<script>
new sap.ui.ux3.Shell({
content: new sap.ui.commons.Button({text:'Hello devoxxUK'})
}).placeAt('content'); </script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
“Hello devoxxUK”
Try it live at JS Bin
@OpenUI5 #OpenUI5
MVC done right
•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
@OpenUI5 #OpenUI5
Digging Deeper
• Controls Playground (aka Demokit)
• The Demo Apps
• The Developer Guide
• The API
@OpenUI5 #OpenUI5
Custom Controls
• Controls can be defined on-the-fly in JS
• Data binding etc. out of the box
• A simple control:
• http://jsbin.com/openui5-control/2/edit
• A Google Map control:
• http://jsbin.com/openui5-map-db/2/edit
• Note the two-way data binding!
@OpenUI5 #OpenUI5
HTML Templating
• Powered by Handlebars.js
• UI5 model and data binding
• Can also be used to define
new controls
<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/openui5-html-templating/1/edit
?
@OpenUI5 #OpenUI5
“Enterprise-grade”
•Extra quality assurance
•Supportability (e.g. Ctrl-Alt-Shift-S popup)
• Internationalization and right-to-left support
•Accessibility
•Extensibility
•Theming
@OpenUI5 #OpenUI5
Theming in UI5
OpenUI5
• makes use of .less to generate
CSS files for themes
• comes with several predefined
themes (including HCB)
• themes can differ a lot from each
other, little constraints are applied
• themes can also be edited with the
Theme Designer
@OpenUI5 #OpenUI5
Theming
Not an official App…
@OpenUI5 #OpenUI5
@OpenUI5 #OpenUI5
Open Source
•SAPUI5 was closed, but…
•We are Open Source fans, ~30 other OS libs in UI5
•SAP community pushed for it
•December 11th, 2013: Yay! OpenUI5 is born!
•http://openui5.org/
•https://github.com/SAP/openui5/
•Sources not forkable yet – but soon!
@YourTwitterHandle #DVXFR14{session hashtag} @OpenUI5 #OpenUI5
@OpenUI5 #OpenUI5
Web: http://openui5.org
GitHub: http://sap.github.io/openui5
Docs & Demos: https://openui5.hana.ondemand.com
Come to our booth for more!
@OpenUI5
Thank you!
@YourTwitterHandle #DVXFR14{session hashtag} @OpenUI5 #OpenUI5
@OpenUI5 #OpenUI5
Thanks / Creative Commons
•Presentation Template — Guillaume LaForge
•The Queen — A prestigious heritage with some
inspiration from The Sex Pistols and funny Devoxxians
•Girl with a Balloon — Banksy
•Tube — Michael Keen