OSCON 2014: OpenUI5 - The New Responsive Web UI Library
OpenUI5, a powerful web UI library has recently entered the Open Source world. As the developers, we want to introduce you to it and demonstrate how you can easily develop responsive web apps that run on and adapt to any current browser and device. You will get an overview of the unique feature set: responsiveness across all platforms along with declarative UIs, data binding with direct OData, JSON and XML support, Model-View-Controller concepts and 180 UI controls organized in different libraries. 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. We will outline our quality strategy, which includes automated screenshot comparisons, build-on-submit with compatibility validation – and a huge pile of actual touch devices. Being Open Source fans, the UI5 developers have used and integrated many OS libraries. Lean how jQuery, datajs, LESS, Handlebars, Crossroads, iScroll and others are used and how the Open Source enthusiasm has infected the SAP ecosystem and how it internally caused a welcome cultural change. Think this is going to be a typically dry enterprise software session? Think again! Come along and see a ton of different OpenUI5 apps, and some serious live coding!
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (10)
Similar to OSCON 2014: OpenUI5 - The New Responsive Web UI Library
Similar to OSCON 2014: OpenUI5 - The New Responsive Web UI Library (20)
Recently uploaded
Recently uploaded (20)
OSCON 2014: OpenUI5 - The New Responsive Web UI Library
- 1. OpenUI5 the new responsive Web UI library Frederic Berg & Andreas Kunz SAP SE
- 2. #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
- 3. #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>
- 4. #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
- 5. #OpenUI5 Responsiveness out of the box
- 6. #OpenUI5 Digging deeper – The Documentation Controls Playground (aka Demokit) The Demo Apps The Developer Guide The API
- 7. #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!
- 8. #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>
- 9. #OpenUI5 ?
- 10. #OpenUI5 Enterprise-grade Extra quality assurance Supportability (e.g. Ctrl-Alt-Shift-S popup) Internationalization and right-to-left support Accessibility Extensibility Theming
- 11. #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
- 12. #OpenUI5 Theming
- 13. #OpenUI5
- 14. #OpenUI5
- 15. #OpenUI5
- 16. #OpenUI5
- 17. #OpenUI5
- 18. #OpenUI5 Not an official app… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
- 19. #OpenUI5
- 20. #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!
- 21. #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!