build responsive enterprise-grade web apps with openui5
Post on 08-Aug-2015
207 Views
Preview:
TRANSCRIPT
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
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
top related