Build responsive enterprise-grade web apps with OpenUI5

Build responsive enterprise-grade

web apps with OpenUI5

Andreas Kunz (SAP). @aku_dev

http://www.openui5.org

OpenUI5 – What’s that?JavaScript UI library200+ UI controlsMVC, data binding, templating, …Most current browsers and devicesResponsive designEnterprise-gradeIs Open Source, uses Open Source

Responsiveness

Hello Fluent!<!DOCTYPE html><html><head>

<meta http-equiv='X-UA-Compatible' content='IE=edge' /><title>Hello Fluent</title>

<script id='sap-ui-bootstrap' type='text/javascript'src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'data-sap-ui-theme='sap_goldreflection'data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script>

<script>

new sap.ui.ux3.Shell({content: new sap.ui.commons.Button({text:'Hello Fluent!'})

}).placeAt('content');</script>

</head><body class='sapUiBody'>

<div id='content'></div></body>

</html>

Try it live at JS Bin: http://jsbin.com/wocuxo/5/edit

MVC

ModelJSON, XML, OData

ControllerViewJS, XML, HTML, JSON

Data Binding

Interaction

Updates

Different view and model types to meet everyone’s needs

Digging deeper – The DocumentationProject homepage: http://openui5.org- The developer guide- The API documentation- The demo apps- The “Explored” app

Custom ControlsControls can be defined on-the-fly in JSData binding etc. out of the box

A simple control:http://jsbin.com/openui5-control/2/edit

A Google Map control:http://jsbin.com/tapuwu/2/editNote the two-way data binding!

HTML TemplatingPowered by Handlebars.jsPlus UI5 model and data bindingCan 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>

“Enterprise-grade”Internationalization and right-to-left support

Accessibility

Extra quality assuranceDebugging support (e.g. Ctrl-Alt-Shift-S popup)

API stability over time

Theming

ThemingUses LESS to generate CSS files Predefined themes (including High Contrast Black)Visual Theme Designer to edit themes

Theming

Nat

iona

l Cen

ter f

or T

umor

Dis

ease

s

Bangalore Football Club – Fan AppB

anga

lore

FC

Fan

App

Not an official app…

You are in good companySAS uses UI5 for all new web development and contributes to UI5

Many companies write UI5 apps: Danone, adidas, Geberit, Bilfinger Chemserv, National Center for Tumor Diseases (Germany),…

Vivid community: 2000+ posts per month at SCN forum, stackoverflow,…

“Code Jams” and other meetups all over the world

GitHub project has 5000+ commits in the last six months

Thank you!Web: http://openui5.org

GitHub: https://github.com/SAP/openui5

Docs & Demos: https://openui5.hana.ondemand.com

Come to our booth for more!

. @OpenUI5

Build responsive enterprise-grade web apps with OpenUI5

Software

Transcript of Build responsive enterprise-grade web apps with OpenUI5