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.

OpenUI5 - the new responsive Web UI library @ devoxx UK 2014


Published on

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, here are the slides in advance.

Published in: Software, Technology, Education
  • Sex in your area is here: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here

OpenUI5 - the new responsive Web UI library @ devoxx UK 2014

  1. 1. @OpenUI5#OpenUI5 OpenUI5 – the new responsive Web UI library Andreas Kunz @aku_dev @OpenUI5 Christiane Kurz
  2. 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. 3. @OpenUI5#OpenUI5 And now for something completely different
  4. 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. 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. 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. 7. @OpenUI5#OpenUI5 Responsiveness out of the Box
  8. 8. @OpenUI5#OpenUI5 Digging Deeper • Controls Playground (aka Demokit) • The Demo Apps • The Developer Guide • The API
  9. 9. @OpenUI5#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!
  10. 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
  11. 11. ?
  12. 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. 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
  14. 14. @OpenUI5#OpenUI5 Theming
  15. 15. Link
  16. 16. Not an official App…
  17. 17. @OpenUI5#OpenUI5
  18. 18. @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! • • •Sources not forkable yet – but soon!
  19. 19. @YourTwitterHandle#DVXFR14{session hashtag} @OpenUI5#OpenUI5
  20. 20. @OpenUI5#OpenUI5 Web: GitHub: Docs & Demos: Come to our booth for more! @OpenUI5 Thank you!
  21. 21. @YourTwitterHandle#DVXFR14{session hashtag} @OpenUI5#OpenUI5
  22. 22. @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