Backbone.js Application Structure in SuiteCommerce

The Backbone.js framework underpins the MVC architecture used in SuiteCommerce applications, enabling structured web development. By separating the data (models) from the presentation (views), Backbone.js gives developers a clear pathway for handling client-side interactions efficiently.

How Does the Backbone.js Structure Work?

Backbone.js organizes applications in terms of three main components: routers, views, and models/collections.

What Are Routers?

Routers manage the application state and URL routes. They map specific URL patterns to functions that invoke the corresponding actions or events. Within each router's configuration, a routes object delineates which URLs lead to which methods, facilitating an intuitive navigation experience.

What Are Views?

Views handle the application's user interface and its interactivity. Each view is typically tied to a model or collection, enabling it to reflect changes in data dynamically. Upon initialization, a view receives its corresponding model, creating an interactive relationship between the data and the user interface. Notably, starting from the Elbrus release, all views default to composite views, utilizing Backbone.CompositeView.js for enhanced functionality. Instead of defining HTML/CSS directly, views specify templates that the rendering engine populates with data at runtime.

What Are Models and Collections?

Models represent the data structure of the application, encapsulating the properties and methods necessary to create, update, or delete data objects. Collections are groups of models, offering methods to manage them as bulk entities.

Example Implementation

In the Case module, for instance, the router is defined with the following configuration:

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

When a user taps on a case, instead of reloading the page, the router triggers the showCaseList method based on the given URL. This method:

• Initializes Case.Model, which contains data specific to the support case.
• Initializes Case.Detail.View, which presents the case data on the UI.

The model Case.Model extends Backbone.Model, integrating extra methods for data validation on the frontend.

Key File Locations for Backbone.js in SCA

The SCA architecture stores critical Backbone.js files in:

• Modules/third_parties/backbone.js: Contains the unmodified Backbone.js libraries.
• Modules/suitecommerce/BackboneExtras: Houses the extensions and custom functionalities of Backbone.js. Changes to the framework should primarily occur here.

Note: As of version 2020.1 and later, SuiteCommerce encourages the use of the extensibility API's components (SCCollection and SCModel) over the native Backbone counterparts. These enhancements facilitate flexibility and integration into the SuiteCommerce ecosystem while ensuring long-term support and best practices.

Key Takeaways

• Backbone.js adheres to the Model-View-Controller (MVC) pattern, enhancing code structure and clarity.
• Routers map URL patterns to behaviors, promoting seamless navigation without full page reloads.
• Views manage user interactions efficiently, utilizing templates for dynamic content rendering.
• Models encapsulate data and logic, allowing for effective data manipulation and validation on the frontend.
• The SuiteCommerce extensibility API introduces new standard components to replace native Backbone.js functionality.

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