UI5 Architectural pattern – MVC, MVVM or MVWhatever

Hello UI5 Experts,

The topic of this blog is something I’ve been thinking of for a while. It took me some time to find a way to formulate my thoughts. Here it goes 🙂

SAP is promoting and selling SAPUI5 as a framework which is using the MVC pattern just like in Webdynpro. In the documentation of SAP you’ll find the following representation of MVC that they use:

What I see in this version of MVC is:

• A Model which contains the data coming from your backend system
• A View which shows the data as a visual representation to the user
• A Controller to handle user action, update the model and manipulate the view

But I also see an arrow between the view and the model for data binding. This was something I didn’t see in the WebDynpro version of MVC. I thought MVC would be more like the next image. The same key elements but without the arrow between the view and the model.

There are some variants on MVC and you’ll find comparable MVC patterns on the web just like the one of UI5. But still I wonder if the architectural pattern of UI5 is MVC or would it suit better to another architectural pattern?

I’ve been working on multiple Web projects on top of SAP with different technologies like KnockoutJS and AngularJS. While working on the project with KnockoutJS we used the pattern MVVM. AngularJS was also comparable to the KnockoutJS project with MVVM but we called it MVWhatever (google also does that 🙂 )

MVVM stands for Model View ViewModel. In this pattern the ViewModel acts like a controller but also contains a part of the model which is required on the view. Don’t we do the same in UI5?

My conclusion, the architectural pattern depends on how you use UI5

• I’ve seen standard Fiori apps where they use “this.byId(‘controlid’)” to get a control that’s on the view and then use the getter or setter function to access the value of a control in the controller.
  • In this case I would say we’re talking about MVC

• If your using the function “bindElement” in the controller to bind an entity to your view like this:

  • onRouteMatchedCats: function() {
    	this.getView().bindElement({
    		path: "/ProfileSet('DEFAULT')"
    	});
    },
    

    Or a JSONModel and bind it to the view.

    onRouteMatchedCats: function() {
       var timesheetModel = new JSONModel({data:example});
       this.getView().setModel(timesheetModel, "t");
    }
    ​

    Or like in this example: https://blogs.sap.com/2015/12/28/ui5-classes-and-objects-putting-it-all-together/

    In these three cases you’re selecting a specific part of the (global) model in the controller that you want to use in your view. This means that your Controller contains logic of the view and a model for that view. I would say we’re talking about the MVVM pattern.

If we would follow the best practices of SAPUI5 then it would be (most of the time) MVVM that we’re using.

I’m not saying that my theory is the right one. But saying that SAPUI5 is using the MVC pattern is maybe too easy. We could or should use the same principle as google and just say that UI5 is following the architectural pattern MV* or MVWhatever. In that case it would always be correct!

It’s a very theoretical topic but therefore it’s not less important.  I hope that I’m not the only one who thinks about SAPUI5 like this. Please share your opinion and vision about this! I like to discuss this topic 🙂

Kind regards,

Wouter