The Atono SDK connects your application to Atono so you can evaluate feature flags and track feature usage. Available capabilities depend on the SDK you use.

This guide shows the fastest path to a working setup. For full coverage of either topic, see Feature flags and Feature engagement.

Choose an SDK

Choose the SDK based on your application type and the capabilities you need.

Prerequisites

You'll need an environment key from Atono. You can find your environment keys on the Environments page.

Web SDK

Use the Web SDK for browser-based JavaScript applications. It supports feature flags and feature usage tracking.

1. Install the SDK

Run the following command in your project directory:

npm install --save @atono-io/web-sdk

2. Initialize the SDK

Connect the SDK to your Atono environment using your environment key. Initialize it once when your application starts:

import { Atono } from '@atono-io/web-sdk';

const atono = Atono.fromEnvironmentKey('$ENV_KEY');

Replace $ENV_KEY with your Atono environment key.

3. Evaluate a feature flag

Get the feature flag client and use the feature flag’s name to evaluate it:

const featureFlags = await atono.getFeatureFlags();

if (featureFlags.getBooleanValue('flag_name', false)) {
    // Turn on the feature
}

Replace flag_name with your feature flag’s name in Atono.

The second argument, false, is the fallback value returned if the SDK can’t determine a value for the flag, such as when the flag doesn’t exist or no configuration has been retrieved.

For more information, see Fallback value.

4. Record feature usage

Usage tracking requires version 1.1.0 or later of the Web SDK.

Call record() on the usage reporter when someone uses the feature you want to track. Pass the ID of the story associated with the feature, such as STORY-67.

In this example, button represents a reference to a specific element in the application. When that element is clicked, record() records a usage event for STORY-67.

const usage = atono.getUsageReporter();

button.addEventListener('click', () => {
    usage.record('STORY-67');
});

Replace STORY-67 with the ID of the story associated with the feature.

Usage events are published asynchronously, so calling record() doesn’t block while the SDK communicates with Atono.

Usage events appear in the story’s feature engagement graph. For more information, see Feature engagement.

React SDK

Use the React SDK for client-side React applications. It supports feature flags and feature usage tracking.

1. Install the SDK

Run the following command in your project directory:

npm install --save @atono-io/react-sdk

2. Initialize the SDK

Wrap your application in <AtonoProvider> and provide your environment key:

import { AtonoProvider } from '@atono-io/react-sdk';

function RootComponent() {
  return (
    <AtonoProvider environmentKey="$ENV_KEY">
      <App />
    </AtonoProvider>
  );
}

Replace $ENV_KEY with your Atono environment key.

Add the provider at the top level of your application so feature flags and usage tracking are available to the components inside it.

3. Evaluate a feature flag

Use the useFeatureFlag() hook in a component inside <AtonoProvider>:

import { useFeatureFlag } from '@atono-io/react-sdk';

function ChildComponent() {
    const isEnabled = useFeatureFlag()
        .getBooleanValue('flag_name', false);

    return isEnabled
        ? <Enabled />
        : <Disabled />;
}

Replace flag_name with your feature flag’s name in Atono.

The second argument, false, is the fallback value returned if the SDK can’t determine a value for the flag, such as when the flag doesn’t exist or no configuration has been retrieved. For more information, see Fallback value.

4. Record feature usage

Usage tracking requires version 1.1.0 or later of the React SDK.

Use the useUsageReporter() hook and call record() when someone uses the feature.

In this example, the code creates a button labeled Try the feature. When a user clicks it, onClick calls record() to record a usage event for STORY-67.

import { useUsageReporter } from '@atono-io/react-sdk';

function TryButton() {
  const { record } = useUsageReporter();

  return (
    <button onClick={() => record('STORY-67')}>
      Try the feature
    </button>
  );
}

Pass the ID of the story associated with the feature, such as STORY-67 .

Usage events appear in the story’s feature engagement graph. For more information, see Feature engagement.

Java SDK

Use the Java SDK for server-side Java applications. It supports feature flags and feature usage tracking.

1. Install the SDK

Add the Atono Java SDK as a dependency in your project.

<dependency>
    <groupId>io.atono</groupId>
    <artifactId>atono-java-sdk</artifactId>
    <version>VERSION</version>
</dependency>

repositories {
    mavenCentral()
}

dependencies {
    implementation 'io.atono:atono-java-sdk:VERSION'
}

2. Initialize the SDK

Create an Atono client using your environment key. Configure it once when your application starts:

import io.atono.sdk.Atono;

private static final Atono atono = Atono.builder().build("$ENV_KEY");

Replace $ENV_KEY with your Atono environment key.

3. Evaluate a feature flag

Use the feature flag’s name to evaluate it:

if (atono.getFeatureFlags().getBooleanValue(
    "flag_name",
    false
)) {
    // This code executes when the feature is enabled.
}

Replace flag_name with your feature flag’s name in Atono.

The second argument, false, is the fallback value returned if the SDK can’t determine a value for the flag, such as when the flag doesn’t exist or no configuration has been retrieved. For more information, see Fallback value.

If the flag is configured by customer or location, include evaluation context when evaluating it. For more information, see Set evaluation context.

4. Record feature usage

Call record() on the usage reporter when someone uses the feature you want to track. The usage key identifies the story associated with the feature, such as STORY-67.

atono.getUsageReporter().record("STORY-67");

Replace STORY-67 with the ID of the story associated with the feature.

Usage events are published asynchronously, so calling record() doesn’t block while the SDK communicates with Atono.

Usage events appear in the story’s feature engagement graph. For more information, see Feature engagement.

If you want to associate a customer or location with the usage event, pass evaluation context with the record() call. For more information, see Provide customer and location context.

Node.js SDK

Use the Node.js SDK for server-side JavaScript and TypeScript applications. It supports feature flags and feature usage tracking.

1. Install the SDK

Run the following command in your project directory:

npm install --save @atono-io/server-sdk

2. Initialize the SDK

Connect the SDK to your Atono environment using your environment key. Initialize it once when your application starts:

const { Atono } = require('@atono-io/server-sdk');

const atono = Atono.fromEnvironmentKey('$ENV_KEY');

Replace $ENV_KEY with your Atono environment key.

3. Evaluate a feature flag

Get the feature flag client and use the feature flag’s name to evaluate it:

const featureFlags = await atono.getFeatureFlags();

const isEnabled = featureFlags.getBooleanValue(
    'flag_name',
    false,
    evaluationContext
);

if (isEnabled) {
    // Turn on the feature
}

Replace flag_name with your feature flag’s name in Atono.

The second argument, false, is the fallback value returned if the SDK can't determine a value for the flag, such as when the flag doesn't exist or no configuration has been retrieved. For more information, see Fallback value.

The third argument, evaluationContext, provides the customer and location for the current request. Because the Node.js SDK runs on your server, pass context with each evaluation when the flag is configured by customer or location. For more information, see Set evaluation context.

4. Record feature usage

Call record() on the usage reporter when someone uses the feature you want to track. Pass the ID of the story associated with the feature, such as STORY-67.

const usage = atono.getUsageReporter();

usage.record('STORY-67');

Replace STORY-67 with the ID of the story associated with the feature.

Usage events are published asynchronously, so calling record() doesn’t block while the SDK communicates with Atono.

Usage events appear in the story’s feature engagement graph. For more information, see Feature engagement.

If you want to associate a customer or location with the usage event, pass evaluation context with the record() call. For more information, see Provide customer and location context.