Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UI5con Lessons Learned from SAP UI5 Implementations

1.816 Aufrufe

Veröffentlicht am

After various projects in different size and complexity we want to present and discuss our challenges we had while designing and developing with UI5

Veröffentlicht in: Technologie

UI5con Lessons Learned from SAP UI5 Implementations

  1. 1. © cbs Corporate Business Solutions Lessons Learned from SAP UI5 Implementations Denny Schreber Katrin Grohme
  2. 2. © cbs Corporate Business Solutions March 15, 2016 Agenda • Introduction • Starting the UI5 project • Pitfalls during UI5 development • UI5 Framework extensions • Outlook & Wrap-up
  3. 3. © cbs Corporate Business Solutions 3March 15, 2016 Overview Introduction • After various projects in different size and complexity we want to present and discuss our challenges we had while designing and developing with UI5 › Approach how we tackle projects › Designing your screens with standard controls vs. custom controls › Facing integration challenges with different backend systems › Difficulties in the development phase • Give an outlook into areas where we hope that UI5 advances in upcoming releases
  4. 4. © cbs Corporate Business Solutions 4March 15, 2016 UI5 projects Introduction • Worked with UI5 as UI technology since 2013 › First UI5-based app went live with v1.12 › Lots of improvements since then • Projects based on SAPUI5 libraries › One openUI5 project because of licensing • We try to be full stack developer instead of distinguishing between Frontend / Backend Developer • From either ABAP or Java-based software development background Source: SAP
  5. 5. © cbs Corporate Business Solutions March 15, 2016 Agenda • Introduction • Starting the UI5 project • Pitfalls during UI5 development • UI5 Framework extensions • Outlook & Wrap-up
  6. 6. © cbs Corporate Business Solutions 6March 15, 2016 Achieve a Great UX leveraging UI5 Starting the UI5 project • Users describe great apps as: › Simple, easy to use, consistent, supportive, … • Various approaches exist › SAP gives lots of advice how to achieve a great user experience › Fiori Design Principles: Available under http://experience.sap.com/fiori-design/ • Early user involvement is key › Try to gain early feedback from key user and – if possible – larger user groups • Designer needs to be aligned with developers Source: SAP
  7. 7. © cbs Corporate Business Solutions 7March 15, 2016 UI First Approach Starting the UI5 project • Start building UI prototypes prior to API or back-end logic • Target user groups get identified early in the project • Results of UI prototyping can be the basis for the Fiori app • Detailed functional specification and first technical specification are results of this phase • Why UI First in SAP landscapes? › Projects require fit-to-purpose solutions as opposed to, e.g., standard software › Functionality already exists (at least partially) in SAP systems › The end user is what matters most in Fiori projects Source: SAP UI First
  8. 8. © cbs Corporate Business Solutions 8March 15, 2016 Starting Point: Mobile Approvals Starting the UI5 project • UI5 offers the possibility to be used on mobile devices › responsive design › Optimized for touch-based input devices • Approvals are often seen as a necessary pain by approvers • Mobile access adds possibility to do approvals while on the move • Limit the number of required steps to achieve approval Source: SAP
  9. 9. © cbs Corporate Business Solutions March 15, 2016 Agenda • Introduction • Starting the UI5 project • Pitfalls during UI5 development • UI5 Framework extensions • Outlook & Wrap-up
  10. 10. © cbs Corporate Business Solutions 10March 15, 2016 Project Reality Pitfalls during UI5 development • Decision for enhancement model not always straightforward › Extending Fiori app with new project that replaces parts of the original app • Upgrades do not always work seamlessly › Copy original project as basis for new development • Increased effort when upgrading standard apps • Decision for control library › Mobile controls – GoTo library › Desktop controls – provide good alternatives for complex data entry handling
  11. 11. © cbs Corporate Business Solutions 11March 15, 2016 Connecting the backend Pitfalls during UI5 development • In UI5 development lots of time is spent formulating OData expressions • SAP Gateway for ABAP-based systems › Stable in most of the cases and easy-to-develop › When you’re stuck: Don’t look into the OData specifications but SAP Note 1574568 • SAPUI5 screens on BPM using the screen generator functionality (Java) › Odata services are generated › Generated screens still require effort to pimp them up • HANA XS Engine • Development only in Eclipse (Luna), WebIDE not possible • Synchronization errors from within Eclipse and HANA XS engine • OData Provisioning Channel on HCI › Not released yet
  12. 12. © cbs Corporate Business Solutions 12March 15, 2016 HANA XS Engine Pitfalls during UI5 development
  13. 13. © cbs Corporate Business Solutions 13March 15, 2016 JavaScript peculiarities Pitfalls during UI5 development • Functional programming in dynamically typed JavaScript › Playing around with a pure functional programming language helps • Handling callback hell › Makes debugging hard, be careful to organize your code › jQuery proxy function  Learned at UI5con that promises are better! • Transferring state • Better readability of source code › Aligning results of several AJAX calls vs. $Batch • Recursions with time-based exit criteria • Handling of large code sections › JavaScript makes finding errors hard › jQuery module declarations to separate code blocks
  14. 14. © cbs Corporate Business Solutions 14March 15, 2016 Further Pitfalls Pitfalls during UI5 development • Firefox with Developer Tools and VIZ chart library are no friends -> use Chrome • To make the look’n’feel consistent browser version still play a role and might add effort • Mouse-Over Pop-ups are not working on mobile devices › Spent lots of effort to extend the standard controls with touch events • Not double-checked in latest versions
  15. 15. © cbs Corporate Business Solutions March 15, 2016 Agenda • Introduction • Starting the UI5 project • Pitfalls during UI5 development • UI5 Framework extensions • Outlook & Wrap-up
  16. 16. © cbs Corporate Business Solutions 16March 15, 2016 Custom Controls & Third Party libraries UI5 Framework extensions • Requirements might exceed framework capabilities › More than hiding and adding fields › Custom controls sometimes required • Extending existing controls • Create Custom Controls • Integration of 3rd Party libraries › Not always consistent with SAPUI5 look’n’feel › Sometimes lots of work to get this working
  17. 17. © cbs Corporate Business Solutions 17March 15, 2016 Examples UI5 Framework extensions Internet Explorer Firefox Chrome
  18. 18. © cbs Corporate Business Solutions 18March 15, 2016 Examples (cont.) UI5 Framework extensions • Custom Controls “in the wild” • GitHub › https://gist.github.com/dennisseah • openUI5? Signature Pad Control (https://gist.github.com/dennisseah/c4d0ee8100d07ecd8015)
  19. 19. © cbs Corporate Business Solutions March 15, 2016 Agenda • Introduction • Starting the UI5 project • Pitfalls during UI5 development • UI5 Framework extensions • Outlook & Wrap-up
  20. 20. © cbs Corporate Business Solutions 20March 15, 2016 Outlook Outlook & Wrap-up • Developing with UI5 is fun • Lots of improvements already delivered with the latest versions But some areas still can be improved / simplified (our wish list): • Reduce Complexity (Routing, Apps patterns, development time) • Improvements in the area of handling state in the apps • Offline capabilities of Web Apps • More controls… pushing the web browser to its limits
  21. 21. © cbs Corporate Business Solutions 21March 15, 2016 Wrap-up Outlook & Wrap-up • From our project experience end user really like what they get with UI5-based apps • SAPUI5 is not the new “silver-bullet” of UI technologies • SAPUI5 requires different approaches compared to server-based UI technologies • Projects are about business problems getting solved, but don’t forget the people that should be able to solve the problem effectively • Web best practices from web companies such as Google should be applied in your projects
  22. 22. © cbs Corporate Business Solutions cbs Corporate Business Solutions Unternehmensberatung GmbH The Materna Group Management Consultancy Headquarters Heidelberg Im Breitspiel 19 · 69126 Heidelberg · Germany P +49 6221 3304 0 · F +49 6221 3304 200 contact@cbs-consulting.de www.cbs-consulting.com Contact March 15, 2016 Denny Schreber Senior Solution Architect denny.schreber@cbs-consulting.de Katrin Grohme Senior Solution Developer katrin.grohme@cbs-consulting.de

×