Splitting up controller in multiple js files

Question

I was wondering how to go about splitting up a controller in multiple JavaScript-files. I currently have a controller which has about 5000+ lines and it is rather frustrating to navigate through it. Any suggestions how to get started?

Answer 1

You can start with several approaches:

1. Use "Mixin" pattern
2. Split your logic up to several "classes" and put them to separate AMD modules, then just "require" them and use in your controller

Mixin can be implemented as an AMD module which just returns JSON object with all needed functions. In order to inject it to the controller, just make use of jQuery.extend method to enhance the controller's object with mixin.

Answer 2

This question would lead to somewhat opinionated answers but generally, you could start off by:

• Asking yourself whether it is possible to reduce the 5k+ LOC first. E.g.:
  • Make sure you were not reinventing the wheels what UI5 already supports out-of-the-box such as formatting, parsing, and validating model data.
  • Consider to take more declarative approaches that UI5 offers, such as application descriptor, simple expression bindings, two-way data binding, splitting the view into small fragments / views having their own controller if reasonable (separating concerns), etc.
• Analyzing your code to embrace composition over inheritance (short intro)

I'd also encourage to write some regression tests before you start.

Answer 3

Another approach is to set up some hierarchy between your controllers and use inheritance between the controllers. Move the logic which is used by several controllers to one BaseController.js.

For example you can set up a BaseController.js which extend from sap/ui/core/mvc/Controller:

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) {
    "use strict";

    return Controller.extend("BaseController", {

        someBaseFunction : function() {
            // Do something
        },

    });

});

And the in another controller e.g. App.controller.js extend from your BaseController.js:

sap.ui.define(["%PATH_TO_YOUR_BASE_CONTROLLER%/BaseController",

], function(BaseController) {
    "use strict";

    return BaseController.extend("%PATH_TO_YOUR_APP", {

        onInit : function() {
            // Call function from BaseController.js
            this.someFunction();
        }

    });

});