rox-browser

ROX is a Continuous Feature Rollouts system

Accelerate development and minimize the risk of deploying new code with simple to create feature flags, controlled rollouts, and contextual analytics & integrations.

Features

• Client-first: ROX is the first feature flagging system built from the ground up to run directly inside phones, tablets, wearables and remote devices
• Simple: ROX allows developer to focus on their business logic and not working with complex configuration on the dashabord
• Modern: Using static types, the compiler and IDE are responsible to prevent collisions to allow easy flags discovery by develoeprs (by autocomplete)
• Support Optimizations: ROX unique proposition is that is supports the company needs a full capable exerimentation system, for A/B/N testing, optimizations, customizations and more
• Remote Conifguraion included: ROX include a remote configuraiton module that allows developers to defined configuration that can be controlled from the server

Getting Started

Please see the detailed instructions in our docs how to add ROX to your project.

Documentation

Getting started guide, use cases, examples and videos can be found in Rollout support site

ROX JS SDK for browser 🦆

The package is Javascript SDK of ROX by Rollout.io for integration with web applications. Define and use simple and advanced feature flags, remote configuration variables, static and computed custom properties in code. Control your application via Rollout.io dashboard.

Installation

npm i rox-browser --save

Usage

Obtain application key by registering at Rollout.io. As soon as your app is created, start using the SDK

import Rox from '../src';

const appSettingsContainer = {
  shouldShoWelcome: new Rox.Flag(),
  textColor: new Rox.Configuration('black')
};

const onRoxReady = () => {
  if (appSettingsContainer.shouldShoWelcome.isEnabled) {
    const color =  appSettingsContainer.textColor.value
    const div = document
      .createElement('div')
      .textContent('Hello world!')
      .setAttribute('style', `color: ${color}`);

    const body = document.getElementsByTagName('body')[0]
    body.appendChild(div)
  }
};

Rox.register('settingsNamespace', appSettingsContainer);
Rox.setup('<app key', {
  syncCompletionHandler: onRoxReady
});

Configure the SDK with different options

Override the default configuration by prodiving predefined configuration preset for Rox.setup.

For example:

import Rox from '../src';

/*
- roxOptions.distinctId
- roxOptions.version
- roxOptions.syncComplitionHandler
*/

const roxOptions = {
  distinctId: 'sessionDistinctId',
  version: '1.0',
  syncCompletionHandler: () => {}
};

Rox.setup('appKey', roxOptions);

Activating Manual Overrides UI

You can overide flags manually using a built-in UI debug utility that can be activated by invoking Rox.showOverrides().

Running it will display an UI element that allows to explicitly set values of flags. Possible option is the location of the UI element:

• 'top left'
• 'top right'
• 'bottom left'
• 'bottom right' (default)

LICENSE

Rollout for browser is free-to-use, proprietary software. Please see the full license (found in LICENSE in this distribution) for details on its license and the licenses of its dependencies.

Feedback

If you use ROX and are happy with it, all we ask is that you please consider emailing [e-mail] to share your thoughts!

And if you don't like it, please let us know what you would like improved, so we can fix it!