Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OSCON 2014: OpenUI5 - The New Responsive Web UI Library


Published on

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!

Published in: Software
  • Sex in your area is here: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here

OSCON 2014: OpenUI5 - The New Responsive Web UI Library

  1. 1. OpenUI5 the new responsive Web UI library Frederic Berg & Andreas Kunz SAP SE
  2. 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. 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. 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. 5. #OpenUI5 Responsiveness out of the box
  6. 6. #OpenUI5 Digging deeper – The Documentation  Controls Playground (aka Demokit)  The Demo Apps  The Developer Guide  The API
  7. 7. #OpenUI5 Custom Controls  Controls can be defined on-the-fly in JS  Data binding etc. out of the box  A simple control:  A Google Map control:  Note the two-way data binding!
  8. 8. #OpenUI5 HTML Templating  Powered by Handlebars.js  UI5 model and data binding  Can also be used to define new controls  Simple example: 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. 9. #OpenUI5 ?
  10. 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. 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. 12. #OpenUI5 Theming
  13. 13. #OpenUI5
  14. 14. #OpenUI5
  15. 15. #OpenUI5
  16. 16. #OpenUI5
  17. 17. #OpenUI5
  18. 18. #OpenUI5 Not an official app… http://localhost:8080/pacman/ Quickly play and explain how pacman and ghosts are actual controls etc.
  19. 19. #OpenUI5
  20. 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!    Sources not forkable yet – but soon!
  21. 21. #OpenUI5 Web: GitHub: Docs & Demos: Come to our booth for more! @OpenUI5 Thank you!