Skip to Content

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

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Doyle

    Nice thought provoking blog, Wouter, thanks for sharing your thoughts.  When I started with UI5 I found the concepts much easier because I had done lots of web dynpro and so was familiar with MVC.  You’re right though, that there are some important differences.

    For me UI5 is all about binding controls directly to models.  In particular I’m a big fan of expression binding.  I bind often to JSON models and like to mix in some derived or calculated properties.  When all of my customers have moved to HANA I will be happy to take the suggested approach and let the server do all the work (using CDS views) but right now with ECC on a legacy database I find client-side filters and sorts work well.

    How does your ViewModel concept relate to the binding that we have in UI5, e.g. the ListBinding that sits between a list and the data, where we apply the sorting and filters?

    (0) 
  2. Wouter Lemaire Post author

    Thank you for sharing your experience! Glad you also noticed differences 🙂

    The sorting and filtering is something you can add directly into the binding in the view or in the ViewModel itself by calling “getBinding().filter()”. The concept stays MVVM because it filters on the model in the ViewModel.

    But I believe the dynamic binding on a list like for example “/EntitySet(‘<dynamicValue’>)/List” is still a shortcoming in UI5… This is maybe part of another discussion 🙂

    Kr,

    Wouter

    (1) 
  3. Simphiwe Tshabalala

    Hi Wouter,

     

    I agree 100%, SAPUI5 is documented as pure MVC but when implementing a SAPUI5 app application pure MVC doesn’t cut it , as the code becomes to cumbersome, I myself have started using MVVM which I found to be more efficient

     

    Sim

    (1) 
  4. Chris Neve

    Completely agree, Wouter. I just discovered the notion of MVVM and it instantly reminded me of UI5. Glad to see someone confirm my feelings! Thanks for sharing this.

     

    Chris

    (1) 

Leave a Reply