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.

4Developers 2015: Responsywne aplikacje web'owe z użyciem OpenUI5 - Witalij Rudnicki

214 views

Published on

Witalij Rudnicki

Language: Polish

OpenUI5 to rozbudowana biblioteka JavaScript/HTML5/CSS3 do tworzenia UI, która niedawno dołączyła do świata Open Source. Dołącz, by dowiedzieć się, jak zacząć budować responsywne applikacje działające na różnych przeglądarkach i urządzeniach.

Published in: Software
  • Be the first to comment

  • Be the first to like this

4Developers 2015: Responsywne aplikacje web'owe z użyciem OpenUI5 - Witalij Rudnicki

  1. 1. Witalij @Sygyzmundovych Rudnicki 4Developers, Warszawa, April 2015
  2. 2. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 2Public Let’s start with… … me :) Witalij Rudnicki (as well Vitaliy Rudnytskiy) @Sygyzmundovych [sygyƷmuːndɔvytʃ] SAP’s Developer Center team - developers.sap.com Based in Wrocław, Poland
  3. 3. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 8Public Disclaimer This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.
  4. 4. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 9Public Let me take you on a journey back in time to SAPGUI… http://www.sapdesignguild.org/goodies/r3_history.asp
  5. 5. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 11Public …and now fast-forward to SAP Fiori
  6. 6. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 12Public Responsiveness out of the Box https://youtu.be/t9QsGZuf4qY
  7. 7. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 14Public JavaScript UI framework/library Most current browsers and (touch) devices Responsive design Huge number of UI controls MVC, data binding… “Enterprise-grade” Uses Open Source With the help of SAPUI5 Became an Open Source #OpenUI5 (as Apache 2.0)
  8. 8. 15© 2014 SAP SE or an SAP affiliate company. All rights reserved. ?
  9. 9. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 16Public At SAP we do use open source software…
  10. 10. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 17Public At SAP we do contribute to open source projects as well!
  11. 11. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 21Public SAPUI5 was free, but closed, yet…  We are Open Source fans, ~30 other OS libs in UI5  SAP community pushed for it December 2013: Yay! OpenUI5 is born! http://openui5.org/ https://github.com/SAP/openui5/ October 2014: Source is forkable! https://twitter.com/OpenUI5/status/520554335215042560 The road to Open Source
  12. 12. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 23Public <!DOCTYPE html> <html> <head> <meta name="description" content="OpenUI5: Step 1" /> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>4Developers Warsaw 2015</title> <script id='sap-ui-bootstrap' type='text/javascript' src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script> <script> new sap.ui.ux3.Shell({ content: new sap.ui.commons.Button({ text:'Hello Wrocław!', press:function(){ alert("Cześć!"); } }) }).placeAt('content'); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html> Hello Warsaw! ” ” Try at http://jsbin.com/wukiji/2/watch?html,output
  13. 13. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 24Public The Demo Apps: https://openui5.hana.ondemand.com/#demoapps.html Controls Exploration: https://openui5.hana.ondemand.com/explored.html The Developer Guide: https://openui5.hana.ondemand.com/#docs/guide/Documentation.html Your own exploration with Demokit
  14. 14. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 25Public 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 MVC done right Try at http://jsbin.com/heqazo/2/watch
  15. 15. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 26Public Powered by Handlebars.js UI5 model and data binding Can also be used to define new controls HTML Templating <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 http://jsbin.com/kezec/4/watch
  16. 16. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 27Public Extra quality assurance Supportability (e.g. Ctrl-Alt-Shift-S popup) Internationalization and right-to-left support Accessibility Extensibility Theming CDN-support (via Akamai) Enterprise-grade
  17. 17. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 28Public Controls can be created using JS and OpenUI5 API Data binding etc. out of the box A Google Map control: http://jsbin.com/vukara/5/watch?html,output Note the two-way data binding! Custom Controls
  18. 18. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 29Public 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 Try at https://themedesigner.hanatrial.ondemand.com/
  19. 19. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 30Public Theming
  20. 20. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 31Public Theming at Ziggo a Dutch cable operator Check at http://scn.sap.com/docs/DOC-62919
  21. 21. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 32Public Development with SAP Web IDE Extensible development environment with a growing set of embedded tools covering the end-to-end development process Lets you rapidly design, build, and deploy Fiori-like web applications based on OpenUI5 • Improved developer productivity through wizards, templates, and code editors • Customize or build SAP Fiori apps • Develop your apps once and run them on mobile devices, or your desktop
  22. 22. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 33Public
  23. 23. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 34Public
  24. 24. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 35Public Link
  25. 25. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 36Public
  26. 26. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 37Public
  27. 27. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 39Public Who uses OpenUI5 Danone using UI5 and the SAP Hana Cloud Platform, e.g. for a CRM Call Center in South Africa and the Nutricia Metabolics Web Shop SAS decided to do "all of their new web application development with OpenUI5" adidas has reported about its usage of UI5 in its dealer portal National Center for Tumor Diseases developed a UI5-based app called "Medical Research Insights". This product won the "German Design Award 2015" in the category "Excellent Communications Design" … http://openui5.org/whoUsesUI5.html
  28. 28. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 40Public OpenUI5 + PhoneGap
  29. 29. Try.it()! Join->community; Explore: http://OpenUI5.org Learn it: https://open.sap.com/ @OpenUI5, #OpenUI5
  30. 30. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 42Public Content: Christiane Kurz, Andreas Kunz and the rest of brave OpenUI5 team Advisory: Alexander Graebe from Developer Center team Thanks / Creative Commons
  31. 31. © 2014 SAP SE or an SAP affiliate company. All rights reserved. Thank("you") Witalij Rudnicki SAP Developer Center http://twitter.com/sygyzmundovych http://scn.sap.com/people/vitaliy.rudnytskiy http://about.me/witalij
  32. 32. © 2014 SAP SE or an SAP affiliate company. All rights reserved. 44Public © 2014 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

×