Backbone.js Application Structure in SuiteCommerce

Backbone.js is an open-source JavaScript library that follows the Model View Controller (MVC) architectural pattern, which separates the user interface (view) from the data (model). This separation allows for modular and maintainable code.

Structure of a Backbone.js Application

In SuiteCommerce Advanced (SCA), the Backbone.js framework allows developers to build web applications with structured components. Key components of this architecture include:

• Routers: These handle URL mappings to client-side pages and methods defining actions. Each router maintains a routes object that links URLs to specific methods.

• Views: Responsible for the UI behavior, views are tied to models or collections. They receive their models upon initialization and listen for changes, enabling dynamic updates without a full page reload. In SCA, views are composite by default starting with the Elbrus release, extending Backbone.CompositeView.js.

• Models and Collections: These objects encapsulate the data used by the application and include methods to create, update, and delete this data.

Example of a Backbone.js Module

An example is the Case module, which defines a router, Case.Router.js, that includes:

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

In this scenario, when a user selects a specific case, the router executes the showCaseList method without needing to make a server request, thereby enhancing the user experience. This method initializes both the model containing the case data (Case.Model) and the relevant view (Case.Detail.View).

SCA Backbone.js Implementation

The organization of Backbone.js files within SCA is crucial for preserving functionality and modularity:

• Modules/third_parties/backbone.js: Contains the core Backbone.js libraries. Avoid modifying these files to maintain integrity.
• Modules/suitecommerce/BackboneExtras: Houses extensions of Backbone.js that allow for custom modifications.

Important Note

Starting from SCA 2020.1 and later, it is advised to transition to using the SuiteCommerce extensibility API, utilizing SCCollection, SCModel, and SCView as replacements for their Backbone counterparts. This shift improves integration and functionality for SCA developers.

Key Takeaways

• Backbone.js employs the MVC pattern to separate data from the presentation layer.
• Routers, views, and models are essential components in structuring a Backbone.js application within SCA.
• The Case module demonstrates how routing and views interact without server requests.
• Modifications should be made in the appropriate SCA directories to ensure application integrity.
• Use SuiteCommerce’s extensibility API for better management and functionality in newer versions.