Throughout these articles, we will refer to experiences. Put simply, an experience is a distinct piece of functionality or a personalization that is individually deployed and tracked.

Each experience consists of the same basic anatomy:

• triggers.js - code that controls when the experience should execute
• variation.js - code that determines what happens once the experience has triggered
• variation.css - css that will be injected into the page once the experience has triggered
• utils.js - a convenient space for defining common functions and variables
• fields.json - where you can define experience options that are configurable by non-developers
• package.json - a place for metadata about your experience such as package dependencies

Once Qubit's script loads on the page, each experience goes through the following lifecycle:

1. Segmentation and trigger rules are applied and triggers.js is executed
2. If the trigger function calls the callback, variation.js is executed and variation.css is injected into the page

The Experience Editor is at the heart of Qubit's platform. This is where you can implement personalization features for your site.

The editor also features linting options. You can see the current linting setting at the bottom of the editor. In the following example, we see that linting is set to strict:

To change the linting setting, simply select the Linting button and make a new selection:

• Minimal - flags possible syntax or logic errors in JavaScript code
• Recommended - extends ESlints "eslint:recommended" rule. See Rules
• Strict - enforces StandardJS rules. See StandardJS - The Rules

Select Confirm to save your selection

Whenever you make changes to one of the JavaScript files or the CSS file, the editor will automatically save your changes and provide a prompt to denote where changes have been made since the last manual or auto-save.

In the following example, the editor displays a prompt alongside the Variation.js and Variation.css files to denote a change has been made:

You can turn this feature off by selecting the drop-down arrow next to Save and selecting Disable autosave.

Once disabled, you will need to manually select Save to commit any changes.

To balance performance with enjoyable developer experience, all of the experience JavaScript code is transpiled from ES6 -> ES5 using the Open Source JavaScript compiler buble.

See buble documentation for a full list of supported ES6 features, including:

• Arrow functions
• Classes
• Object shorthand methods and properties
• Template strings
• Default parameters
• Block scoping
• Computed properties
• JSX elements
• ... And many more!

All experience CSS code is compiled using the open source LESS compiler.

This means you can make use of many of the great functionality that LESS offers, including:

• Variables
• Nested rules
• Arithmetical operations
• Mixins
• ... And many more!

See Less CSS documentation for a full list of supported features.

Qubit CLI is a command line tool for developing Experiences locally.

It's an alternative to Qubit's built in web code editor that enables you to use your own favourite code editor and tools to build experiences.

For more info, click here.

Packages make it easy to share and reuse code across experiences and to consume any of the hundreds of thousands of open source projects available on npm.

For more info, click here.

Refer to the following tables and see Browser Compatibility for further information: