Model View Controller (MVC) and Backbone.js
Source files of each module follow the Model View Controller (MVC) architectural pattern. One of the core principles of the MVC pattern is to separate the presentation layer (view) of an application from the data (model) used by the application. All interaction between views and models are handled by the controller.
To implement the MVC pattern, SuiteCommerce Advanced (SCA) uses the Backbone.js libraries. Backbone.js is an open-source JavaScript library that provides a framework for developing web applications.
Structure of a Backbone.js Application
Backbone.js is based on the MVC pattern. Modules that define interfaces or handle data use Backbone.js to define routers, views, and models/collections. The Case module, for example, implements each of these:
-
Routers: map URLs to client-side pages to methods that define actions and events. In feature modules, these methods initialize the views, models, and collections that handle the user interface and create frontend objects to handle data.
Each router contains a routes object that defines the mapping between URLs and methods.
-
Views: contain methods that define the behavior of the user interface. Views are commonly associated with a model or collection. When a view is initialized, its corresponding model is usually passed, ensuring that the view has access to the data within the model. Most views define listeners that notify the view when an element within the model is modified. These listeners enable a specific part of the application to be updated independently without having to reload the page.
With the Elbrus release of SCA and later, all views are composite views by default and extend Backbone.CompositeView.js.
Views do not define the HTML or CSS of a feature or component. Instead, they specify the template that defines the HTML code for the component or feature. The templating engine handles the rendering and updating of the HTML.
-
Models and Collections: define objects that contain data used by the application. They also define the methods that create, update, or delete data.
Backbone.js Module Example
For example, the Case module defines a router (Case.Router.js) that contains the following:
routes:
{
'cases': 'showCasesList'
,
'cases?:options': 'showCasesList'
,
'cases/:id': 'showCase'
,
'newcase': 'createNewCase'
}
When a user clicks on an individual case from the list of support cases, instead of sending an HTTP request back to the server, the router calls the showCaseList method based on the value of the partial URL (cases). This method performs two main tasks:
-
Initializes the model that contains data for a specific support case (Case.Model).
-
Initializes the view that displays the data (Case.Detail.View)
Case.Model defines the data object that contains information about an individual support case. Case.Model extends the Backbone.Model by defining additional methods for performing frontend validation. When the router initializes Case.Detail.View, it passes the instance of Case.Model.
SCA Backbone.js Implementation
The Backbone.js libraries provide a general framework for how a web application is structured and its general functionality. However, much of the specific functionality of the application must be implemented. SCA stores Backbone.js files in the following directories:
-
Modules/third_parties/backbone.js: contains the core Backbone.js libraries. In general, you should not modify the files in this directory.
-
Modules/suitecommerce/BackboneExtras: contains extensions of core Backbone.js functionality, including Backbone.View and Backbone.Model. If you need to make changes to the Backbone.js framework, you may need to modify the files in this directory.
In SCA 2020.1 and later, you should use the SuiteCommerce extensibility API’s SCCollection and SCModel components instead of the native Backbone.Collection and Backbone.Model. In SCA2020.2 and later, you should use the SuiteComerce extensibility API’s SCView component instead of the native Backbone.View. SCCollection, SCModel, and SCView are components of the SuiteCommerce extensibility API that replace Backbone.Collection, Backbone.Model, and Backbone.View, respectively. See the extensibility API reference for more information.