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


Top Related