OpenUI5 - the new responsive Web UI library @ devoxx UK 2014
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.
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
OpenUI5 - the new responsive Web UI library @ devoxx UK 2014
- 1. @OpenUI5#OpenUI5 OpenUI5 – the new responsive Web UI library Andreas Kunz @aku_dev @OpenUI5 Christiane Kurz http://openui5.org
- 2. @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
- 3. @OpenUI5#OpenUI5 And now for something completely different
- 4. @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
- 5. @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
- 6. @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
- 7. @OpenUI5#OpenUI5 Responsiveness out of the Box
- 8. @OpenUI5#OpenUI5 Digging Deeper • Controls Playground (aka Demokit) • The Demo Apps • The Developer Guide • The API
- 9. @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!
- 10. @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
- 11. ?
- 12. @OpenUI5#OpenUI5 “Enterprise-grade” •Extra quality assurance •Supportability (e.g. Ctrl-Alt-Shift-S popup) •Internationalization and right-to-left support •Accessibility •Extensibility •Theming
- 13. @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
- 17. Link
- 20. Not an official App…
- 21. @OpenUI5#OpenUI5
- 22. @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!
- 24. @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!
- 26. @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