Lesson and Learnt from my first Fiori UI5 APP

Eventually my first custom-developed Fiori UI5 APP went live before Christmas Holiday last year. I used to attend some UI5 and WEB UI projects but this was the first time that I designed UI screens, developed OData services and UI5 application.  Basically this APP is to provide search function for field technicians and supervisors to view historical orders and navigate to the order APP to check the detail.

Although it was not easy to deploy the first one, I really enjoyed the development journey. The more UI5 Development was done, the more I learnt from it and felt happy. Now it is time for me to summarize lesson and learn for future UI5 development.

Project Approach: Agile rather than ASAP

As SAP developers, we all are familiar with ASAP project methodology. But in UI5 and UX development we tend to apply Agile approach to deliver the project. It means that we will have more user requirement and experience discussion sessions during the project. Every discussion session we demo the function and collect user feedback and requirement. Then modify the APP and function and prepare for the next demo session. Eventually the developers and business user reach common agreement with the APP.

Development tool: Eclipse or WEB IDE

UI5 development beginners always ask which UI5 development tool is better, Eclipse or WEB IDE. In my opinion, WEB IDE is much better than eclipse. WEB IDE provides SAP UI5 development templates which allow you to quickly build an application project with basic function.  You do not need to spend a lot time to consider syntax and project structure. As WEB IDE set up testing connection with Backend gateway system, you are able to test your UI5 development function directly with WEB IDE .But with Eclipse you need to deploy the development to the gateway system first then conduct testing, which waste some times.

More ABAP Less UI5

As SAP UI5 solution is a combination of UI5 and ABAP OData, you can achieve part of certain function in UI5 and part of it in ABAP backend. I would like to suggest to try to move more function to be achieved in ABAP rather than in UI5. For example, you can control the display of certain field through UI5 directly or through an indicator from ABAP OData. I would prefer to choose control through ABAP OData because it reduce the logic in WEB UI side which improve performance in UI.

Clean Cache

Cleaning cache to show the updated development is a continuous work which I need to do in the development phase. Otherwise when you fail to achieve certain function, you will always doubt if you clean cache already or not. Below 3 transaction codes I think are the most important to clean cache. If you could  not clean cache with below TCodes, I believe  it is not cache issue. You should consider other ways to solve the problem.

/iwfnd/cache_cleanup

/iwbep/cache_cleanup

SMICM invalidate cache globally

Debugging

In case of issues, I used Google Chrome Developer Tools to debug and set break point. Console can show you all the errors inside the WEB APP. You also can disable cache and check the OData request and response through Network tab of developer tool.

So far, I think compared with Native IOS or Andriod APP, UI5 APP are not as good as them. The major drawback is not support offline mode and some APP control still need to be improved. But I believe Fiori UI5 is the future of SAP. We do need to skill up to obtain the mobility development skill as a SAP Developer.

Happy Coding.