OpenUI5
the new responsive Web
UI library
Frederic Berg & Andreas Kunz
SAP SE
#OpenUI5
OpenUI5
 JavaScript UI library
 Huge number of UI controls
 MVC, data binding, templating, …
 Enterprise-grad...
#OpenUI5
“Hello OSCON”
Try it live at JS Bin
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=e...
#OpenUI5
MVC done right
 Views should be easy to write, and easy to read, and easy to extend
 Different view types and m...
#OpenUI5
Responsiveness out of the box
#OpenUI5
Digging deeper – The Documentation
 Controls Playground (aka Demokit)
 The Demo Apps
 The Developer Guide
 Th...
#OpenUI5
Custom Controls
 Controls can be defined on-the-fly in JS
 Data binding etc. out of the box
 A simple control:...
#OpenUI5
HTML Templating
 Powered by Handlebars.js
 UI5 model and data binding
 Can also be used to define
new controls...
#OpenUI5
?
#OpenUI5
Enterprise-grade
 Extra quality assurance
 Supportability (e.g. Ctrl-Alt-Shift-S popup)
 Internationalization ...
#OpenUI5
Theming in UI5
OpenUI5
 makes use of LESS to generate
CSS files for themes
 comes with several predefined
theme...
#OpenUI5
Theming
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
#OpenUI5
Not an official app…
http://localhost:8080/pacman/
Quickly play and explain how pacman and ghosts are actual cont...
#OpenUI5
#OpenUI5
Open Source
 SAPUI5 was closed, but…
 We are Open Source fans, ~30 other OS libs in UI5
 SAP community pushed ...
#OpenUI5
Web: http://openui5.org
GitHub: https://github.com/SAP/openui5/
Docs & Demos: https://openui5.hana.ondemand.com
C...
Nächste SlideShare
Wird geladen in …5
×

OSCON 2014: OpenUI5 - The New Responsive Web UI Library

3.017 Aufrufe

Veröffentlicht am

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!

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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: 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. 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. 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!  http://openui5.org/  https://github.com/SAP/openui5/  Sources not forkable yet – but soon!
  21. 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!

×