Lesson and Learnt from my first Fiori UI5 APP

[kemi]

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.

[Former Member]

Hi Kemin, Great work! Congratulations!

[jcgood25]

Hi Kemin - I always appreciate feedback and telling a story like you did in your blog.  I'm curious to know what sort of design tool and feedback mechanism did you use during the early project phase.  You mention some of the other tool and products like Web IDE, but have you looked at Splash / Build (www.experiencesplash.com)?

[NeerajRao]

Great work Kemin.. :smile:

[former_member183048]

Excellent Blog Kemin.

One question though - After deploying from Web IDE to your on premise server, did you have to make any changes in the BSP application files - Mainly around location of resources and javascripts?

Regards,

Nikhil

[Former Member]

Quick, well-written overview of developing a UI5 app...lots of practical knowledge. Thanks.

[BrianE]

Excellent blog post.I agree that WebIDE is the way to go.

And I agree with Jeremy that developers should look at Splash / Build (www.experiencesplash.com).

[kemi]

If official version web ide, you do not need to change any thing. If trial version, you need to some javascripts in index.html and component.js.

[former_member183048]

Thanks Kemin. Could you please provide some more details on that? I am trying to deploy from the Local Web IDE into the Sandbox system

[Former Member]

Good job - congratulations

[Former Member]

Thanks for the blog. I have to comment two things:

"But with Eclipse you need to deploy the development to the gateway system first then conduct testing, which waste some times."

This is not true! Testing in Eclipse works the same as in WebIDE. You just have to use a proxy in your service url (proxy/http/[link to sap system]).

"I would prefer to choose control through ABAP OData because it reduce the logic in WEB UI"

I have to disagree. In my experience, the communication with the backend takes much more time than the application logic on the frontend. So I would say to optimize performance, you should reduce the backend calls and move more logic to the frontend.