Introduction to Single Page Applications
Single page applications (SPAs) are web applications used on many websites to provide a way to interact with the page without needing to reload it. When you interact with SPAs, most of the page stays the same and only specific sections are updated.
To learn more about SPAs and how to use them in NetSuite, see the following topics:
How a Single Page Application Works
SPAs load the application code (HTML, CSS, JavaScript) only one time, the first time you access the page. Because JavaScript handles all browser events, each new request consists only of the specific information needed to update the page.
In contrast, with multi-page applications, every time you request new information, the browser loads a whole new page instead of only updating the parts that changed.
SPAs convert data to HTML in the client (browser), instead of converting data in the server and sending it back to the client.
Advantages of Single Page Applications
The main advantages of SPAs are:
-
More dynamic and seamless user experience. You get real-time updates without reloading the page or resubmitting the form.
-
Faster loading and less bandwidth consumption compared to HTML.
-
Easier to debug and maintain because the presentation and application are kept separate.
-
Built-in NetSuite look and feel.
Single Page Applications in NetSuite
You can use SPAs instead of Suitelets to build a customized user interface in NetSuite.
To develop SPAs, you need the following NetSuite features:
-
NetSuite User Interface Framework (UIF) – Gives you a library of UI components to build SPAs with the NetSuite look and feel. Access UIF through your account-specific URL: https://
<AccountID>.app.netsuite.com/ui/apps/catalog.nl. For more information, see NetSuite User Interface Framework for Single Page Applications. -
SuiteScript – Lets you use client and server scripts, which you need to create an SPA. You can also load SuiteScript modules from the SPA's client and server scripts.
-
SuiteCloud Development Framework – Lets you create SuiteApp projects, which you use to develop and deploy SPAs to target NetSuite accounts.
For information about the setup requirements for developing SPAs in NetSuite, see Single Page Application Creation And Development.
Single Page Application Terminology
To understand how single page applications work in NetSuite, you should be familiar with these terms.
-
NetSuite User Interface Framework (UIF) – The NetSuite frontend framework for building user interfaces in JavaScript. This UI library loads by default when you run an SPA. You can use it in SPAs to get the NetSuite look and feel. UIF uses features such as JSX syntax and ECMAScript module management.
-
Single Page Application (SPA) – A web application that dynamically updates the page when you interact with it, without fully reloading.
In NetSuite, SPAs are built as part of an SDF SuiteApp project and includes these components:
-
SPA client script – This script runs the application in your browser. It loads the components and can also load SuiteScript modules and custom modules.
-
SPA server script – This script is the entry point for the application and has an API to modify the response (add scripts, perform validations, etc.). For example, the application can show an error if the user doesn't have a specific role.
-
Assets folder – This folder holds all the assets for the SPA (images, stylesheets, subfolders, etc.). You can access these assets through the SPA asset endpoint
/spa-app/<ApplicationID>/<SpaFolder>/assets/<path_to_asset>, where<path_to_asset>is the file's relative path in the assets folder. -
SPA object definition – The XML file that defines the SPA object in the SDF SuiteApp project. It sets the SPA name, URL, references to the SPA folder and script files. In SDF, SPAs are defined as a singlepageapp SDF custom object. For more information, see Single Page Applications as XML Definitions.
-
-
SPA URL – The link you use to run the SPA. It's made of up of:
-
Base URL – Where you access your NetSuite account.
-
Application ID – The SuiteApp application ID, made up of the publisher ID and project ID from when you created the SDF SuiteApp project for the SPA.
-
Custom URL – The custom URL you set in the SPA object definition XML file.
Here's an example of an SPA URL: https:
<AccountID>.app.netsuite.com/spa-app/<ApplicationID>/<CustomURL>. -
-
SuiteApps – Applications or bundles that extend NetSuite for specific industry and business needs. You use SuiteApp projects created with SDF to develop and deploy SPAs in NetSuite. For more information, see SuiteApp Projects.
-
SuiteCloud Development Framework (SDF) – A development framework you use to create SuiteApps or customize NetSuite accounts using SuiteCloud projects. For information, see SuiteCloud Development Framework.
-
SuiteCloud projects – Projects you create using SDF. There are two types: account customization projects and SuiteApp projects. For information, see SuiteCloud Project Types.