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@JSNext Bulgaria 2014

757 views

Published on

OpenUI5 is a powerful web UI library from SAP that has recently entered the open source world.

We want to introduce you to it and demonstrate how you can easily develop enterprise-grade responsive web applications 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.

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

OpenUI5@JSNext Bulgaria 2014

  1. 1. What is OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 askQuestion(); ?
  2. 2. Sofia Nov 23, 2014 var title = “OpenUI5 – all you need for enterprise ready apps”; var info = { name: “Stanislava Baltova, Petya Begovska, Peter Skelin”, otherOptional: “SAP Labs Bulgaria” };
  3. 3. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 agenda(); • What is OpenUI5 • App Architecture Overview and Concepts • Responsiveness out of the box • Digging Deeper • Custom Controls • Enterprise Ready • Summary • Q&A
  4. 4. What is OpenUI5 OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 JavaScript UI library Huge number of UI controls MVC, data binding, templating, … Enterprise-grade Responsive design Modern browsers and (touch) devices Is Open Source, uses Open Source
  5. 5. We are now Open Source data.js OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 • Free to use • Fueled by jQuery, data.js and more • Open to community feedback and bug reports • Open for contributions • Updated frequently • http://openui5.org iScroll
  6. 6. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  7. 7. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 MVC Views XML, JS, HTML,… Controllers Models JSON, XML or oData data binding user action update update notify
  8. 8. UI5 Control / Output UI5 Control / Output OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Data Binding • DATA BINDING • TWO-WAY-BINDING App data application)dat+a has)been)updated+ John Doe Age: 36 John Doe, 35 Resulting UI5 Control / Output App data updated John Doe, 36 John Doe Age: 35 App data application)dat+a has)been)updated+ John Doe Age: 36 John Doe, 35 UI5 Control / Output updated John Doe, 36 John Doe Age: 35 Resulting app data
  9. 9. App Architecture overview and concepts index.html (Single Page Application) OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  10. 10. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
  11. 11. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
  12. 12. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
  13. 13. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { }); </script> </head> <body> <div id="content"></div> </body> </html>
  14. 14. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  15. 15. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { new sap.ui.core.ComponentContainer("ProductsComponent").placeAt("content"); }); </script> </head> <body> <div id="content"></div> </body> </html>
  16. 16. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { new sap.ui.core.ComponentContainer("ProductsComponent").placeAt("content"); }); </script> </head> <body> <div id="content"></div> </body> </html>
  17. 17. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 index.html <!DOCTYPE HTML> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-­‐ui-­‐core.js"></script> <script> sap.ui.getCore().attachInit(function() { new sap.ui.core.ComponentContainer("ProductsComponent").placeAt("content"); }); </script> </head> <body> <div id="content"></div> </body> </html>
  18. 18. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
  19. 19. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
  20. 20. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
  21. 21. Component.js sap.ui.core.UIComponent.extend("ProductsComponent", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 metadata : { name : "Product Browser", version : "1.0", rootView : "App",
  22. 22. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  23. 23. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js init : function() { // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl); this.setModel(oModel); }
  24. 24. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js init : function() { // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl); this.setModel(oModel); }
  25. 25. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  26. 26. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js routing : { routes : [ { pattern : "", view : "Master", subroutes : [ { pattern : "product/{productId}/:tab:", view : "Detail" } ] } ] }
  27. 27. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Component.js routing : { routes : [ { pattern : "", view : "Master", subroutes : [ { pattern : "product/{productId}/:tab:", view : "Detail" } ] } ] }
  28. 28. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  29. 29. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  30. 30. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  31. 31. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  32. 32. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  33. 33. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  34. 34. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  35. 35. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  36. 36. Master.view.xml <List items="{/Products}" <items> <ObjectListItem press="onSelect" title="{Name}" numberUnit="USD"> </ObjectListItem> </items> </List> OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  37. 37. Master.controller.js sap.ui.Controller.extend("Master", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
  38. 38. Master.controller.js sap.ui.Controller.extend("Master", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
  39. 39. Master.controller.js sap.ui.Controller.extend("Master", { OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 onSelect : function(oEvent) { // Get the list item from the listItem parameter this.showDetail(oEvent.getParameter("listItem")); } });
  40. 40. App Architecture overview and concepts OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  41. 41. Dependency Management Make it modular and reusable // Require/Declare for JavaScript files Have it in any language you like // Resource Bundles Single file for production OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 // Grunt
  42. 42. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  43. 43. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  44. 44. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  45. 45. Responsiveness out of the box OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  46. 46. Digging Deeper Ė ĺ Ĥ Ń OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Controls Playground The Demo Apps The Developer Guide The API
  47. 47. 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 OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  48. 48. Enterprise Ready • Supportability (e.g. Ctrl-Alt-Shift-S popup) • Internationalization and right-to-left support • Highest quality • Extensibility • Theming • Accessibility OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  49. 49. OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Theming
  50. 50. Accessibility High Contrast Black theme Keyboard Handling Screen Reader support Accessibility refers to the possibility for everyone, including and especially people with disabilities, to access and use technology and information products. More than 1 billion people in the world have some form of disability.
  51. 51. 180+ controls OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Summary Open Source // Free for any use and contribution ONE Responsive Lib // Across browsers and devices Enterprise Ready Powerful Development Concepts // MVC, data binding, templating…
  52. 52. Thank you! OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Web: GitHub: Docs & Demos: Twitter: http://openui5.org https://github.com/SAP/openui5/ https://openui5.hana.ondemand.com @OpenUI5
  53. 53. Upcoming events ISTA Conference 26-27 November http://istabg.org/ STAY TUNED FOR 2015: Azure Bootcamp http://azure-camp.eu/ UXify Bulgaria http://uxify.org/ SQLSaturday https://www.sqlsaturday.com/ and more js.next(); OpenUI5 – all you need for enterprise ready apps Nov 23, 2014
  54. 54. Thanks to our Sponsors: OpenUI5 – all you need for enterprise ready apps Nov 23, 2014 Diamond Sponsor: Hosting partner: Gold Sponsors: Silver Sponsors: Technological Partners: Bronze Sponsors: Swag Sponsors: Media Partners:

×