Backbone.js MVC Structure in SuiteCommerce for eCommerce

Backbone.js is utilized within SuiteCommerce Advanced (SCA) to implement the Model View Controller (MVC) architectural pattern, which is crucial for separating the presentation layer from the data layer of an application. This approach enhances the ability to manage complex interactions between views and models effectively.

Structure of a Backbone.js Application

In Backbone.js, modules are organized into various components:

• Routers: These components map URLs to methods that define client-side event actions. They initialize the necessary views, models, and collections that manage the user interface. Each router includes a routes object, which specifies the mapping between URLs and methods.
• Views: These define user interface behavior and are typically associated with a model or collection. Upon initialization, views receive their corresponding model, allowing them to access relevant data. Most views implement listeners to react to model changes, enabling dynamic updates without full page reloads. Since the Elbrus release, views automatically extend the Backbone.CompositeView.js class.
• Models and Collections: These are objects that encapsulate the data utilized by the application, along with methods for manipulating that data (creating, updating, or deleting entries).

Backbone.js Module Example

A practical implementation can be seen in the Case module. This module defines a router as follows:

1routes: {
2  'cases': 'showCasesList',
3  'cases?:options': 'showCasesList',
4  'cases/:id': 'showCase',
5  'newcase': 'createNewCase'
6}

When a user navigates to an individual case from the support cases list, the router utilizes the showCaseList method corresponding to the URL segment. This method accomplishes two objectives:

1. Initializes a model representing the specific support case (Case.Model).
2. Initializes a view to display the model's data (Case.Detail.View).

Case.Model is a Backbone model that represents a support case, extending from Backbone.Model with added methods for frontend validation. The router passes an instance of Case.Model to Case.Detail.View upon initialization.

SCA Backbone.js Implementation

Backbone.js provides a general framework for application structure, but much of the application’s specific functionality needs to be implemented by developers. In SCA, Backbone.js files are located in designated directories:

• Modules/third_parties/backbone.js: Contains the essential Backbone.js libraries. Developers are advised against modifying these files.
• Modules/suitecommerce/BackboneExtras: Houses extensions of the primary Backbone.js functionality, including Backbone.View and Backbone.Model. Changes to the Backbone framework should typically be made in this directory.

Important Notes

With the release of SCA 2020.1 and later, it is recommended to use components from the SuiteCommerce extensibility API, specifically SCCollection and SCModel, in place of Backbone.Collection and Backbone.Model. Furthermore, in SCA 2020.2 and later, SCView should be employed instead of Backbone.View. These components work seamlessly with the SuiteCommerce framework to enhance extensibility. For further guidance, consult the relevant API reference.

Key Takeaways

• Backbone.js facilitates the MVC pattern in SuiteCommerce, promoting better separation of concerns in web applications.
• Routers, views, models, and collections are integral components defining the structure and behavior of SCA applications.
• The SCA implementation includes guidelines regarding where and how to modify Backbone.js functionality safely.