Backbone.js MVC Implementation in SuiteCommerce Advanced

Backbone.js serves as a vital part of the SuiteCommerce Advanced (SCA) framework, providing a structure based on the Model View Controller (MVC) architectural pattern. This separation of concerns helps in isolating the presentation layer from application data, enhancing maintainability and scalability of web applications.

Structure of a Backbone.js Application

The following components deliver the MVC framework within Backbone.js:

• Routers: These map URLs to specific client-side methods that define actions and events. Each feature module's router initializes the associated views, models, and collections handling the user interface. Importantly, routers contain a routes object that establishes the relationship between URLs and their corresponding methods.

• Views: Views contain methods that dictate the behavior of user interfaces tied to specific models or collections. Initialization of a view typically involves passing the relevant model, allowing the view to access its data. Listeners within views monitor modifications to their model, enabling dynamic updates without full page reloads. Notably, starting with the Elbrus release of SCA, each view extends from Backbone.CompositeView.js. Instead of managing HTML and CSS directly, views specify templates for HTML structure, with a templating engine responsible for rendering.

• Models and Collections: These encapsulate data within the application and define CRUD operations.

Backbone.js Module Example

For instance, the Case module might define a router (Case.Router.js) containing:

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

Here, when a user clicks on a case from the support list, the appropriate method (showCaseList) is triggered that 1) initializes the model (Case.Model) encapsulating case data, and 2) initializes the view (Case.Detail.View) that displays it.

SCA Backbone.js Implementation

SCA utilizes Backbone.js libraries, housed in distinct directories:

• Modules/third_parties/backbone.js: This directory contains the core Backbone.js library, which should generally remain unmodified.

• Modules/suitecommerce/BackboneExtras: This folder contains custom extensions for Backbone functionalities, suitable for necessary modifications to adapt Backbone in SuiteCommerce.

Important Note

In SCA 2020.1 and later, it’s recommended to transition to SCCollection and SCModel from the SuiteCommerce Extensibility API, replacing the native Backbone functionalities. In version 2020.2 and onwards, SCView should be utilized instead of Backbone.View. These components are essential to leverage the enhanced capabilities provided by the SuiteCommerce extensibility framework.

Key Takeaways

• Backbone.js implements the MVC architectural pattern in SuiteCommerce Advanced, enhancing application structure.
• Routers, views, models, and collections structure the application effectively.
• Custom modifications should be made within designated directories to ensure long-term maintainability and alignment with future updates.
• Transitioning to the SuiteCommerce extensibility API enhances functionality and supports best practices.