of 21 /21
OpenUI5 the new responsive Web UI library Frederic Berg & Andreas Kunz SAP SE

OSCON 2014: OpenUI5 - The New Responsive Web UI Library

Embed Size (px)

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!

Citation preview

Page 1: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

OpenUI5

the new responsive Web

UI library Frederic Berg & Andreas Kunz

SAP SE

Page 2: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#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

Page 3: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

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

Page 4: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#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

Page 5: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Responsiveness out of the box

Page 7: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

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

Page 8: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

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

Page 9: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

?

Page 10: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Enterprise-grade

Extra quality assurance

Supportability (e.g. Ctrl-Alt-Shift-S popup)

Internationalization and right-to-left support

Accessibility

Extensibility

Theming

Page 11: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#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

Page 12: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Theming

Page 13: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Page 14: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Page 15: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Page 16: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Page 17: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Page 18: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Not an official app… http://localhost:8080/pacman/

Quickly play and explain how pacman and ghosts are actual controls etc.

Page 19: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

#OpenUI5

Page 20: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

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

Page 21: OSCON 2014: OpenUI5 - The New Responsive Web UI Library

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