SCA Backbone.js Implementation for SuiteCommerce Development

TL;DR Opening

SuiteCommerce Advanced (SCA) leverages Backbone.js to implement the Model View Controller (MVC) design pattern for web applications. This separation enhances the architecture and functionality by organizing code effectively.

Understanding MVC in SCA

The Model View Controller architectural pattern is vital for maintaining a clear separation between the data layer and the presentation layer of an application. In SCA, the interactions between models and views are managed by controllers, which handle the application’s flow.

Backbone.js Framework

To facilitate the MVC implementation, SCA employs Backbone.js, an open-source JavaScript library that streamlines the development of web applications. This library allows developers to define routers, views, models, and collections.

Components of Backbone.js Application

• Routers: These components map URLs to specific client-side pages. They initialize views, models, and collections responsible for user interfaces, efficiently creating frontend data handlers.

• Views: Views include methods that govern the behavior of user interfaces. Each view is typically tied to a specific model or collection and is initialized with its corresponding model to ensure seamless data access. Modern views, starting with the Elbrus release, default to composite views extending Backbone.CompositeView.js. Notably, views define templates rather than HTML or CSS directly, enabling effective rendering and updating of UI components through a templating engine.

• Models and Collections: These objects encapsulate the application data and the methods necessary for data manipulation (create, update, delete).

Example of a Backbone.js Module

The Case module serves as a practical example within SCA, showing how Backbone.js is utilized:

Case Module Router Example

Within the Case module, the router (Case.Router.js) defines routes as follows:

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

When a user selects a case, the router triggers the showCaseList method without needing a server request. This method executes:

• Initializing the specific support case model (Case.Model).
• Initializing the corresponding view to display the case data (Case.Detail.View).

The Case.Model extends Backbone.Model, featuring additional frontend validation methods, while Case.Detail.View is initialized with its model instance.

Key SCA Backbone.js Directories

In SCA, Backbone.js libraries are structured in designated directories:

• Modules/third_parties/backbone.js: Houses the core Backbone.js libraries. Modification of these files is generally discouraged.
• Modules/suitecommerce/BackboneExtras: Contains extensions to Backbone.js. Changes to the framework may occur within this folder.

Note on Extensibility

In SCA 2020.1 and later, developers are encouraged to use the SuiteCommerce extensibility API's components (SCCollection, SCModel, and SCView) to replace the native Backbone.js components, facilitating better integration within the overall SuiteCommerce architecture. More information on this API can be found in the extensibility API reference.

Key Takeaways

• SuiteCommerce Advanced effectively adopts Backbone.js for MVC architecture.
• Separate handling of models, views, and routers improves application structure.
• The naming and structure of the backbone files are critical to successful implementation.
• Transitioning to SuiteCommerce extensibility API enhances functionality and integration.

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