oscon 2014: openui5 - the new responsive web ui library
DESCRIPTION
OpenUI5, a powerful web UI library has recently entered the Open Source world. As the developers, we want to introduce you to it and demonstrate how you can easily develop responsive web apps that run on and adapt to any current browser and device. You will get an overview of the unique feature set: responsiveness across all platforms along with declarative UIs, data binding with direct OData, JSON and XML support, Model-View-Controller concepts and 180 UI controls organized in different libraries. 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. We will outline our quality strategy, which includes automated screenshot comparisons, build-on-submit with compatibility validation – and a huge pile of actual touch devices. Being Open Source fans, the UI5 developers have used and integrated many OS libraries. Lean how jQuery, datajs, LESS, Handlebars, Crossroads, iScroll and others are used and how the Open Source enthusiasm has infected the SAP ecosystem and how it internally caused a welcome cultural change. Think this is going to be a typically dry enterprise software session? Think again! Come along and see a ton of different OpenUI5 apps, and some serious live coding!TRANSCRIPT
OpenUI5
the new responsive Web
UI library Frederic Berg & Andreas Kunz
SAP SE
#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
“Hello OSCON”
Try it live at JS Bin
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello OSCON</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 OSCON'})
}).placeAt('content'); </script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
#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
Digging deeper – The Documentation
Controls Playground (aka Demokit)
The Demo Apps
The Developer Guide
The API
#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
HTML Templating
Powered by Handlebars.js
UI5 model and data binding
Can also be used to define
new controls
Simple example:
http://jsbin.com/openui5-html-
templating/1/edit
<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>
#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
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
#OpenUI5
Theming
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
Not an official app… http://localhost:8080/pacman/
Quickly play and explain how pacman and ghosts are actual controls etc.
#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!
#OpenUI5
Web: http://openui5.org
GitHub: https://github.com/SAP/openui5/
Docs & Demos: https://openui5.hana.ondemand.com
Come to our booth for more!
@OpenUI5
Thank you!