Methodology: Keep MVC model clear in SAPUI5

Hi Developers,

If you’re SAPUI5 developer, you may already know that SAPUI5 is a UI technology based on the Model View Controller (MVC) frame work.

However, in my practice, and many other developer’s practices, we didn’t organize the app’s code into the MVC framework efficiently. The example is my current XXF project (hidden name), which contains thousands line of code in one controller.js file; and hundreds line of code in each function.

I spend time to analyze why the former developer could make this app into a mess. I’ve find some reason:

1. The code is not well organized into functions with coding best practice (maximum 40 lines of code per function). The reason behind this is that maybe this app is developed by multiple developers along a long development time. Each time a new function is required, the new developer writes his code on top of the old developer, which gradually make the code a mess.
2. The MVC is not followed efficiently. SAPUI5 is new so most developer will follow the template generated from Web IDE, and this template seem to not really well follow the MVC concept: all the HTTP request (with host & resource path) is configured & called directly into the controller code. it’s OK for a small app. But for a big app, this creates hundreds line of code and make the HTTP call difficult to be managed.

After analyzing the reason for the code mess in my XXF project, the first thing I can suggest to do is: Reconstruct the code into the MVC model.

Multiple controllers but only 1 model.js file

Currently, there’s are 5 controller files with thousands line of code, whereas there is only one model.js file with dozens line of code. So we need:

• Move all HTTP request to model.js by creating model’s function. (like getSR(); createNewSR(); updateSR(); updateCategory()…)
• The controller code will focus on the controller (UI control) logic only.

After this reconstruction, we will get benefits:

• Reduce the controller’s code → easy to read, focus on the controller’s logic. The HTTP details are maintained in model.js file.
• All the HTTP with hostname, path & parameter is in model file → Easy to maintain when Backend change in the future. (which happen a lots during different Sprint)

All the best!

— V —

#sapui5 #MVC

p/s: This blog post is just about the idea. I will write a tutorial on how to do that in the future if many of you are interested.