Backbone.js Architecture for SuiteCommerce Applications

Backbone.js is a key framework used within SuiteCommerce Advanced (SCA) applications, following the Model View Controller (MVC) architectural pattern. This separation fosters a clear distinction between the presentation layer (view) and the application's data (model).

Structure of a Backbone.js Application

The Backbone.js architecture consists of several core components:

• Routers: They map URLs to specific client-side methods, initializing views and models that manage the user interface without needing full page reloads.

  • Each router includes a routes object to define URL-to-method mappings.

• Views: Views dictate the behavior of the user interface and are linked to models or collections. When a view is initialized, it typically receives a model to ensure access to necessary data. Views also use listeners to update specific sections of the application upon model changes, thus enhancing user experience by avoiding page reloads.

  • From the Elbrus release onwards, all views are composite views by default, extending Backbone.CompositeView.js.
  • Views do not provide the HTML or CSS directly; instead, they utilize a templating system that renders the presentation layer.

• Models and Collections: These define the data structures of the application and include methods for data manipulation, such as creating, updating, or deleting records.

Backbone.js Module Example

A typical representation is within the Case module that illustrates usage of a router, defined in Case.Router.js:

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

In this setup, when a user clicks a case from the support case list, instead of triggering an HTTP request, the router invokes the showCaseList method based on the URL segment provided. This action consists of:

• Initializing Case.Model to handle data pertinent to the selected support case.
• Creating an instance of Case.Detail.View to display this data.

The Case.Model extends Backbone.Model and incorporates additional methods for frontend validation, ensuring robustness in user interactions.

SCA Backbone.js Implementation

The Backbone.js libraries outline a general structure for web applications, but developers typically need to implement specific functionalities within this framework. SCA organizes Backbone.js files into distinct directories:

• Modules/third_parties/backbone.js: This directory includes the core Backbone.js libraries. It is advisable not to modify these files directly.
• Modules/suitecommerce/BackboneExtras: Here, you can find extensions of the core Backbone.js functionalities, including customized models and views. Any necessary modifications should primarily occur in this directory.

Note: Starting from SCA 2020.1, developers are encouraged to utilize the SuiteCommerce extensibility API's SCCollection and SCModel components in place of the traditional Backbone.Collection and Backbone.Model. Furthermore, subsequent releases mandate adopting the SCView component instead of the conventional Backbone.View. For additional insight, refer to the extensibility API reference documentation.

Key Takeaways

• Backbone.js is crucial for structuring SuiteCommerce applications into manageable modules.
• The MVC architecture separates concerns, improving application maintainability and user experience.
• Use of the SuiteCommerce extensibility API is recommended for updated implementations.

Source: This article is based on Oracle's official NetSuite documentation.