openui5 - the new responsive web ui library @ devoxx uk 2014

26
@OpenUI5 #OpenUI5 OpenUI5 the new responsive Web UI library Andreas Kunz @aku_dev @OpenUI5 Christiane Kurz http://openui5.org

Upload: andreas-kunz

Post on 10-May-2015

1.460 views

Category:

Software


2 download

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

Page 1: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@OpenUI5 #OpenUI5

OpenUI5 – the new responsive Web UI library

Andreas Kunz

@aku_dev

@OpenUI5

Christiane Kurz

http://openui5.org

Page 2: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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

Page 3: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@OpenUI5 #OpenUI5

And now

for something

completely different

Page 4: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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

Page 5: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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

Page 6: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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

Page 7: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@OpenUI5 #OpenUI5

Responsiveness out of the Box

Page 9: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

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

Page 10: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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

Page 11: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

?

Page 12: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@OpenUI5 #OpenUI5

“Enterprise-grade”

•Extra quality assurance

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

• Internationalization and right-to-left support

•Accessibility

•Extensibility

•Theming

Page 13: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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

Page 14: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@OpenUI5 #OpenUI5

Theming

Page 15: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014
Page 16: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014
Page 18: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014
Page 19: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014
Page 20: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

Not an official App…

Page 21: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@OpenUI5 #OpenUI5

Page 22: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

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

Page 23: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@YourTwitterHandle #DVXFR14{session hashtag} @OpenUI5 #OpenUI5

Page 24: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

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

Page 25: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@YourTwitterHandle #DVXFR14{session hashtag} @OpenUI5 #OpenUI5

Page 26: OpenUI5 - the new responsive Web UI library  @  devoxx UK 2014

@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